Co-browsing

8x8 Co-browsing allows customer support agents to assist customers remotely via a shared browser. Either walk a customer through a task via phone or chat as you observe their screen or, if required, take control of their cursor and demonstrate how to perform the task as the customer observes. With Co-browsing, you can empower a website or any browser-based application, and offer live, hands-on assistance to customers in a way that most effectively answers their questions.

A customer in need of assistance must initiate the remote session, generate a unique session code, and communicate it to an agent via phone or chat. The agent then uses the code to establish a remote session. The Co-browsing session takes place concurrently with a call or a chat for communicating the session code and assisting the customer.

Features

Visual, real-time web page assistance: Monitor and assist customers in real time through browser instance shared by the customer.
Mouse tracking: As a customer, easily follow along by viewing the agent’s mouse location and movement.
Platform details: Access information about the customer’s platform.
Multi-domain support: The Co-browsing session continues to work if the user navigates to sites under different domains, assuming that Co-browsing is also available in those new domains. Sub-domains are included in multi-domain support.
Sub-domain support: The Co-browsing session continues to work if the user navigates to a site that is hosted in a sub-domain, assuming that Co-browsing is also available in that new sub-domain.
Form co-filling: Co-fill forms on websites.
Customer privacy and security: During a Co-browsing session, if the customer is filling a form and entering sensitive information such as SSN in a form, it can be encrypted and hidden from the agent.
Highlighting: Agents can highlight content on web pages and call out information to customers during Co-browsing. Highlight key elements on the page with drawing tools.
Auto-fit: Agents can automatically scale the browser view to fit customer's view settings. If the customer's screen is bigger than the agent during a Co-browsing session, agents will have to scroll constantly. With the ability to auto-fit, agents can enable “Auto-fit” to automatically scale the view to fit agent's view settings or manually increment/decrement the zoom level to the desired value.
Privilege control: You can control the extent of remote help agents can offer using Co-browsing mode. It varies from a basic view only mode to complete control of the browser instance. Take control of the customer’s screen, with their permission.

Limitations

Co-browsing only supports an in-browser zoom level of 100% (default value) from the customer or agent. Any other value from the customer or agent may cause unexpected behavior, such as scrolling issues.
Co-browsing only works on secure (HTTPS) web pages.
Adobe Flash components, including videos, and Java applets are not supported.
Anything that is external to the current page is not supported. This includes the file browser window that is open when selecting a file to be uploaded.
WYSIWYG editors (such as AceEditor, CodeMirrorEditor, CKEditor, tinymceEditor) are not supported.
Native tooltips are not visible between the two parties.
Web pages with iframes from different domains are not supported, though web URLs from multiple domains are supported.
If the web page opens a new browser window and the content has Co-browsing, this new window replaces the content on the agent side.
A web page must have the correct HTML syntax/markup for Co-browsing to work properly; for example, there can be no duplicated HTML IDs on the same page.

Supported Browsers

Co-browsing is supported on the following browsers:

Google Chrome (latest version)
Firefox (latest version)
Safari (Mac only: version 7.0 and above)
Internet Explorer 11
Microsoft Edge

Note: Co-browsing is not supported on IE 11 in compatibility mode.

Use Case

The following example demonstrates how a given website can be empowered with 8x8 Co-browsing.

Let us review an example of a travel company website visited by customers wanting to book their dream vacations. The website offers many travel packages and options to choose from. It requires customers to identify themselves by filling in a form. The travel site wants to offer remote, hands-on assistance to the website visitors. To enable live, hands-on assistance, the travel company should use 8x8. The Co-browsing feature allows website visitors to initiate a remote session with the customer support agent and get hands-on assistance remotely.

If a customer navigating this website seeks hands-on assistance, they can initiate a remote session with a customer support agent in a few clicks. Click on a help link on the web page to generate a code. Communicate this code to the representative. The representative uses this code to establish a two-way hands-on Co-browsing session.

Use Co-browsing Modes

By selecting one of three Co-browsing modes, you can control the extent to which agents can assist customers remotely. Co-browsing can be enabled in one of the following modes via code snippet. If you do not provide a mode in the code snippet, full-control is the default mode:

