Zoom Cobrowse Sdk

# Zoom Cobrowse SDK - Web Development

Background reference for collaborative browsing on the web with Zoom Cobrowse SDK. Use this after the support workflow is clear and you need implementation detail.

**Official Documentation**: https://developers.zoom.us/docs/cobrowse-sdk/ **API Reference**: https://marketplacefront.zoom.us/sdk/cobrowse/ **Quickstart Repository**: https://github.com/zoom/CobrowseSDK-Quickstart **Auth Endpoint Sample**: https://github.com/zoom/cobrowsesdk-auth-endpoint-sample

## Quick Links

**New to Cobrowse SDK? Follow this path:**

1. **[Get Started Guide](get-started.md)** - Complete setup from credentials to first session 2. **[Session Lifecycle](concepts/session-lifecycle.md)** - Understanding customer and agent flows 3. **[JWT Authentication](concepts/jwt-authentication.md)** - Token generation and security 4. **[Customer Integration](examples/customer-integration.md)** - Integrate SDK into your website 5. **[Agent Integration](examples/agent-integration.md)** - Set up agent portal (iframe or npm)

**Core Concepts:** - **[Two Roles Pattern](concepts/two-roles-pattern.md)** - Customer vs Agent architecture - **[Session Lifecycle](concepts/session-lifecycle.md)** - PIN generation, connection, reconnection - **[JWT Authentication](concepts/jwt-authentication.md)** - SDK Key vs API Key, role_type, claims - **[Distribution Methods](concepts/distribution-methods.md)** - CDN vs npm (BYOP)

**Features:** - **[Annotation Tools](examples/annotations.md)** - Drawing, highlighting, pointer tools - **[Privacy Masking](examples/privacy-masking.md)** - Hide sensitive fields from agents - **[Remote Assist](examples/remote-assist.md)** - Agent can scroll customer's page - **[Multi-Tab Persistence](examples/multi-tab-persistence.md)** - Session continues across tabs - **[BYOP Mode](examples/byop-custom-pin.md)** - Bring Your Own PIN with npm integration

**Troubleshooting:** - **[Common Issues](troubleshooting/common-issues.md)** - Quick diagnostics and solutions - **[Error Codes](troubleshooting/error-codes.md)** - Complete error reference - **[CORS and CSP](troubleshooting/cors-csp.md)** - Cross-origin and security policy configuration - **[Browser Compatibility](troubleshooting/browser-compatibility.md)** - Supported browsers and limitations - **[5-Minute Runbook](RUNBOOK.md)** - Fast preflight checks before deep debugging

**Reference:** - **[API Reference](references/api-reference.md)** - Complete SDK methods and events - **[Settings Reference](references/settings-reference.md)** - All initialization settings - **Integrated Index** - see the section below in this file

## SDK Overview

The Zoom Cobrowse SDK is a JavaScript library that provides:

- **Real-Time Co-Browsing**: Agent sees customer's browser activity live - **PIN-Based Sessions**: Secure 6-digit PIN for customer-to-agent connection - **Annotation Tools**: Drawing, highlighting, vanishing pen, rectangle, color picker - **Privacy Masking**: CSS selector-based masking of sensitive form fields - **Remote Assist**: Agent can scroll customer's page (with consent) - **Multi-Tab Persistence**: Session continues when customer opens new tabs - **Auto-Reconnection**: Session recovers from page refresh (2-minute window) - **Session Events**: Real-time events for session state changes - **HTTPS Required**: Secure connections (HTTP only works on loopback/local development hosts) - **No Plugins**: Pure JavaScript, no browser extensions needed

## Two Roles Architecture

Cobrowse has **two distinct roles**, each with different integration patterns:

| Role | role_type | Integration | JWT Required | Purpose | |------|-----------|-------------|--------------|---------| | **Customer** | 1 | Website integration (CDN or npm) | Yes | User who shares their browser session | | **Agent** | 2 | Iframe (CDN) or npm (BYOP only) | Yes | Support staff who views/assists customer |

**Key Insight**: Customer and agent use **different integration methods** but the same JWT authentication pattern.

## Read This First (Critical)

For customer/agent demos, treat the PIN from customer SDK event `pincode_updated` as the only user-facing PIN.

- Show one clearly labeled value in UI (for example, **Support PIN**). - Use that same PIN for agent join. - Do not expose provisional/debug PINs from backend pre-start records to users.

If these rules are ignored, agent desk often fails with `Pincode is not found` / code `30308`.

### Typical Production Flow (Most Common)

This is the flow most teams implement first, and what users usually expect in demos:

1. **Customer starts session first** (`role_type=1`) - Backend creates/records session - Backend returns customer JWT - Customer SDK starts and receives a PIN 2. **Agent joins second** (`role_type=2`) - Agent enters customer PIN - Backend validates PIN and session state - Backend returns agent JWT - Agent opens Zoom-hosted desk iframe (or custom npm agent UI in BYOP)

If a demo only has one gener