AutoGineer
Generated banner for Zoom Cobrowse SDK
Generated logo for Zoom Cobrowse SDK

Zoom Cobrowse SDK

OpenAIOfficialCreated by ZoomDistributed by OpenAI

  • Skill
  • Tool integration
  • Automation and integrations
  • MIT
  • No issues found
Download ZIP

From the author

Use when using Cobrowse.
— the description by Zoom

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to implementing the Zoom Cobrowse SDK. It covers the end-to-end lifecycle of a co-browsing session, including initialization, session management, event handling, and privacy configuration. It is designed to assist developers in setting up secure, browser-based co-browsing experiences between agents and customers.

What it does

  • Provides a workflow for initializing and managing co-browsing sessions.
  • Details configuration options for SDK keys, JWT tokens, and feature flags.
  • Outlines methods for starting, pausing, resuming, and ending sessions.
  • Explains how to implement privacy masking using CSS selectors.
  • Offers guidance on handling session events such as agent joins and departures.
  • Includes troubleshooting steps for common integration issues like CORS and token errors.

When to use it

  • When you need to integrate co-browsing capabilities into a web application.
  • When configuring privacy and masking rules for sensitive user data during sessions.
  • When debugging session connectivity, authentication, or event handling issues.
  • When implementing custom session PINs or remote assist features.

Advantages

  • Provides a clear, step-by-step implementation lifecycle.
  • Centralizes configuration and API usage patterns.
  • Includes specific guidance on security and privacy controls.
  • Offers a structured approach to troubleshooting common SDK errors.

Usage examples

“How do I initialize the Zoom Cobrowse SDK?”
The agent provides the initialization code snippet using the ZoomCobrowse constructor, including required configuration options like sdkKey and token.
“How can I mask sensitive elements during a co-browsing session?”
The agent explains how to use the masking.selectors configuration option to define CSS selectors that should be hidden from the agent.
“What events should I listen for to track session status?”
The agent lists the available event listeners such as sessionStarted, agentJoined, and sessionEnded to monitor the session lifecycle.
“How do I start a session programmatically?”
The agent demonstrates the use of the startSession method and explains how to handle the returned session object containing the PIN and session ID.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/openai/zoom-cobrowse-sdk/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip zoom-cobrowse-sdk.zip -d .agents/skills

Documentation by Zoom

Zoom Cobrowse SDK

Use this skill after the support workflow is clearly a browser co-browsing experience. If the user is still choosing between Zoom Contact Center, Virtual Agent, Video SDK, or Cobrowse, route through start or plan-zoom-product first.

Workflow

  1. Confirm the role model: customer page, agent console, session initiation, and how the PIN or link is handed off.

  2. Check auth and session setup before UI work: tokens, allowed origins, environment variables, and SDK loading.

  3. Design privacy controls early: masking rules, blocked elements, remote-assist permission boundaries, and audit requirements.

  4. Implement the minimal lifecycle first: initialize, start or join, subscribe to events, reconnect, and end.

  5. Add advanced capabilities only after the base session is stable: annotations, multi-tab persistence, custom PINs, and remote assist.

  6. When debugging, isolate browser support, CORS/CSP, token generation, third-party cookie behavior, and SDK event errors.

References

Files

get-started.md

Get Started with Zoom Cobrowse SDK

Complete setup guide from credentials to your first cobrowse session.

Overview

In a cobrowse session, there are two roles:

  • Customer (role_type=1) – Integrates the SDK into their website

  • Agent (role_type=2) – Uses an embedded iframe to interact with the customer

This guide shows you how to set up a customer-initiated session (the most common pattern).

Step 1: Get SDK Credentials

Requirements

  1. Zoom Workplace Account with SDK Universal Credit

  2. Video SDK App in Zoom Marketplace

    • Cobrowse SDK is a feature of Video SDK (not a separate product)

