Co-Browse

Co-Browsing is a collaborative browsing feature that lets a moderator and participants navigate the same web page simultaneously during a live video session. Both sides see each other's cursor movements and all interactions — clicks, scrolls, and form entries — are replicated in real time across every participant in the session.

Overview

Co-browsing is built on top of the open-source TogetherJS library, wrapped into a thin integration SDK called EnxCoBrowse.js. Once your web pages include this SDK, any page URL can be turned into a co-browsing session by appending a unique session name as a query string parameter.

Common use cases include:

Guiding a participant through filling out a form or completing a multi-step application in real time
Running interactive two-way presentations where both parties can click and annotate
Providing live support directly on your website without requiring screen share

How Co-Browsing Works

The co-browsing flow works as follows:

The initiator shares a Co-Browse URL — your page URL with ?cobrowse_name=UNIQUE_ID appended — with another participant.
When the other participant opens that URL, both parties enter the same co-browsing session automatically.
All cursor movements, clicks, and navigation are mirrored across both browser windows in real time.
Multiple concurrent groups can co-browse the same page independently — each group uses a different cobrowse_name value and sessions remain fully isolated.

Tip

You can use Custom Signalling within your EnableX video session to transmit the Co-Browse URL to other participants automatically, so they do not need to copy-paste a link.

Set Up Co-Browsing

Step 1 — Download the SDK

Download the EnxCoBrowse.js SDK package. The archive contains the JavaScript file needed for integration.

⬇ Download EnxCoBrowse.js v1

Step 2 — Update Your Website

Include both the EnxCoBrowse.js file and the TogetherJS library on any webpage where co-browsing should be available.

Extract the downloaded archive and locate EnxCoBrowse.js.
Copy the file to an accessible path within your website's root (for example, /assets/js/EnxCoBrowse.js).
Add the following two script tags to every page that needs co-browsing support — either inside <head> or before the closing </body> tag:

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

Note

EnxCoBrowse.js uses the open-source TogetherJS library under the hood. If your co-browsing use case needs functionality beyond what the default integration provides, you can extend EnxCoBrowse.js directly using the full TogetherJS API.

Step 3 — Qualify the URL with a Session Name

Once your pages include the SDK scripts, any page on your site can be turned into a co-browsing session by appending the cobrowse_name query parameter with a unique value:

https://your-domain.com/any-page.html?cobrowse_name=SOME_UNIQUE_ID

Any user who visits the same URL with the same cobrowse_name value automatically joins that co-browsing session. Users visiting with a different cobrowse_name are completely isolated in a separate session — concurrent groups browsing the same page do not interfere with each other.

Integrate with EnableX Video Session

After testing the co-browsing flow on your website, you can tie it into your EnableX video session so the Co-Browse URL is delivered automatically to the right participants.

Integration Flow

The co-browse initiator generates a Co-Browse URL (page URL + unique cobrowse_name).
The initiator sends this URL to selected participants using Custom Signalling within the video session.
On the initiator's side, a new browser window/tab opens to that URL.
On the receiving participants' side, the video session app receives the signalling event, extracts the URL, and opens it in a new window/tab.
Both sides then browse together while the video session continues in the main window.

Custom Signalling Reference

Use the Custom Signalling method in your chosen SDK to pass the Co-Browse URL as a message payload:

Example — Web SDK

The example below shows how to send the Co-Browse URL to specific participants using the Web SDK, and how each recipient listens for the event and opens the page.

// Build the co-browse message payload
var coBrowseMsg = {
  broadcast: false,
  message: {
    action: "cobrowse",
    url: "YOUR_CO_BROWSE_URL"   // e.g. https://your-domain.com/page.html?cobrowse_name=abc123
  }
};

// Initiator: send URL to specific participants by client ID
room.sendUserData(coBrowseMsg, false, [clientId1, clientId2], function(data) {
  // Message delivered — open the co-browse tab locally
  window.open("YOUR_CO_BROWSE_URL", "_blank");
});

// Recipient: listen for the co-browse invitation and open the tab
room.addEventListener("user-data-received", function(event) {
  var inMsg = event.message.msg;

  if (inMsg.message.action === "cobrowse") {
    // Open the co-browse tab on the recipient's side
    window.open(inMsg.message.url, "_blank");
  }
});

Important

The Co-Browse URL you send must belong to a page that already includes the EnxCoBrowse.js and TogetherJS scripts. Sending a URL to a page that has not been set up for co-browsing will not establish a shared session.