---
title: "Co-browsing"
slug: "co-browsing"
updated: 2026-07-23T10:07:25Z
published: 2026-07-23T10:07:25Z
canonical: "help.8x8.com/co-browsing"
---
> ## Documentation Index
> Fetch the complete documentation index at: https://help.8x8.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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]
> 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](/documentation/docs/co-browsing#mode). 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.
> [!NOTE]
> 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 1: Order an 8x8 Co-browsing license**
1. Based on your company's needs, determine the number of simultaneous remote sessions you want to support on your website. This includes the number of sessions each agent can handle.
2. Identify the domain address that will host the link for **Co-browsing**. For example, AcmeJets.com.
> [!NOTE]
> Note:
>
> If you support **Co-browsing** in multiple domains, you must communicate the list of domains to your 8x8 sales representative.
3. Work with your 8x8 sales representative to fulfill your order.
4. Once the order is processed, your 8x8 representative provides the license ID and a code snippet.
**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]
> 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:
1. Your code snippet is in the following format:
- **With multi-domain support:**
```javascript
```
- **With sub-domain support:**
```javascript
```
- **Without multi-domain or sub-domain support:**
```javascript
```
2. 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.
3. Add the code snippet within the tags on the web page.
4. 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:**
```javascript
```
- **With sub-domain support:**
```java
```
- **Without multi-domain or sub-domain support:**
```javascript
```
**Step 3: Add a user interface link to initiate the **Co-browsing** session**
You can add a simple help link or a help button on your website that allows website visitors to trigger the remote session. The website visitor clicks on this link to generate a unique session code. For example:
`<a href="#" >Help </a>`
**Step 4: Mask a data field in a web form**
This step is optional, and is not required to complete the basic **Co-browsing** setup. You must complete this step only if you need to mask fields in a form. During a **Co-browsing** session, if the customer is filling a web form and entering sensitive information (such as their SSN), it can be hidden from the agent. To secure sensitive information during a **Co-browsing** session, 8x8 **Co-browsing** provides a default mechanism to mask previously configured elements. When customers enter data in the masked field, agents only see asterisks. Agents are not allowed to enter data in this field. 
To mask a field, you must add the “maskContent” CSS class to the element that should be marked by “*”.
> [!NOTE]
> Note:
>
> Password fields are automatically masked. You do not need to add the “maskContent” CSS class to mask them.
For example, the following input element is configured to mask its content. Data entered by customers in the field will be masked with “*” for agents:
`<input type="text" name="sensitiveFieldData" class="anotherClass maskContent" placeholder="Sensitive data">`
Save these changes to the web page. With this, you have enabled your web page with **Co-browsing** capability.
> [!NOTE]
> Note:
>
> Check out our video on [8x8 **Co-browsing**](https://www.youtube.com/watch).
**Enable Co-browsing via Chat**
When you enable **Co-browsing** in an embedded chat window on a website, the **Co-browse** icon shows up on the chat window menu. Agents and customers can request and/or allow **Co-browsing** sessions via chat.
**To enable Co-browsing via chat in 8x8 Configuration Manager:**
1. Log in to **8x8 Configuration Manager**.
2. Go to **Chat Design**.
3. Open the **Window** tab.
4. Open an existing chat window. 
5. Enable the **Co-browsing** check box to display the **Co-browse**  icon in the chat window. This change is reflected in the preview of your chat window.
6. Save your changes.
## 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 **(Undefined variable: 8x8VariablesSet.AgtConsole)**. Let's walk through this process on a travel website from the customer's perspective.
**To start a session from a web page:**
1. While browsing through the website as a customer, initiate a call or chat with a customer support agent.
2. 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]
> Note:
>
> If the buttons in the window are disabled, please contact your 8x8 sales representative.
3. In the pop-up, click **Start Sharing** to generate a session code.
4. Communicate this code to the agent via the call or chat you initiated earlier. 
5. To establish the **Co-browsing** session, the agent must go to **Menu > Co-browsing** in **(Undefined variable: 8x8VariablesSet.AgtConsole)** 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.
6. Now the agent can guide the customer with navigation on the website, or offer hands-on assistance. 
7. 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. 
8. During the session, agents can highlight content on web pages using  on the header bar, and call out information to customers. 
9. 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. 
10. 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.
**Start Co-browsing Sessions via Chat**
Using the **Co-browsing** option in an embedded chat window, either an agent or a customer can initiate a **Co-browsing** session.
**Start a session from chat as an agent**
Once the administrator enables **Co-browsing** via chat, agents can invite customers for **Co-browsing** from a chat session in **(Undefined variable: 8x8VariablesSet.AgtConsole)**.
1. While logged in to **(Undefined variable: 8x8VariablesSet.AgtConsole)**, accept the incoming chat interaction from a customer.
2. Open the chat interaction drop-down menu, and select **Invite for Co-browsing**. The customer sees a prompt to accept the invitation, and selects **Yes, start sharing**. 
3. Once the customer accepts, you see a notification. Click **Join** to join the new **Co-browsing** session. 
4. To end the session, open the chat interaction drop-down menu again, and select **Stop Co-browsing**. 
**Start a session from chat as a customer**
As a customer, you can request a **Co-browsing** session via chat while chatting with an agent.
1. Start a chat session with an agent.
2. In the chat window, click the **Ribbon**  icon to open a menu.
3. From the menu, click the **Co-browse**  icon to invite the agent to a **Co-browsing** session. 
4. To end the session, click the **Co-browse**  icon in the chat window menu again.
> [!NOTE]
> Note:
>
> Check out our video on [**Co-browsing** in **8x8 Contact Center**](https://www.youtube.com/watch).
## 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 the Co-browse Style**
You can customize the Co-browse style by submitting a custom CSS file path that will be loaded in the page and can override any default style. Using CSS, you can customize:
- The pop-up that is shown to the customer. 
- The pop-up that is shown to the agent. 
**To customize Co-browsing using the GET request method:**
1. To start customizing the pop-ups that are shown to the customer and agent, type the following URL into the browser:
https://****/license****/configure/custom-css?customcss=****
The parameters are as follows:
This request responds with the following data when it is successfully executed: {"data":"OK"}
- `<Co-browse-server-domain>` is the domain for the Co-browse server.
- `<Co-browse-license-id>` is the Co-browse license ID.
- `<path-to-custom-css>` is the path to the CSS file that will be loaded.
2. To customize the CSS file for the pop-up with items like background color, apply the following styles as needed, and ensure that the styles to apply start with `body.popup`.
- `body.popup .window {border: solid 3px #134C75;}`
- `body.popup .window-header {background-color: #134C75;}`
3. To customize items specific to the agent pop-up, apply the following styles as needed, and ensure that the styles to apply start with `body.replica`.
- `body.replica,body.replica .status-ready {background-color: #EAEAEA;}`
- `body.replica .status-primarydisconnected {background-color: #f0ad4e;}`
- `body.replica .statusdisconnected {background-color: #d9534f;}`
- `body.replica .close {border: 1px solid black;color: black;}`
> [!NOTE]
> Note:
>
> The CSS file should be served by HTTPS, and should be accessible externally.
**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.
```javascript
```
> [!NOTE]
> 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.