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.

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