# Bring Your Own PIN (BYOP)

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

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](/docs/cobrowse-sdk/authorize/#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](/docs/cobrowse-sdk/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.

1. To get started, install the Cobrowse SDK for web via npm:

    ```bash
    npm install @zoom/cobrowsesdk --save
    ```

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

    ```javascript
    import { ZoomCobrowseSDK } from "@zoom/cobrowsesdk/customer";
    ```

3. Add the following script to the customer's webpage, replacing `YOUR_CUSTOMER_JWT_HERE` with the appropriate values:

    ```javascript
    const COBROWSE_CUSTOMER_TOKEN = "YOUR_CUSTOMER_JWT_HERE";
    ```

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

    ```javascript
    (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`.

5. Add the following script to the customer's webpage, replacing `YOUR_SDK_KEY_HERE` and `YOUR_CUSTOMER_JWT_HERE` with the appropriate values:

    ```javascript
    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`.

```javascript
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:

```bash
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:

```javascript
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**

```javascript
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.

```javascript
(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**

```javascript
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`](https://developer.mozilla.org/en-US/docs/Web/API/Window/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`.