Co-Browsing

Co-browsing is ‘collaborating browsing’ and this allows both the moderator and the participant to simultaneously navigate the same web page.

Table of Contents

Overview

Co-browsing is collaborative and interactive in the way that it allows participants joining in a video call to actively browse together. And on top of this, co-browsing is simultaneous and synchronous. That way both participants in a co-browsing session can see what the other person is doing on the screen.

Examples of how to use co-browsing to make remote contact with your customers more interactive:

  • Fill out forms and applications together, guiding the participant through the process in real-time.
  • Showcase two-way interactive presentations, more engaging for your prospects.

How does co-browsing work?

Co-Browsing with others is related to a Website or Webpages. So, your Website or Webpages which are to be co-browsed, must be made ready 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. existing URL with some Query String Parameters.

Once other person joins, both can see each other Cursor Position on the page and all actions at one end get replicated at the other end. If one clicks on a link, the other end already reaches the same page.

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

Set-up Co-Browsing

Let’s know how to use Co-Browsing with your Website

Update your Website/Webpage to Co-Browse

Let’s get your Website ready for Co-Browsing. Follow the simple steps given below:

  • You need a JS file named EnxCoBrowse.js. Download it. This is a file that helps in easy integration of Co-Browsing.
  • You downloaded a zip file. Extract it and save the JS file within your Website’s accessible path.
  • Add the Code given below in each webpage you want for Co-Browsing either within <HEAD></HEAD> tag or towards the end of page. 
<script src="/PATH/EnxCoBrowse.js"></script>
<script src="https://togetherjs.com/togetherjs-min.js"></script>

You are done. Your Website / Web Pages are ready for Co-browsing Session.

Note: As you see here that you are using an Open Source Library Together.JS for Co-Browsing, in case your Co-Browsing Session needs to cover specific use-case, you are free to extend EnxCoBrowse.js file we created for easy integration. You need to read through all features, support of TogetherJS to help yourself to 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 URL (Whichever page includes the .js files explained above). To do so, you need to 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 that a Query String Parameter named “cobrowse_name” is added to the URL. If one or more people visit this URL, they all can browse together.

Similarly, if another group of people visit the same page with another value used with “cobrowse_name” , they will browse together.

Therefore, as long as a group of people visit with a unique “cobrowse_name”, they will browse together. Their session will not interfere with any other group co-browsing concurrently. So, concurrent co-browsing session among different group of people is feasible.

Implement with EnableX Video Session

As you tested your Co-browsing session works with a help of Query String, its time to know how to implement it in Video Session hosted by EnableX.

Solution#

  • A Person needs to share a Co-Browsing URL (Appended with Unique Query String) to other user(s) in a Video Session.
  • On the Co-Browsing Initiator Side, a new Browser Window to be opened with the same URL shared with others.
  • On the receiving End, as Co-Browsing URL is received, a new Browser Window to be opened with the URL.
  • Now, both end can browse together on the newly opened browser window/tab as they talk along being within the Video Session.

How to share the Co-Browsing Link with others?

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

With reference to Custom Signaling Methods and Events, you need to prepare a JSON to pass on to other end in session using SDK method and listen to 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");
     }
});