Co-Browsing

Co-browsing is collaborative browsing, allowing the moderator and the participant to navigate the same web page simultaneously.

Overview

Co-browsing is collaborative and interactive. It allows participants to browse together during a video conference call. In addition, co-browsing is simultaneous and synchronous. It allows both participants to see what the other participant does on the screen in a co-browsing session.

Here are some examples of how you can use co-browsing to expand your customer interaction:

  • Fill out forms and applications together, guiding the participant in real-time.
  • Showcase two-way interactive presentations that are more engaging for your participants / viewers / audience.

How does co-browsing work?

Co-browsing is related to a website or webpage. You must prepare your website or web pages for co-browsing first. Once they are ready, you invite others to join a Co-Browsing session with you through a Unique URL, i.e., an existing URL with some Query String Parameters.

Once the other person joins, you can see each other's cursor position on the page, and all actions at one end get replicated at the other. If one end clicks on a link, the other end reaches the same page.

You can invite more people to join the same Co-Browsing Session.

Set-up Co-Browsing

How to use Co-Browsing with your website

Download SDK

Download EnxCoBrowse.js

Update your Website

Get your website ready for Co-Browsing by following the simple steps given below:

  • Download a EnxCoBrowse.js file. This file helps in the easy integration of Co-Browsing.
  • Extract a JS file named EnxCoBrowse.js from the zip file.
  • Save the JS file within your website's accessible path.
  • Add the code below to each webpage for which you need the Co-Browsing feature.
  • Add the code either
    • within <HEAD></HEAD> tag or
    • towards the end of the page.

Sample Code

<script src="/PATH/EnxCoBrowse.js"></script>
<script src="https://togetherjs.com/togetherjs-min.js"></script>

As a result, your website / webpages are ready for your Co-browsing Session.

Note: You are using an Open Source Library Together.JS, for Co-Browsing. If your Co-Browsing Session needs to cover a specific use-case, you can extend the EnxCoBrowse.js file we created for easy integration. Please, read through all the features' support of TogetherJS to successfully extend.

Qualify URL with Unique Session Name

As you have set up your website for Co-Browsing, you can now co-browse with another person by visiting any of your website's URLs (whichever pages include the .js files mentioned above). To do so, you must append a Query String to the URL to include a Unique Session Name. e.g https://your-domain.com/any-page.html?cobrowse_name=SOME_UNIQUE_ID

Note: A Query String Parameter cobrowse_name is added to the URL. If one or more people visit this URL, they can browse together. Concurrent co-browsing session among different group of people is feasible. If another group of people visits the same page with another value used with cobrowse_name, they browse together. If a group of people visits with a unique cobrowse_name, they browse together. Their session does not interfere with any other group co-browsing concurrently.

Implement with EnableX Video Session

After testing your Co-browsing session with the help of Query String, you can implement it in your Video Session hosted by EnableX.

Solution

  • An initiator must share a Co-Browsing URL (Appended with a Unique Query String) with other user(s) in a Video Session.
  • On the Co-Browsing Initiator Side, a new Browser Window opens with the same URL shared with others.
  • On the receiving end, a new Browser Window opens with the same URL as the Co-Browsing URL is received.
  • Both ends can browse on the newly opened browser window/tab alongside the Video Session.

How to share the Co-Browsing Link with others

You can pass custom message using Custom Signaling. Refer related documentation:

Regarding Custom Signaling Methods and Events, using the preferred SDK method, you must prepare a JSON to pass onto the other end of the session. Listen to the Event to process further.

Example using Web SDK:

var CoBrowseMsg = {
    "broadcast": false,  
    "message": {
		"action": "cobrowse",
		"url": "YOUR_CO_BROWSE_URL"
	}
}


// To initiate co-borwsing with selected user(s)
room.sendUserData(CoBrowseMsg, false, [client-id-1, client-id-2], function(data){
    // Message sent
	// Open New Browse Tab for co-browsing
	window.open("YOUR_CO_BROWSE_URL", "_blank");
});


// Receipient listens to event and opens Window to co-browse
room.addEventListener("user-data-received", function (event) {
     var InMsg = event.message.msg;
     if (InMsg.message.action == 'cobrowse') {
        // Open New Browse Tab for co-browsing
		window.open(InMsg.message.url, "_blank");
     }
});
Whiteboard for Colleboaration | Live Video Calling Feature