full-control (default): This is the default mode. In this mode, agents have full control of the customer's browser session, including synchronized navigation and the ability to highlight and co-fill a form on the web page. The agent's cursor movements and mouse clicks are in sync with the customer, and vice versa.
partial-control: In this mode, agents can highlight and control the browser navigation, but do not have the privileges to fill any forms on the Co-browsed page. All HTML form elements are disabled on the agent side, alerting agents with the message "Forms cannot be edited on the agent side".
no-control: This is a view-only mode. Agents can observe the customer’s navigation, highlight, and offer guidance.

Notes:
-The highlighter works in all modes.
-In the full-control and partial-control modes, we cannot prevent agents from controlling form elements that are not native to the browser, such HTML drop-down.

Enable Co-browsing

Co-browsing can be enabled to work as a link in the user interface of a website, or as an embedded chat window.

Enable Co-browsing on a Website

To enable 8x8 Co-browsing on your website, you must first purchase a Co-browsing license from 8x8, then configure your website. Enabling 8x8 Co-browsing on your website involves the following tasks:

Step 2: Embed the code snippet in your website

You must embed the code snippet received from your 8x8 sales representative in your website to allow customers to initiate a remote session. The code snippet must be added to all pages where you want to enable Co-browsing. Co-browsing sessions does not work on pages that do not have the snippet.

Note: Depending on whether you need multi-domain, sub-domain, or basic support, the code snippet you use is different.

If you know that the user will likely go to a site that is hosted in multiple domains or sub-domains, you can use multi-domain or sub-domain support to enable the Co-browsing session to continue working, assuming that Co-browsing is also available in those new domains or sub-domains.

Do I need multi-domain support? This feature is new to version 2.4.0 of Co-browsing and requires and update to the Co-browsing code snippet to start working with multiple domains. If multi-domain support is not required, the sub-domain and basic code snippets still work as before, and there is no need to update to a multi-domain snippet.
Sub-domains are included in multi-domain support.
Do I need sub-domain support? This feature is new to version 1.9.0 of Co-browsing, and requires an update to the Co-browsing code snippet to start working with sub-domains. If sub-domain support is not required, the basic code snippet still works as before, and there is no need to update to a sub-domain snippet.
How did Co-browsing work prior to this feature? Prior to version 1.9.0 of Co-browsing, if the user started a Co-browsing session in a domain (such as www.somedomain.com) and navigated to another sub-domain (such as help.somedomain.com), the Co-browsing session would be disconnected.
How does Co-browsing work now with this feature?
- With multi-domain support: With the proper code snippet, if the user starts a Co-browsing session in www.somedomain.com and navigates to www.anotherdomain.com or help.somedomain.com, the session continues to work as though the user is still navigating in the same domain.
- With sub-domain support: With the proper code snippet, if the user starts a Co-browsing session in www.somedomain.com and navigates to help.somedomain.com, the session continues to work as though the user is still navigating in the same domain.

To embed the code snippet in your website:

Your code snippet is in the following format:
- With multi-domain support:
  <script>
  (function(e,i,g,h,t,c,o,b,r,w){r=i.createElement(g);r.setAttribute(h,c);
  o&&Object.keys(o).map(function(k){r.setAttribute(k,o[k])});
  r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';
  w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);
  })(window,document,'script','data-8x8-co-browsing','<Co-browse-server-domain>','<Co-browse-license-id>',{
  'data-8x8-co-browsing-multi-domain': true,
  'data-8x8-co-browsing-mode':'<Co-browse-mode>'
  });
  </script>
- With sub-domain support:
  <script>
  (function(e,i,g,h,t,c,o,b,r,w){r=i.createElement(g);r.setAttribute(h,c);
  o&&Object.keys(o).map(function(k){r.setAttribute(k,o[k])});
  r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';
  w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);
  })(window,document,'script','data-8x8-co-browsing','<Co-browse-server-domain>','<Co-browse-license-id>',{
  'data-domain-name':'<Customer-domain>',
  'data-8x8-co-browsing-mode':'<Co-browse-mode>'
  });
  </script>
