Configuring Zoom Cobrowse

The Zoom Cobrowse feature enables Contact Center agents to assist consumers in real-time by sharing and viewing specific web pages without requiring full screen sharing. This feature is particularly useful in industries like financial services and healthcare, where customers often need help filling out complex forms but are hesitant to share their screens due to privacy concerns.

With Zoom Cobrowse, consumers can securely share only the page they need help with, while private information remains masked from view and recordings. Cobrowse offers a safer alternative to screen sharing, ensuring sensitive data remains protected during voice engagements.

This article covers:

Prerequisites for configuring Zoom Cobrowse

How to install Zoom Contact Center SDK

  1. Sign into the Zoom web portal as a Contact Center admin with the privilege to add flows.
  2. In the navigation menu, click Contact Center Management then Campaign Management.
  3. On the right side, next to the Add Campaign button, click Embed Web Tag.
  4. Click Copy Web Tag to copy the code and add it to your site. The script might look like this:
     
    <script
      data-apikey="your_apikey" /* Copy from Zoom */
      data-env="your_env"  /* Copy from Zoom */
      src="https://test.example.com/sample/web-sdk/chat-client.js"> /* Copy from Zoom */
    </script>
  5. Add the Cobrowser tag on the script manually.
    <script
      data-apikey="your_apikey" /* Copy from Zoom */
      data-env="your_env" /* Copy from Zoom */
      src="https://test.example.com/sample/web-sdk/chat-client.js"> /* Copy from Zoom */
      /* Cobrowse Tag */
      data-enable-zcb="true" /* Add it manually */
    </script>

How to enable or disable Zoom Cobrowse

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click Contact Center Management then Preferences.
  3. Under General Settings, scroll down to the Cobrowse section.
  4. Click the Cobrowse toggle to enable or disable it.
  5. (Optional) To prevent all users in your account from changing this setting, click the lock icon , and then click Lock to confirm the setting.
  6. Click Manage Masked Data in Cobrowse to customize the Masking Sensitive Data settings.

How to enable or disable Zoom Cobrowse in each voice queue

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click Contact Center Management then Queues.
  3. Click the display name of the queue you want to edit.
  4. Click the Policy tab, and scroll down to the Cobrowse section.
  5. Click the Cobrowse toggle to enable or disable it.
  6. Click Manage Masked Data in Cobrowse to customize the Masking Sensitive Data settings.

How to install Zoom Cobrowse

To enable cobrowsing on your application or website, you need to configure which pages can be cobrowsed. You can add a JavaScript code to the root of the website for full coverage or to specific subpages like the mortgage submission form. This section will show you how to set up event listeners and link them to your custom UI elements, like a button, to start the cobrowsing session.

Set up the event listener

The Zoom Cobrowse SDK will trigger a custom event called ZoomZccCobrowseSDK:Ready when it’s fully initialized and ready for a Cobrowse session. You should set up an event listener in your application to detect this event. Once detected, you can enable the button that starts the Cobrowse session.

Example

// Listen for the ZoomZccCobrowseSDK:Ready event
window.addEventListener('ZoomZccCobrowseSDK:Ready', function(event) {
    const button = document.getElementById('xxxxx'); // Your custom button ID

    if (button) {
        // Optional: Enable the button if it is disabled
        button.disabled = false; 
        
        // Add a click event to start the Cobrowse session
        button.addEventListener('click', function() {
            window.ZoomZccCobrowseSDK.init();
        });
    }
});

Integrate with a custom button

To integrate the Cobrowse feature with your UI, you need to:

  1. Add a button to your HTML to start the Cobrowse session.
  2. Assign an ID to the button for easy reference in your JavaScript code.
  3. (Optional) Ensure the button is disabled by default, so it only becomes active once the SDK is ready.

Example HTML

<!-- Add this button to your HTML -->
<button id="startCobrowseButton" disabled>Start Cobrowse</button>

Add a click event to the button that triggers the Cobrowse session

Example code

Here’s a complete example of how you can integrate the Zoom Cobrowse feature into your application:

HTML:

<button id="startCobrowseButton" disabled>Start CoBrowse</button>