Get Your Credentials

  1. Access your SDK account web portal:

    • In your Zoom Workplace account, go to Advanced > Zoom CPaaS > Manage

  2. Click Build App

  3. Locate your SDK credentials in the Cobrowse tab

You'll receive 4 credentials:

CredentialTypePurpose
SDK KeyPublicUsed in CDN URL and JWT app_key claim
SDK SecretPrivateUsed to sign JWTs (server-side only)
API KeyPrivateREST API authentication (optional)
API SecretPrivateREST API authentication (optional)

Save these credentials securely - you'll need them in the next step.

Step 2: Generate JWT Tokens

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

JWT Structure

All JWTs have the same header:

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

The payload differs by role:

Customer JWT payload (role_type=1):

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

Agent JWT payload (role_type=2):

{
  "user_id": "user2_agent",
  "app_key": "YOUR_SDK_KEY",
  "role_type": 2,
  "user_name": "agent",
  "exp": 1723103759,
  "iat": 1723102859
}
JWT Payload Fields
FieldRequiredDescription
app_keyYesYour Zoom SDK Key (not API Key)
role_typeYesUser role: 1 = customer, 2 = agent
iatYesToken issue timestamp (epoch)
expYesToken expiration timestamp (epoch). Min: 30 minutes, Max: 48 hours
user_idYesUniquely identifiable user ID
user_nameYesUser name (max 80 characters)
enable_byopOptionalEnable Bring Your Own PIN: 1 = yes, 0 or omit = no
Sign the JWT

Sign the JWT with your SDK Secret (not API Secret):

HMACSHA256(
  base64UrlEncode(header) + '.' + base64UrlEncode(payload),
  ZOOM_SDK_SECRET
);
Set Up a Token Server

CRITICAL: JWT signing must happen server-side to protect your SDK Secret.

Use the official auth endpoint sample:

# Clone the sample
git clone https://github.com/zoom/cobrowsesdk-auth-endpoint-sample.git
cd cobrowsesdk-auth-endpoint-sample

# Install dependencies
npm install

# Create .env file
cat > .env << EOF
ZOOM_SDK_KEY=your_sdk_key_here
ZOOM_SDK_SECRET=your_sdk_secret_here
PORT=4000
EOF

# Start the server
npm start

The server will run on the base URL you configure for your token service.

Token Request:

// POST https://YOUR_TOKEN_SERVICE_BASE_URL
{
  "role": 1,           // 1 = customer, 2 = agent
  "userId": "user123",
  "userName": "John Doe"
}

// Response
{
  "token": "eyJhbGciOiJIUzI1NiIs..."
}

See also: JWT Authentication Concept

Step 3: Integrate the Customer SDK

The customer integrates the Cobrowse SDK into their website using the CDN.

Critical PIN Rule

The PIN agents should use comes from customer SDK event pincode_updated. Do not show or rely on provisional PIN values from backend/session placeholders. In UI, display one explicit value (for example, Support PIN) and pass only that to agent flow.

Load the SDK

Include the SDK snippet in the <head> tag of your HTML page:

<script type="module">
  const ZOOM_SDK_KEY = 'YOUR_SDK_KEY';

  (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/2.13.2`
    );
    d.parentNode.insertBefore(fragment, d);
  })(window, document, 'script', 'ZoomCobrowseSDK');
</script>
SDK Version

Set the SDK VERSION using semantic versioning:

  • Fixed version: js/2.13.2 - Use exact version 2.13.2

  • Latest patch: js/2.13.x - Use latest >=2.13.0 and <2.14.0

Current version: 2.13.2 (as of February 2026)

Initialize the SDK
const settings = {
  allowCustomerAnnotation: true,
  piiMask: { maskType: 'all_input' },
};

ZoomCobrowseSDK.init(settings, function ({ success, session, error }) {
  if (success) {
    console.log("SDK initialized successfully");
    // session object is now available
  } else {
    console.error("SDK init failed:", error);
  }
});
Start a Session
// Fetch JWT from your server
const response = await fetch('https://YOUR_TOKEN_SERVICE_BASE_URL', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    role: 1,
    userId: 'customer_' + Date.now(),
    userName: 'Customer'
  })
});
const { token } = await response.json();

// Start cobrowse session
session.start({ sdkToken: token });
Complete Customer Example
<!DOCTYPE html>
<html>
<head>
  <title>Customer - Cobrowse Support</title>
  <script type="module">
    const ZOOM_SDK_KEY = 'YOUR_SDK_KEY';

    // Load SDK from CDN
    (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/2.13.2`);
      d.parentNode.insertBefore(fragment, d);
    })(window, document, "script", "ZoomCobrowseSDK");
  </script>