- Without multi-domain or sub-domain support:
  <script>
  (function(e,i,g,h,t,c,o,b,r,w){r=i.createElement(g);r.setAttribute(h,c);o&&r.setAttribute(o,b);
  r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';
  w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);
  })(window,document,'script','data-8x8-co-browsing','<Co-browse-server-domain>','<Co-browse-license-id>','data-8x8-co-browsing-mode','<Co-browse-mode>');
  </script>
Edit the parameters with the values provided by 8x8:
- <Co-browse-server-domain>: Refers to the domain for the Co-browsing server. Replace it with cb.8x8.com
- <Co-browse-license-id>: Refers to your Co-browsing license ID; for example, 556c8b7beec7f02018b31700.
- <Customer-domain>: (Sub-domain only) Refers to the customer domain; populate the value so that Co-browsing can work in the required domain.
- <Co-browse-mode>: (Optional) Refers to the Co-browsing mode. Select one of the three types: full-control, partial-control, or no-control.
Add the code snippet within the <body> tags on the web page.
Your completed code snippet should look like this. Please note that the value for <Co-browse-license-id> is a variable.
- With multi-domain support:
  <script>
  (function(e,i,g,h,t,c,o,b,r,w){r=i.createElement(g);r.setAttribute(h,c);
  o&&Object.keys(o).map(function(k){r.setAttribute(k,o[k])});
  r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';
  w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);
  })(window,document,'script','data-8x8-co-browsing','cb.8x8.com','556c8b7beec7f02018b31700',{
  'data-8x8-co-browsing-multi-domain': true,
  'data-8x8-co-browsing-mode':'full-control'
  });
  </script>
- With sub-domain support:
  <body>
  <script>
  (function(e,i,g,h,t,c,o,b,r,w){r=i.createElement(g);r.setAttribute(h,c);
  o&&Object.keys(o).map(function(k){r.setAttribute(k,o[k])});
  r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';
  w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);
  })(window,document,'script','data-8x8-co-browsing','cb.8x8.com','556c8b7beec7f02018b31700',{
  'data-domain-name':'specialtycookies.com',
  'data-8x8-co-browsing-mode':'full-control'
  });
  </script>
  </body>
- Without multi-domain or sub-domain support:
  <body>
  <script>
  (function(e,i,g,h,t,c,o,b,r,w){r=i.createElement(g);r.setAttribute(h,c);o&&r.setAttribute(o,b);
  r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';
  w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);
  })(window,document,'script','data-8x8-co-browsing','cb.8x8.com','556c8b7beec7f02018b31700','data-8x8-co-browsing-mode','full-control');
  </script>
  </body>

Save these changes to the web page. With this, you have enabled your web page with Co-browsing capability.

Note: Check out our video on 8x8 Co-browsing.

Establish Co-browsing Sessions

Any customer in need of assistance can launch a Co-browsing session using a button or an embedded chat window on a website. If you are an agent, you can also initiate a Co-browsing session via chat.

Start Co-browsing Sessions from a Website

On a website, Co-browsing is initiated by customers seeking assistance. In this process, agents play a secondary role in establishing a remote session from Agent Console. Let's walk through this process on a travel website from the customer's perspective.

To start a session from a web page:

While browsing through the website as a customer, initiate a call or chat with a customer support agent.
On the web page, click the link used on the site to initiate Co-browsing (usually a Help link). A pop-up window appears, prompting you to start a remote session by generating a code.

Note: If the buttons in the window are disabled, please contact your 8x8 sales representative.
In the pop-up, click Start Sharing to generate a session code.
Communicate this code to the agent via the call or chat you initiated earlier.
To establish the Co-browsing session, the agent must go to Menu > Co-browsing in Agent Console to open the Co-browsing window, and enter the code given by the customer.