JavaScript:

// Listen for the ZoomZccCobrowseSDK:Ready event
window.addEventListener('ZoomZccCobrowseSDK:Ready', function(event) {
    const button = document.getElementById('startCobrowseButton'); // Your custom button ID

    if (button) {
        // Optional: Enable the button if it is disabled
        button.disabled = false; 
        
        // Add a click event to start the Cobrowse session
        button.addEventListener('click', function() {
            try {
                window.ZoomZccCobrowseSDK.init();
            } catch (e) {
                console.log("ZoomZccCobrowseSDK is not ready, please try again later")
            }
        });
    }
});

How to mask data in Cobrowse

You can mask sensitive data during setup to protect user privacy. By selecting Manage Masked Data in Cobrowse from the Preferences or Queues settings page, you'll be taken to the Privacy and Retention tab. Here, you can designate which input fields should be masked during a Cobrowse session. Masked data will not be visible to users, and Cobrowse will not transmit any of this information.

How to customize the theme and individual elements of Zoom Cobrowse

Customize the theme

In the default Zoom Cobrowse component, the following CSS variables manage key color properties:


These variables are defined within the .zoomCobrowseCard class. To override these variables directly in your HTML, you can either add a <style> block or link to an external CSS file.

Option 1: Inline style override

Add the following <style> block to your HTML to customize the theme colors:

<style>
  .custom-zoom-cobrowse .zoomCobrowseCard {
    --zcb-primary-color: #ff5733; /* Custom primary color */
    --zcb-error-color: #ffffff;   /* Custom error color */
  }
</style>

Option 2: External CSS file

Alternatively, create an external CSS file to define your custom theme and include it in your HTML.

Custom-theme.css:

.custom-zoom-cobrowse .zoomCobrowseCard {
  --zcb-primary-color: #ff5733; /* Custom primary color */
  --zcb-error-color: #ffffff;   /* Custom error color */
}

Then, link to this CSS file in your HTML:

<link rel="stylesheet" href="path/to/custom-theme.css">

Customize the title

To change the style of the title in the Zoom Cobrowse component, target the .zoomCobrowseCard_title class. You can modify properties such as color, font size, font weight, and more.

<style>
  .custom-zoom-cobrowse .zoomCobrowseCard__title {
    color: #ff5733; /* Custom title color */
    font-size: 24px; /* Custom font size */
    font-weight: bold; /* Custom font weight */
  }
</style>

Customize the content text

The content text is styled using the .zoomCobrowseCard_content class. You can adjust properties such as font size, line height, and text alignment.

Example:

<style>
  .custom-zoom-cobrowse .zoomCobrowseCard__content {
    font-size: 18px; /* Larger content text */
    line-height: 1.5; /* Increase line spacing */
    text-align: center; /* Center-align text */
  }
</style>

Agent and consumer process for Cobrowsing

The following steps explain the agent and consumer process if Cobrowse is enabled.

  1. When a consumer joins a voice engagement, the agent can ask if they'd like to share their page using Cobrowse.
  2. If the consumer agrees, the agent can click the ellipsis icon at the bottom of the desktop app and select Start Cobrowse.
  3. A new window will appear, displaying a pairing code and the time limit for the consumer to join. The agent provides this code to the consumer.
  4. The consumer should then click the Cobrowse button on their website and enter the pairing code provided by the agent.
  5. Once the consumer joins, the agent can view the consumer's page. However, any fields that were masked will remain hidden from the agent's view.
  6. The consumer will see a green border around their shared screen and a notification banner at the top, informing them of the active Cobrowse session, recording status, and the option to stop at any time.
  7. The agent can annotate during the session, with labeled cursors for both the consumer and the agent. When the consumer switches to another browser tab that is not enabled for Cobrowse, the agent will still see the active Cobrowse page. Additionally, the agent is not able to type or submit any information on the consumer's web page.
  8. Either the agent or the consumer can stop the Cobrowse session, and a confirmation modal will prompt them to confirm the end of the session. Agents can start and stop Cobrowse multiple times during a single active voice engagement.