Get started

In a cobrowse session, there are two roles:

  • Customer – Integrates the SDK.
  • Agent – Uses an embedded iframe to interact with the customer.

You can configure the Cobrowse SDK to allow either the customer or the agent to initiate a session.

For a basic setup, follow these steps to enable a customer-initiated session.

Step 1: Get SDK credentials

  1. Add SDK Universal Credit to your Zoom Workplace account. See Build platform - create or update account for details.
  2. Access your SDK account web portal (In your Zoom Workplace account, go to Advanced > Zoom CPaaS > Manage).
  3. Click Build App, then locate your SDK Key and SDK Secret in the SDK credentials section.

Step 2: Generate JWT

Both customers and agents require JSON Web Tokens (JWTs) for authentication.

Sample JWT Header

Use the same header for both.

{
  "alg": "HS256",
  "typ": "JWT"
}

Switch between the tabs to see examples of a customer JWT payload and an agent JWT payload.

Customer JWT payload

{
  "user_id": "user1_customer",
  "app_key": "YOUR_SDK_KEY",
  "role_type": 1,
  "user_name": "customer",
  "exp": 1723103759,
  "iat": 1723102859
}

Agent JWT payload

{
  "user_id": "user2_agent",
  "app_key": "YOUR_SDK_KEY",
  "role_type": 2,
  "user_name": "agent",
  "exp": 1723103759,
  "iat": 1723102859
}

Generate tokens using the Cobrowse SDK Key and Secret. See Authorize for details.

Sample signature

HMACSHA256(
    base64UrlEncode(header) + "." + base64UrlEncode(payload),
    ZOOM_COBROWSE_SDK_SECRET,
);

Step 3: Integrate the Customer SDK

Install the Cobrowse SDK using the CDN.

  1. Include the SDK snippet to load the Cobrowse SDK:

    (function (r, a, b, f, c, d) {
    r[f] = r[f] || {
        init: function () {
            r.ZoomCobrowseSDKInitArgs = arguments;
        },
    };
    var fragment = a.createDocumentFragment();
    function loadJs(url) {
        c = a.createElement(b);
        d = a.getElementsByTagName(b)[0];
        c.async = false;
        c.src = url;
        fragment.appendChild(c);
    }
    loadJs(
        `https://us01-zcb.zoom.us/static/resource/sdk/${ZOOM_SDK_KEY}/js/{SDK_VERSION}`,
    );
    d.parentNode.insertBefore(fragment, d);
})(window, document, "script", "ZoomCobrowseSDK");

    SDK VERSION

    Set the SDK VERSION using the following loadJs syntax. The version follows semantic versioning format: major.minor.patch.

    • Fixed version -

    https://us01-zcb.zoom.us/static/resource/sdk/${ZOOM_SDK_KEY}/js/2.5.0

    • Fixed high version, latest low version -

    https://us01-zcb.zoom.us/static/resource/sdk/${ZOOM_SDK_KEY}/js/2.5.x - this means use the latest version >=2.5.0 and <2.6.0.

  2. Place the customer-side snippet on the customer webpage at the top of the <head> tag for early SDK initialization. Replace YOUR_SDK_KEY_HERE and YOUR_CUSTOMER_JWT_HERE with the appropriate values:

    const ZOOM_SDK_KEY = "YOUR_SDK_KEY_HERE";
const COBROWSE_CUSTOMER_TOKEN = "YOUR_CUSTOMER_JWT_HERE";

  3. Initialize the Cobrowse SDK and start a session.

    ZoomCobrowseSDK.init(settings, function ({ success, session, error }) {
    if (success) {
        session.start({ sdkToken: COBROWSE_CUSTOMER_TOKEN });
    } else {
        console.log(error);
    }
});
const settings = {
    allowCustomerAnnotation: true,
    piiMask: { maskType: "all_input" },
};

  4. Add a button to allow the customer to start a session.

PIN code access - Bring Your Own PIN (BYOP)

The Cobrowse SDK supports connecting the agent and the customer to a cobrowse session using a PIN code. In this simple example, the customer clicks a button to start the session and Zoom opens a modal dialog with a PIN code for the customer to share with a support agent. The support agent enters the PIN code into their iframe to start the session. Zoom automatically generates the PIN code, but you can create custom codes if you like. See Bring Your Own PIN (BYOP) to learn how to add a custom PIN code to start cobrowsing sessions.

Step 4: Use Zoom-hosted agent portal

Agents can connect to a cobrowse session by embedding an iframe. Replace COBROWSE_AGENT_TOKEN with the agent's JWT.

To enable your agents to connect to a Cobrowse SDK session, create an iframe or WebView that points to our agent endpoint. See the following code for an example. Replace the COBROWSE_AGENT_TOKEN with your agent JWT. Note the src value to the Zoom Cobrowse SDK service.

<iframe
    width="1024"
    height="768"
    src="https://us01-zcb.zoom.us/sdkapi/zcb/frame-templates/desk?access_token=COBROWSE_AGENT_TOKEN"
    allow="autoplay *; camera *; microphone *; display-capture *; geolocation *;"
>
</iframe>

Step 5: Test the Cobrowse SDK

  1. Open separate browsers — one for the customer and one for the agent.
  2. On the customer page, click the button to start a session. The browser displays a PIN code.
  3. On the agent page, enter the PIN code in the iframe.
  4. The agent will now be able to view the customer's browser.
  5. Test session functionalities, including annotation and data masking.
  6. End the session from either side to terminate the connection.

Step 6: Add features

Add features, such as:

By following these steps, you can successfully integrate and test the Zoom Cobrowse SDK for seamless collaborative browsing experiences.