The co-browsing window is automatically minimized as soon as the co-browsing session is established. The minimized window, however remains on the customer's screen. The customer can drag and relocate the co-browsing window. Click on the top-right corner to maximize or minimize the window.
Now the agent can guide the customer with navigation on the website, or offer hands-on assistance.
Agent can enable Auto-fit to automatically scale their view to fit the customer's browser view settings. The Co-browsing mode is also displayed to the agent.
During the session, agents can highlight content on web pages using on the header bar, and call out information to customers.
If content masking has been enabled in Co-browsing by the administrator, you can co-fill any required form on the website while keeping sensitive information secure.
To stop the Co-browsing session as the customer, click the help link you used to start the Co-browsing session again, and click Stop Sharing in the pop-up window that appears. Once the session has stopped, the pop-up shows the session status as disconnected.

On the agent's side, the agents see the page loading each time they open another page on the customer's website. Agents can close the session by clicking the Close Session button on the top-right corner of the header bar.

Customize Co-browsing

Set up the custom CSS by customizing the visual layout and style of the Co-browsing pop-up windows, or by customizing the customer-side Co-browsing strings.

Customize Co-browse Strings

You have the ability to customize the customer-side Co-browsing strings. The strings are contained in the pop-up and displayed to start a new session. The customizable strings are as follows:

popup-title: Co-browsing
popup-close: X
popup-start-information: Click Start to initialize the Co-browsing session and provide the Session ID to your agent.
popup-sync-information: You may have open another page that is currently being synchronized. Click Synchronize to synchronize this page instead.
popup-session-id-label: Session ID:
popup-start-button: Start sharing
popup-stop-button: Stop sharing
popup-sync-button: Synchronize
popup-status-label: Status:
status-connecting: Connecting...
status-ready: Sharing your screen
status-connected: Connected
status-replica-disconnected: Waiting for agent to connect...
status-disconnected: Disconnected
status-sync-required: Synchronization required
status-invalid-license: Invalid license
status-limited-license: All agents are busy, please try again later
status-invalid-domain-for-license: Invalid domain for license
status-disabled-license: Disabled license
popup-replica-disconnected-information: Provide the Session ID to your agent. Click on Stop to end at any time.
popup-connection-error-information: Click Stop to end this session or wait until connection is restored.
popup-end-session-button: End session
popup-close-button: Close
popup-powered-by-8x8: Powered by 8x8 Inc.
status-not-started: Co-browsing session not started.
status-replica-disconnected-short: Connecting...
status-ready-short: Sharing
status-ended: Agent ended co-browsing session.
status-ended-short: Session ended.
status-connection-error: Bad connection
status-connection-error-short: Bad connection

In order to customize any or all strings, it is required to add the following code snippet just above the Co-browse code snippet. Note that you can only redefine the strings you want to change, and there is no need to add strings that will remain the same.

window.CoBrowsingCustomStrings = {

"popup-title": "Co-browsing",

"popup-close": "X",

"popup-start-information": "Click Start to initialize the Co-browsing session and pass the session ID below to the Agent.",

"popup-sync-information": "You may have open another page that is currently being synchronized. Click Synchronize to synchronize this page instead.",

"popup-session-id-label": "Session ID: ",

"popup-start-button": "Start",

"popup-stop-button": "Stop",

"popup-sync-button": "Synchronize",

"popup-status-label": "Status: ",

"status-connecting": "Connecting...",

"status-ready": "Sharing your screen",

"status-connected": "Connected",

"status-replica-disconnected": "Waiting for agent to connect...",

"status-disconnected": "Disconnected",

"status-sync-required": "Synchronization required",

"status-invalid-license": "Invalid license",

"status-limited-license": "All agents are busy, please try again later",

"status-invalid-domain-for-license": "Invalid domain for license",

"status-disabled-license": "Disabled license"

};

</script>

(function(e,i,g,h,t,c,o,b,r,w)

{r=i.createElement(g);r.setAttribute(h,c);o&&r.setAttribute(o,b);r.async=1;r.src='https://'+t+'/license'+c+'/dist/primary-bundle.js';w=i.getElementsByTagName(g)[0];w.parentNode.insertBefore(r,w);})(window,document,'script','data-8x8-co-browsing','<Co-browseserver-domain>','<Co-browse-license-id>','data-8x8-cobrowsing-mode','<Co-browse-mode>');

</script>

Note: You must add this code snippet to all your pages where you have the Co-browse code snippet and that you want to customize their strings.