--- title: "Customize 8x8 Co-browsing" slug: "customize-8x8-co-browsing" updated: 2026-07-23T10:06:53Z published: 2026-07-23T10:06:53Z canonical: "help.8x8.com/customize-8x8-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. # Customize 8x8 Co-browsing Administrators can set up the custom CSS by customizing the visual layout and style of the 8x8 **Co-browsing** pop-up windows, or by customizing the customer-side **Co-browsing** strings. **Customize the Co-browsing Style** You can customize the **Co-browsing** 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 when they click the **Co-browsing** option from the web page. ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/co-browsing-start-sharing.png?sv=2026-02-06&spr=https&st=2026-11-03T20%3A23%3A59Z&se=2026-11-03T21%3A23%3A59Z&sr=c&sp=r&sig=nxzWeO0TDV8IW%2BRrOawS8rL4T7chv7hwzy5yunWEtbM%3D) - If on a chat, the agent receive an automatic invite to join the **Co-browsing** session. If on a call, the agent must go to **Show menu** ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/icon-show-menu_19x18.png?sv=2026-02-06&spr=https&st=2026-11-03T20%3A23%3A59Z&se=2026-11-03T21%3A23%3A59Z&sr=c&sp=r&sig=nxzWeO0TDV8IW%2BRrOawS8rL4T7chv7hwzy5yunWEtbM%3D) > **Co-browsing**. In the pop-up window that displays, the agent must add the session ID received from the customer to be able to start the **Co-browsing** session. ![](https://cdn.us.document360.io/e3a59e39-abd3-4423-964c-0a4008dc5673/Images/Documentation/co-browsing-stop-session.png?sv=2026-02-06&spr=https&st=2026-11-03T20%3A23%3A59Z&se=2026-11-03T21%3A23%3A59Z&sr=c&sp=r&sig=nxzWeO0TDV8IW%2BRrOawS8rL4T7chv7hwzy5yunWEtbM%3D) **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-browsing server. - `<Co-browse-license-id>` is the Co-browsing 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-browsing 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-browsing** 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. ```plaintext ``` ```plaintext ``` > [!NOTE] > Note: > > You must add this code snippet to all your pages where you have the **Co-browsing** code snippet and that you want to customize their strings.