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.

npm
CDN

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');

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.

npm
CDN

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);
}
});

Customer#

Step 3: Integrate the Customer SDK#

Agent side#

Customer

Step 3: Integrate the Customer SDK

Agent side