# Get started In a cobrowse session, there are [two roles](/docs/cobrowse-sdk/#useful-terminology): - 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](/docs/build/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. ```javascript { "alg": "HS256", "typ": "JWT" } ``` Switch between the tabs to see examples of a customer JWT payload and an agent JWT payload. ### Customer JWT payload ```javascript { "user_id": "user1_customer", "app_key": "YOUR_SDK_KEY", "role_type": 1, "user_name": "customer", "exp": 1723103759, "iat": 1723102859 } ``` ### Agent JWT payload ```javascript { "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](/docs/cobrowse-sdk/authorize/) for details. ### Sample signature ```javascript 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: ```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. The version follows [semantic versioning](https://semver.org/) 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 `` tag for early SDK initialization. Replace `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"; ``` 3. Initialize the Cobrowse SDK and start a session. ```javascript 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. ```html ``` ### 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)](/docs/cobrowse-sdk/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. ```html ``` ## 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](/docs/cobrowse-sdk/features), such as: - Annotation and drawing tools - Data masking - [Bring Your Own PIN (BYOP)](/docs/cobrowse-sdk/byop/) By following these steps, you can successfully integrate and test the Zoom Cobrowse SDK for seamless collaborative browsing experiences.