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:
<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>
<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>
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.
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.
// 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();
});
}
});
To integrate the Cobrowse feature with your UI, you need to:
<!-- Add this button to your HTML -->
<button id="startCobrowseButton" disabled>Start Cobrowse</button>
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")
}
});
}
});
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.
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.
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>
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">
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>
The content text is styled using the .zoomCobrowseCard_content class. You can adjust properties such as font size, line height, and text alignment.
<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>
The following steps explain the agent and consumer process if Cobrowse is enabled.