</head>
<body>
  <h1>Need Help?</h1>
  <button id="cobrowse-btn" disabled>Loading...</button>
  <div id="pin-display"></div>

  <script type="module">
    let sessionRef = null;

    const settings = {
      allowAgentAnnotation: true,
      allowCustomerAnnotation: true,
      piiMask: {
        maskType: "custom_input",
        maskCssSelectors: ".sensitive-field"
      }
    };

    ZoomCobrowseSDK.init(settings, function({ success, session, error }) {
      if (success) {
        sessionRef = session;

        // Listen for PIN code
        session.on("pincode_updated", (payload) => {
          console.log("PIN Code:", payload.pincode);
          // This is the authoritative PIN for agent join
          document.getElementById("pin-display").innerHTML =
            `<p><strong>Your PIN:</strong> ${payload.pincode}</p>
             <p>Share this with your support agent</p>`;
        });

        // Enable button
        document.getElementById("cobrowse-btn").disabled = false;
        document.getElementById("cobrowse-btn").innerText = "Start Support Session";
      } else {
        console.error("SDK init failed:", error);
      }
    });

    // Handle button click
    document.getElementById("cobrowse-btn").addEventListener("click", async () => {
      try {
        // Fetch JWT from your server
        const response = await fetch("https://YOUR_TOKEN_SERVICE_BASE_URL", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            role: 1,
            userId: "customer_" + Date.now(),
            userName: "Customer"
          })
        });
        const { token } = await response.json();

        // Start session
        sessionRef.start({ sdkToken: token });
      } catch (error) {
        console.error("Failed to start session:", error);
      }
    });
  </script>
</body>
</html>

Step 4: Use Zoom-Hosted Agent Portal

Agents connect to cobrowse sessions by embedding an iframe.

Agent Portal Iframe
<!DOCTYPE html>
<html>
<head>
  <title>Agent Portal</title>
</head>
<body>
  <h1>Agent Support Portal</h1>
  <iframe
    id="agent-iframe"
    width="1024"
    height="768"
    src=""
    allow="autoplay *; camera *; microphone *; display-capture *; geolocation *;"
  ></iframe>

  <script>
    async function connectAgent() {
      try {
        // Fetch JWT from your server
        const response = await fetch("https://YOUR_TOKEN_SERVICE_BASE_URL", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            role: 2,
            userId: "agent_" + Date.now(),
            userName: "Support Agent"
          })
        });
        const { token } = await response.json();

        // Load Zoom agent portal with token
        const iframe = document.getElementById("agent-iframe");
        iframe.src = `https://us01-zcb.zoom.us/sdkapi/zcb/frame-templates/desk?access_token=${token}`;
      } catch (error) {
        console.error("Failed to connect agent:", error);
      }
    }

    // Auto-connect on page load
    connectAgent();
  </script>
</body>
</html>
Iframe Permissions

The allow attribute must include these permissions:

  • autoplay * - Auto-play media

  • camera * - Camera access

  • microphone * - Microphone access

  • display-capture * - Screen capture

  • geolocation * - Location services

Step 5: Test the Cobrowse SDK

