Customize 8x8 Co-browsing

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.

  

• 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 > 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.

  

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://<Co-browse-server-domain>/license<Co-browse-license-id>/configure/custom-css?customcss=<path-to-custom-css>

   The parameters are as follows:

   • <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.

   This request responds with the following data when it is successfully executed: {"data":"OK"}

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:

The CSS file should be served by HTTPS, and should be accessible externally.

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.

<script>

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>

<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-browsing code snippet and that you want to customize their strings.