# Add cobrowsing

<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

> These Contact Center SDK docs are for developers who may not be Contact Center users or admins. To learn to configure campaigns, use flows, and other admin tasks, go to [Zoom's user support docs](https://support.zoom.com/hc/en/search?id=search#q=Contact%20Center&t=All&sort=relevancy).

The cobrowse feature lets your web application start a shared browsing session. Cobrowsing works on the voice and video channels.

Customizing the theme and additional configuration options are covered in the [front-end product documentation](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0077376).

Before users can use cobrowsing, a Contact Center admin must [enable Zoom Cobrowse](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0077376#h_4702343956621729117686117).

## Add cobrowsing to the voice channel

To add cobrowsing to the voice channel, first set up the event listener to enable the button. Then, add the button to your web app.

### Set up the event listener in the voice channel

Once it's able to start a cobrowsing session, the Contact Center for web receives an event called `zoomCobrowse:Ready`. Set up an event listener in your web application to listen for this event. Once your web app detects this event, enable the button that lets users start the cobrowsing session.

Paste this JavaScript into your web app's UI, making sure to add an actual button ID to the code in place of `xxxxx`.

```javascript
// Listen for the zoomCobrowse:Ready event
window.addEventListener("zoomCobrowse: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 cobrowsing session
        try {
            window.ZoomZccCobrowseSDK.init();
        } catch (e) {
            console.log(
                "ZoomZccCobrowseSDK is not ready, please try again later",
            );
        }
    }
});
```

If you wish, you can disable the button by default so that it only becomes active once the cobrowse feature is ready. To disable the button by default, set `button.disabled` to `true`.

### Add the cobrowse button to the voice channel

To add a cobrowse button to your web app, copy and paste this HTML code. For the button's `id` attribute, use the same name that you used in the JavaScript, after `document.getElementById`.

```html
<!-- Add this button to your HTML -->
```

See the [front-end product documentation](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0077376) to learn more about using and customizing this feature.

## Cobrowse functionality in the chat channel

Users can join cobrowsing from the chat channel without any code development. When the admin enables the Zoom cobrowse switch, agents can send a cobrowse request in chats. If the cobrowse switch is not enabled, agents will see an error message when they try to send a cobrowse request.