Testing Steps

  1. Open two browsers (or use incognito + normal mode):

    • Browser A: Customer page

    • Browser B: Agent page

  2. Customer browser:

    • Open customer page

    • Click "Start Support Session" button

    • Note the 6-digit PIN displayed

  3. Agent browser:

    • Open agent page

    • Enter the PIN code in the iframe

  4. Verify connection:

    • Agent should now see the customer's browser

    • Both sides should show "Connected" status

  5. Test features:

    • Annotations: Agent can draw on the screen

    • Data masking: Masked fields show asterisks for agent

    • Remote assist: Agent can scroll the page (if enabled)

  6. End session:

    • Either side can click "End Session" to terminate

Troubleshooting Test Issues
IssueSolution
SDK doesn't loadVerify SDK Key is correct in CDN URL
PIN not showingCheck browser console for errors
Agent can't connectVerify PIN is correct and session is still active
Connection failsCheck HTTPS is being used (or a loopback host for development)

Step 6: Add Features

Now that you have a working cobrowse session, add features:

Annotation Tools

Enable drawing tools for customer and/or agent:

const settings = {
  allowAgentAnnotation: true,      // Agent can draw
  allowCustomerAnnotation: true    // Customer can draw
};

See: Annotation Tools Example

Data Masking

Hide sensitive fields from agents:

const settings = {
  piiMask: {
    maskType: 'custom_input',
    maskCssSelectors: '.sensitive-field, #ssn, #credit-card',
    maskHTMLAttributes: 'data-sensitive=true'
  }
};

See: Privacy Masking Example

Remote Assist

Allow agent to scroll the customer's page:

const settings = {
  remoteAssist: {
    enable: true,
    enableCustomerConsent: true,        // Customer must approve
    remoteAssistTypes: ['scroll_page']
  }
};

See: Remote Assist Example

Bring Your Own PIN (BYOP)

Use custom PIN codes instead of auto-generated ones:

  1. Enable BYOP in JWT payload:

    {
  "enable_byop": 1,
  ...
}

  2. Provide custom PIN when starting session:

    session.start({
  customPinCode: 'MYPIN123',
  sdkToken: token
});

See: BYOP Custom PIN Example

Next Steps

PIN Code Access - Bring Your Own PIN (BYOP)

The Cobrowse SDK supports connecting agents and customers using a PIN code. In the simple example above, Zoom automatically generates a 6-digit PIN code displayed to the customer.

Auto-generated PIN flow:

  1. Customer clicks "Start Support Session"

  2. Zoom generates 6-digit PIN

  3. Customer shares PIN with agent

  4. Agent enters PIN to connect

Custom PIN flow (BYOP):

  1. Your app generates custom PIN code (1-10 characters, letters/numbers)

  2. Pass PIN when starting session: session.start({ customPinCode: 'MYPIN', sdkToken })

  3. Agent enters your custom PIN to connect

BYOP enables:

  • Integration with existing support ticket systems

  • Use of case/ticket IDs as PINs

  • npm integration for custom agent UI

See: Bring Your Own PIN (BYOP) for complete guide.

Resources

Common Questions

Q: Can I use HTTP instead of HTTPS? A: Only for loopback/local development. Production must use HTTPS.

Q: What's the difference between SDK Key and API Key? A: SDK Key is used in the CDN URL and JWT app_key claim. API Key is for optional REST API calls.

Q: Can multiple agents join the same session? A: Yes, up to 5 agents can join a single customer session.

Q: Does the customer need to install anything? A: No, it's pure JavaScript delivered via CDN. No plugins or extensions needed.

Q: What happens if the customer refreshes the page? A: The session will attempt to automatically reconnect within a 2-minute window.

Q: Can I customize the agent portal UI? A: Not with the iframe approach. For custom UI, use npm integration with BYOP mode.

Requirements and compatibility

Written for: OpenAI Codex

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Zoom
Publisher
OpenAI (Official)
Distributed by
OpenAI
Source
openai/plugins · plugins/zoom/skills/cobrowse-sdk · commit d420d13
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from plugins/zoom/LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Zoom or OpenAI.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download zoom-cobrowse-sdk.zip