Bring Your Own PIN (BYOP)

Bring Your Own PIN (BYOP) enables you to create custom PIN codes for cobrowse sessions. To enable, add the enable_byop key with a value of 1 in the JWT payload when you start the session. Custom PINs can include only numbers, letters, or a combination of both. Letters can be in any case, but will be converted to uppercase. The number of characters is limited to no more than 10.

You must use BYOP if you want to install via npm.

Customer

Follow steps 1 and 2 in the get started guide, then the following.

Step 3: Integrate the Customer SDK

Install the Cobrowse SDK using npm or include it using the CDN. Click a tab to see more.

To get started, install the Cobrowse SDK for web via npm:
```
npm install @zoom/cobrowsesdk --save
```
After you've installed from npm, import ZoomCobrowse in the component file where you want to use the Cobrowse SDK:
```
import { ZoomCobrowseSDK } from "@zoom/cobrowsesdk/customer";
```
Add the following script to the customer's webpage, replacing YOUR_CUSTOMER_JWT_HERE with the appropriate values:
```
const COBROWSE_CUSTOMER_TOKEN = "YOUR_CUSTOMER_JWT_HERE";
```

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.

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.

Add the following script to the customer's webpage, replacing 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";
```

Next step: Initialize the Cobrowse SDK and start a session. Input the custom PIN when calling session.start.

ZoomCobrowseSDK.init(settings, function ({ success, session, error }) {
    if (success) {
        session.start({
            customPinCode: "{PIN_CODE}", // Bring your own PIN
            sdkToken: "{SDK_TOKEN}",
        });
    } else {
        console.log(error);
    }
});

Agent side

Install the agent via npm or include it using the CDN. Click a tab to see more.

To install the Cobrowse SDK via npm, from the terminal in your project directory, run:

npm install @zoom/cobrowsesdk --save

After you've installed from npm, import ZoomCobrowseAgentSDK in the component file where you want to use the Cobrowse SDK:

import { ZoomCobrowseAgentSDK } from "@zoom/cobrowsesdk/agent";

Initialize ZoomCobrowseAgentSDK in the page to load the agent page, and provide a DOM mount point in the settings.

Sample code

ZoomCobrowseAgentSDK.init(settings, function ({ success, session, error }) {
    if (success) {
        const sessionInfo = session.getSessionInfo();
        if (sessionInfo.sessionStatus === "session_recoverable") {
            session.join();
        } else {
            session.join({
                sdkToken: "{SDK_TOKEN}",
                pinCode: "{PIN_CODE}",
            });
        }
    } else {
        console.log(error);
    }
});

The snippet loads the necessary ZoomCobrowseAgentSDK JS libraries.

(function (r, a, b, f, c, d) {
    r[f] = r[f] || {
        init: function () {
            r.ZoomCobrowseAgentSDKInitArgs = 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/${sdkKey}/agent/js/{SDK_VERSION}",
    );
    d.parentNode.insertBefore(fragment, d);
})(window, document, "script", "ZoomCobrowseAgentSDK");

Sample code

ZoomCobrowseAgentSDK.init(settings, function ({ success, session, error }) {
    if (success) {
        session.createAgentViewerEndpoint(
            {
                pinCode: "{PIN_CODE}",
                sdkToken: "{SDK_TOKEN}",
            },
            function ({ success, agentViewerUrl, error }) {
                if (success) {
                    console.log(agentViewerUrl);
                } else {
                    console.log(error);
                }
            },
        );
    } else {
        console.log(error);
    }
});

Integration Tips:

Embed the agent snippet code at the top of the <body /> tag to initialize the SDK as early as possible.

Since message communication relies on postMessage, be sure to establish the correct window relationships:

For pop-ups, use window.open() or set rel="opener" on the tag to allow the main window to reference the pop-up via window.opener.

For iframes, be sure that both the main window and the iframe can reference each other using iframe.contentWindow and window.parent.