zoom-cobrowse-sdk

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Zoom Cobrowse SDK - Web Development

Zoom Cobrowse SDK - Web开发

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

使用Zoom Cobrowse SDK实现Web端协同浏览的背景参考，在支持工作流明确、需要实现细节时使用此文档。

官方文档: https://developers.zoom.us/docs/cobrowse-sdk/
API参考: https://marketplacefront.zoom.us/sdk/cobrowse/
快速入门仓库: https://github.com/zoom/CobrowseSDK-Quickstart
鉴权端点示例: https://github.com/zoom/cobrowsesdk-auth-endpoint-sample

Quick Links

快速链接

New to Cobrowse SDK? Follow this path:

Get Started Guide - Complete setup from credentials to first session
Session Lifecycle - Understanding customer and agent flows
JWT Authentication - Token generation and security
Customer Integration - Integrate SDK into your website
Agent Integration - Set up agent portal (iframe or npm)

Core Concepts:

Two Roles Pattern - Customer vs Agent architecture
Session Lifecycle - PIN generation, connection, reconnection
JWT Authentication - SDK Key vs API Key, role_type, claims
Distribution Methods - CDN vs npm (BYOP)

Features:

Annotation Tools - Drawing, highlighting, pointer tools
Privacy Masking - Hide sensitive fields from agents
Remote Assist - Agent can scroll customer's page
Multi-Tab Persistence - Session continues across tabs
BYOP Mode - Bring Your Own PIN with npm integration

Troubleshooting:

Common Issues - Quick diagnostics and solutions
Error Codes - Complete error reference
CORS and CSP - Cross-origin and security policy configuration
Browser Compatibility - Supported browsers and limitations
5-Minute Runbook - Fast preflight checks before deep debugging

Reference:

API Reference - Complete SDK methods and events
Settings Reference - All initialization settings
Integrated Index - see the section below in this file

初次使用Cobrowse SDK？请遵循以下路径：

入门指南 - 从凭证获取到首个会话的完整设置流程
会话生命周期 - 了解客户和坐席的操作流程
JWT鉴权 - Token生成与安全规范
客户端集成 - 将SDK集成到你的网站中
坐席端集成 - 搭建坐席门户（iframe或npm）

核心概念：

双角色模式 - 客户与坐席的架构设计
会话生命周期 - PIN生成、连接、重连机制
JWT鉴权 - SDK Key与API Key区别、role_type、声明配置
分发方式 - CDN与npm（BYOP）对比

功能特性：

标注工具 - 绘制、高亮、指针工具
隐私屏蔽 - 对坐席隐藏敏感字段
远程协助 - 坐席可滚动客户页面
多标签页持久化 - 会话可跨标签页延续
BYOP模式 - 通过npm集成实现自定义PIN

故障排查：

常见问题 - 快速诊断与解决方案
错误码 - 完整错误参考文档
CORS与CSP - 跨域与安全策略配置
浏览器兼容性 - 支持的浏览器与限制说明
5分钟运行手册 - 深度调试前的快速预检清单

参考文档：

API参考 - 完整的SDK方法与事件说明
配置项参考 - 所有初始化配置项
集成索引 - 参见本文件下方章节

SDK Overview

SDK概述

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

Zoom Cobrowse SDK是一个JavaScript库，提供以下能力：

实时协同浏览: 坐席可实时查看客户的浏览器操作
基于PIN的会话: 6位安全PIN码实现客户与坐席的连接
标注工具: 绘制、高亮、消失笔、矩形、颜色选择器
隐私屏蔽: 基于CSS选择器屏蔽敏感表单字段
远程协助: 坐席可在获得同意后滚动客户页面
多标签页持久化: 客户打开新标签页时会话可延续
自动重连: 页面刷新后可恢复会话（2分钟窗口期）
会话事件: 会话状态变更的实时事件通知
HTTPS要求: 需使用安全连接（HTTP仅在回环/本地开发环境可用）
无需插件: 纯JavaScript实现，无需浏览器扩展

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.

Cobrowse有两个不同的角色，各自对应不同的集成模式：

角色	role_type	集成方式	是否需要JWT	用途
客户	1	网站集成（CDN或npm）	是	共享浏览器会话的用户
坐席	2	Iframe（CDN）或npm（仅BYOP模式）	是	为客户提供查看/协助的支持人员

核心要点: 客户和坐席使用不同的集成方法，但遵循相同的JWT鉴权模式。

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

对于客户/坐席演示，请将客户SDK事件

pincode_updated

返回的PIN作为唯一面向用户的PIN。

在UI中展示一个标注清晰的数值（例如 支持PIN）
坐席加入时使用相同的PIN
不要向后端预启动记录中的临时/调试PIN暴露给用户

如果忽略这些规则，坐席端通常会报错

Pincode is not found

/ 错误码

。

Typical Production Flow (Most Common)

典型生产流程（最常用）

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

Customer starts session first (
```
role_type=1
```
)
- Backend creates/records session
- Backend returns customer JWT
- Customer SDK starts and receives a PIN
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 generic "session" user, it is incomplete for real cobrowse operations.

这是大多数团队最先实现的流程，也是用户在演示中通常期望的流程：

客户先启动会话 (
```
role_type=1
```
)
- 后端创建/记录会话
- 后端返回客户JWT
- 客户SDK启动并获得PIN
坐席后加入会话 (
```
role_type=2
```
)
- 坐席输入客户的PIN
- 后端验证PIN与会话状态
- 后端返回坐席JWT
- 坐席打开Zoom托管的工作台iframe（或BYOP模式下的自定义npm坐席UI）

如果演示只有一个通用的「会话」用户，对于实际协同浏览操作来说是不完整的。

Prerequisites

前置要求

Platform Requirements

平台要求

Supported Browsers:
- Chrome 80+ ✓
- Firefox 78+ ✓
- Safari 14+ ✓
- Edge 80+ ✓
- Internet Explorer ✗ (not supported)
Network Requirements:
- HTTPS required (HTTP works on loopback/local development hosts only)
- Allow cross-origin requests to
```
*.zoom.us
```
- CSP headers must allow Zoom domains (see CORS and CSP guide)
Third-Party Cookies:
- Must enable third-party cookies for refresh reconnection
- Privacy mode may limit certain features

支持的浏览器:
- Chrome 80+ ✓
- Firefox 78+ ✓
- Safari 14+ ✓
- Edge 80+ ✓
- Internet Explorer ✗ （不支持）
网络要求:
- 需要HTTPS（HTTP仅在回环/本地开发环境可用）
- 允许对
```
*.zoom.us
```
  的跨域请求
- CSP头必须允许Zoom域名（参见CORS与CSP指南）
第三方Cookie:
- 必须启用第三方Cookie才能实现刷新重连
- 隐私模式可能会限制部分功能

Zoom Account Requirements

Zoom账号要求

Zoom Workplace Account with SDK Universal Credit
Video SDK App created in Zoom Marketplace
Cobrowse SDK Credentials from the app's Cobrowse tab

Note: Cobrowse SDK is a feature of Video SDK (not a separate product).

具备SDK通用额度的Zoom Workplace账号
在Zoom Marketplace中创建的Video SDK应用
应用Cobrowse标签页下的Cobrowse SDK凭证

注意: Cobrowse SDK是Video SDK的一项功能（不是独立产品）。

Credentials Overview

凭证概览

You'll receive 4 credentials from Zoom Marketplace → Video SDK App → Cobrowse tab:

Credential	Type	Used For	Exposure Safe?
SDK Key	Public	CDN URL, JWT `app_key` claim	✓ Yes (client-side)
SDK Secret	Private	Sign JWTs	✗ No (server-side only)
API Key	Private	REST API calls (optional)	✗ No (server-side only)
API Secret	Private	REST API calls (optional)	✗ No (server-side only)

Critical: SDK Key is public (embedded in CDN URL), but SDK Secret must never be exposed client-side.

你将从Zoom Marketplace → Video SDK应用 → Cobrowse标签页获得4个凭证：

凭证	类型	用途	是否可安全暴露？
SDK Key	公开	CDN URL、JWT `app_key` 声明	✓ 是（客户端可用）
SDK Secret	私密	签名JWT	✗ 否（仅服务端可用）
API Key	私密	REST API调用（可选）	✗ 否（仅服务端可用）
API Secret	私密	REST API调用（可选）	✗ 否（仅服务端可用）

重要提示: SDK Key是公开的（嵌入在CDN URL中），但SDK Secret绝对不能暴露在客户端。

Quick Start

快速入门

Step 1: Get SDK Credentials

步骤1：获取SDK凭证

Go to Zoom Marketplace
Open your Video SDK App (or create one)
Navigate to the Cobrowse tab
Copy your credentials:
- SDK Key
- SDK Secret
- API Key (optional)
- API Secret (optional)

访问Zoom Marketplace
打开你的Video SDK应用（或创建一个新应用）
导航到Cobrowse标签页
复制你的凭证：
- SDK Key
- SDK Secret
- API Key（可选）
- API Secret（可选）

Step 2: Set Up Token Server

步骤2：搭建Token服务

Deploy a server-side endpoint to generate JWTs. Use the official sample:

bash

git clone https://github.com/zoom/cobrowsesdk-auth-endpoint-sample.git
cd cobrowsesdk-auth-endpoint-sample
npm install

部署一个服务端端点来生成JWT，使用官方示例：

bash

git clone https://github.com/zoom/cobrowsesdk-auth-endpoint-sample.git
cd cobrowsesdk-auth-endpoint-sample
npm install

Create .env file

创建.env文件

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

npm start


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

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

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

npm start


**Token端点**:```javascript
// POST https://YOUR_TOKEN_SERVICE_BASE_URL
{
  "role": 1,           // 1 = 客户, 2 = 坐席
  "userId": "user123",
  "userName": "John Doe"
}

// 返回结果
{
  "token": "eyJhbGciOiJIUzI1NiIs..."
}

Step 3: Customer Side Integration (CDN)

步骤3：客户端集成（CDN）

html

<!DOCTYPE html>
<html>
<head>
  <title>Customer - Cobrowse Demo</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>Customer Support</h1>
  <button id="cobrowse-btn" disabled>Loading...</button>
  
  <!-- Sensitive fields - will be masked from agent -->
  <label>SSN: <input type="text" class="pii-mask" placeholder="XXX-XX-XXXX"></label>
  <label>Credit Card: <input type="text" class="pii-mask" placeholder="XXXX-XXXX-XXXX-XXXX"></label>
  
  <script type="module">
    let sessionRef = null;
    
    const settings = {
      allowAgentAnnotation: true,
      allowCustomerAnnotation: true,
      piiMask: {
        maskCssSelectors: ".pii-mask",
        maskType: "custom_input"
      }
    };
    
    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);
          // IMPORTANT: this is the PIN agent should use
          alert(`Share this PIN with agent: ${payload.pincode}`);
        });
        
        // Listen for session events
        session.on("session_started", () => console.log("Session started"));
        session.on("agent_joined", () => console.log("Agent joined"));
        session.on("agent_left", () => console.log("Agent left"));
        session.on("session_ended", () => console.log("Session ended"));
        
        document.getElementById("cobrowse-btn").disabled = false;
        document.getElementById("cobrowse-btn").innerText = "Start Cobrowse Session";
      } else {
        console.error("SDK init failed:", error);
      }
    });
    
    document.getElementById("cobrowse-btn").addEventListener("click", async () => {
      // 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
      sessionRef.start({ sdkToken: token });
    });
  </script>
</body>
</html>

html

<!DOCTYPE html>
<html>
<head>
  <title>客户 - Cobrowse演示</title>
  <script type="module">
    const ZOOM_SDK_KEY = 'YOUR_SDK_KEY';
    
    // 从CDN加载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/2.13.2`);
      d.parentNode.insertBefore(fragment, d);
    })(window, document, "script", "ZoomCobrowseSDK");
  </script>
</head>
<body>
  <h1>客户支持</h1>
  <button id="cobrowse-btn" disabled>加载中...</button>
  
  <!-- 敏感字段 - 对坐席屏蔽 -->
  <label>SSN: <input type="text" class="pii-mask" placeholder="XXX-XX-XXXX"></label>
  <label>信用卡: <input type="text" class="pii-mask" placeholder="XXXX-XXXX-XXXX-XXXX"></label>
  
  <script type="module">
    let sessionRef = null;
    
    const settings = {
      allowAgentAnnotation: true,
      allowCustomerAnnotation: true,
      piiMask: {
        maskCssSelectors: ".pii-mask",
        maskType: "custom_input"
      }
    };
    
    ZoomCobrowseSDK.init(settings, function({ success, session, error }) {
      if (success) {
        sessionRef = session;
        
        // 监听PIN码事件
        session.on("pincode_updated", (payload) => {
          console.log("PIN码:", payload.pincode);
          // 重要: 这是坐席应该使用的PIN
          alert(`将此PIN分享给坐席: ${payload.pincode}`);
        });
        
        // 监听会话事件
        session.on("session_started", () => console.log("会话已启动"));
        session.on("agent_joined", () => console.log("坐席已加入"));
        session.on("agent_left", () => console.log("坐席已离开"));
        session.on("session_ended", () => console.log("会话已结束"));
        
        document.getElementById("cobrowse-btn").disabled = false;
        document.getElementById("cobrowse-btn").innerText = "启动协同浏览会话";
      } else {
        console.error("SDK初始化失败:", error);
      }
    });
    
    document.getElementById("cobrowse-btn").addEventListener("click", async () => {
      // 从你的服务端获取JWT
      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: "客户"
        })
      });
      const { token } = await response.json();
      
      // 启动协同浏览会话
      sessionRef.start({ sdkToken: token });
    });
  </script>
</body>
</html>

Step 4: Agent Side Integration (Iframe)

步骤4：坐席端集成（Iframe）

html

<!DOCTYPE html>
<html>
<head>
  <title>Agent Portal</title>
</head>
<body>
  <h1>Agent Portal</h1>
  <iframe 
    id="agent-iframe"
    width="1024" 
    height="768"
    allow="autoplay *; camera *; microphone *; display-capture *; geolocation *;"
  ></iframe>
  
  <script>
    async function connectAgent() {
      // 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
      const iframe = document.getElementById("agent-iframe");
      iframe.src = `https://us01-zcb.zoom.us/sdkapi/zcb/frame-templates/desk?access_token=${token}`;
    }
    
    connectAgent();
  </script>
</body>
</html>

html

<!DOCTYPE html>
<html>
<head>
  <title>坐席门户</title>
</head>
<body>
  <h1>坐席门户</h1>
  <iframe 
    id="agent-iframe"
    width="1024" 
    height="768"
    allow="autoplay *; camera *; microphone *; display-capture *; geolocation *;"
  ></iframe>
  
  <script>
    async function connectAgent() {
      // 从你的服务端获取JWT
      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: "支持坐席"
        })
      });
      const { token } = await response.json();
      
      // 加载Zoom坐席门户
      const iframe = document.getElementById("agent-iframe");
      iframe.src = `https://us01-zcb.zoom.us/sdkapi/zcb/frame-templates/desk?access_token=${token}`;
    }
    
    connectAgent();
  </script>
</body>
</html>

Step 5: Test the Integration

步骤5：测试集成

Open two separate browsers (or incognito + normal)
Customer browser: Open customer page, click "Start Cobrowse Session"
Customer browser: Note the 6-digit PIN displayed
Agent browser: Open agent page, enter the PIN code
Both browsers: Session connects, agent can see customer's page
Test features: Annotations, data masking, remote assist

打开两个独立的浏览器（或隐身窗口+普通窗口）
客户浏览器: 打开客户页面，点击「启动协同浏览会话」
客户浏览器: 记下显示的6位PIN码
坐席浏览器: 打开坐席页面，输入PIN码
两个浏览器: 会话连接成功，坐席可以看到客户的页面
测试功能: 标注、数据屏蔽、远程协助

Key Features

核心功能

1. Annotation Tools

1. 标注工具

Both customer and agent can draw on the shared screen:

javascript

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

Available tools:

Pen (persistent)
Vanishing pen (disappears after 4 seconds)
Rectangle
Color picker
Eraser
Undo/Redo

客户和坐席都可以在共享屏幕上绘制：

javascript

const settings = {
  allowAgentAnnotation: true,      // 坐席可绘制
  allowCustomerAnnotation: true    // 客户可绘制
};

可用工具:

画笔（持久显示）
消失笔（4秒后自动消失）
矩形
颜色选择器
橡皮擦
撤销/重做

2. Privacy Masking

2. 隐私屏蔽

Hide sensitive fields from agents using CSS selectors:

javascript

const settings = {
  piiMask: {
    maskType: "custom_input",           // Mask specific fields
    maskCssSelectors: ".pii-mask, #ssn", // CSS selectors
    maskHTMLAttributes: "data-sensitive=true" // HTML attributes
  }
};

Supported masking:

Text nodes ✓
Form inputs ✓
Select elements ✓
Images ✗ (not supported)
Links ✗ (not supported)

使用CSS选择器对坐席隐藏敏感字段：

javascript

const settings = {
  piiMask: {
    maskType: "custom_input",           // 屏蔽指定字段
    maskCssSelectors: ".pii-mask, #ssn", // CSS选择器
    maskHTMLAttributes: "data-sensitive=true" // HTML属性
  }
};

支持的屏蔽类型:

文本节点 ✓
表单输入框 ✓
选择器元素 ✓
图片 ✗ （不支持）
链接 ✗ （不支持）

3. Remote Assist

3. 远程协助

Agent can scroll the customer's page:

javascript

const settings = {
  remoteAssist: {
    enable: true,
    enableCustomerConsent: true,        // Customer must approve
    remoteAssistTypes: ['scroll_page'], // Only scroll supported
    requireStopConfirmation: false      // Confirmation when stopping
  }
};

坐席可以滚动客户的页面：

javascript

const settings = {
  remoteAssist: {
    enable: true,
    enableCustomerConsent: true,        // 需要客户同意
    remoteAssistTypes: ['scroll_page'], // 仅支持滚动
    requireStopConfirmation: false      // 停止时是否需要确认
  }
};

4. Multi-Tab Session Persistence

4. 多标签页会话持久化

Session continues when customer opens new tabs:

javascript

const settings = {
  multiTabSessionPersistence: {
    enable: true,
    stateCookieKey: '$$ZCB_SESSION$$'  // Cookie key (base64 encoded)
  }
};

客户打开新标签页时会话可延续：

javascript

const settings = {
  multiTabSessionPersistence: {
    enable: true,
    stateCookieKey: '$$ZCB_SESSION$$'  // Cookie键（base64编码）
  }
};

Session Lifecycle

会话生命周期

Customer Flow

客户流程

Load SDK → CDN script loads
```
ZoomCobrowseSDK
```

Initialize →

ZoomCobrowseSDK.init(settings, callback)

Fetch JWT → Request token from your server (role_type=1)
Start Session →
```
session.start({ sdkToken })
```
PIN Generated →
```
pincode_updated
```
event fires
Share PIN → Customer gives 6-digit PIN to agent
Agent Joins →
```
agent_joined
```
event fires
Session Active → Real-time synchronization begins
End Session →
```
session.end()
```
or agent leaves

加载SDK → CDN脚本加载
```
ZoomCobrowseSDK
```

初始化 →

ZoomCobrowseSDK.init(settings, callback)

获取JWT → 向你的服务端请求Token（role_type=1）
启动会话 →
```
session.start({ sdkToken })
```
生成PIN → 触发
```
pincode_updated
```
事件
分享PIN → 客户将6位PIN告知坐席
坐席加入 → 触发
```
agent_joined
```
事件
会话激活 → 开始实时同步
结束会话 → 调用
```
session.end()
```
或坐席离开

Agent Flow

坐席流程

Fetch JWT → Request token from your server (role_type=2)
Load Iframe → Point to Zoom agent portal with token
Enter PIN → Agent inputs customer's 6-digit PIN
Connect →
```
session_joined
```
event fires
View Session → Agent sees customer's browser
Use Tools → Annotations, remote assist, zoom
Leave Session → Click "Leave Cobrowse" button

获取JWT → 向你的服务端请求Token（role_type=2）
加载Iframe → 使用Token指向Zoom坐席门户
输入PIN → 坐席输入客户的6位PIN
连接 → 触发
```
session_joined
```
事件
查看会话 → 坐席看到客户的浏览器页面
使用工具 → 标注、远程协助、缩放
离开会话 → 点击「离开协同浏览」按钮

Session Recovery (Auto-Reconnect)

会话恢复（自动重连）

When customer refreshes the page:

javascript

ZoomCobrowseSDK.init(settings, function({ success, session, error }) {
  if (success) {
    const sessionInfo = session.getSessionInfo();
    
    // Check if session is recoverable
    if (sessionInfo.sessionStatus === 'session_recoverable') {
      session.join();  // Auto-rejoin previous session
    } else {
      // Start new session
      session.start({ sdkToken });
    }
  }
});

Recovery window: 2 minutes. After 2 minutes, session ends.

当客户刷新页面时：

javascript

ZoomCobrowseSDK.init(settings, function({ success, session, error }) {
  if (success) {
    const sessionInfo = session.getSessionInfo();
    
    // 检查会话是否可恢复
    if (sessionInfo.sessionStatus === 'session_recoverable') {
      session.join();  // 自动重新加入之前的会话
    } else {
      // 启动新会话
      session.start({ sdkToken });
    }
  }
});

恢复窗口期: 2分钟，2分钟后会话自动结束。

Critical Gotchas and Best Practices

关键注意事项与最佳实践

⚠️ CRITICAL: SDK Secret Must Stay Server-Side

⚠️ 重要提示：SDK Secret必须保存在服务端

Problem: Developers often accidentally embed SDK Secret in frontend code.

Solution:

✓ SDK Key → Safe to expose (embedded in CDN URL)
✗ SDK Secret → Never expose (use for JWT signing server-side)

javascript

// ❌ WRONG - Secret exposed in frontend
const jwt = signJWT(payload, 'YOUR_SDK_SECRET');  // Security risk!

// ✅ CORRECT - Secret stays on server
const response = await fetch('/api/token', {
  method: 'POST',
  body: JSON.stringify({ role: 1, userId, userName })
});
const { token } = await response.json();

问题: 开发者经常不小心将SDK Secret嵌入到前端代码中。

解决方案:

✓ SDK Key → 可安全暴露（嵌入在CDN URL中）
✗ SDK Secret → 绝对不能暴露（仅用于服务端JWT签名）

javascript

// ❌ 错误 - Secret暴露在前端
const jwt = signJWT(payload, 'YOUR_SDK_SECRET');  // 存在安全风险！

// ✅ 正确 - Secret保留在服务端
const response = await fetch('/api/token', {
  method: 'POST',
  body: JSON.stringify({ role: 1, userId, userName })
});
const { token } = await response.json();

SDK Key vs API Key (Different Purposes!)

SDK Key与API Key（用途不同！）

Credential	Used For	JWT Claim
SDK Key	CDN URL, JWT `app_key`	`app_key: "SDK_KEY"`
API Key	REST API calls (optional)	Not used in JWT

Common mistake: Using API Key instead of SDK Key in JWT

app_key

claim.

凭证	用途	JWT声明
SDK Key	CDN URL、JWT `app_key`	`app_key: "SDK_KEY"`
API Key	REST API调用（可选）	不用于JWT

常见错误: 在JWT

app_key

声明中使用API Key而不是SDK Key。

Session Limits

会话限制

Limit	Value	What Happens
Customers per session	1	Error 1012: `SESSION_CUSTOMER_COUNT_LIMIT`
Agents per session	5	Error 1013: `SESSION_AGENT_COUNT_LIMIT`
Active sessions per browser	1	Error 1004: `SESSION_COUNT_LIMIT`
PIN code length	10 chars max	Error 1008: `SESSION_PIN_INVALID_FORMAT`

限制	数值	触发结果
每个会话的客户数	1	错误1012: `SESSION_CUSTOMER_COUNT_LIMIT`
每个会话的坐席数	5	错误1013: `SESSION_AGENT_COUNT_LIMIT`
每个浏览器的活跃会话数	1	错误1004: `SESSION_COUNT_LIMIT`
PIN码最大长度	10个字符	错误1008: `SESSION_PIN_INVALID_FORMAT`

Session Timeout Behavior

会话超时行为

Event	Timeout	What Happens
Agent waiting for customer	3 minutes	Session ends automatically
Page refresh reconnection	2 minutes	Session ends if not reconnected
Reconnection attempts	2 times max	Session ends after 2 failed attempts

事件	超时时间	触发结果
坐席等待客户	3分钟	会话自动结束
页面刷新重连	2分钟	未重连则会话结束
重连尝试次数	最多2次	2次失败后会话结束

HTTPS Requirement

HTTPS要求

Problem: SDK doesn't load on HTTP sites.

Solution:

Production: Use HTTPS ✓
Development: Use a loopback host for local HTTP testing ✓
Development: Use a local HTTPS endpoint with a trusted/self-signed cert if required ✓

问题: SDK在HTTP站点上无法加载。

解决方案:

生产环境: 使用HTTPS ✓
开发环境: 使用回环主机进行本地HTTP测试 ✓
开发环境: 如有需要可使用带可信/自签名证书的本地HTTPS端点 ✓

Third-Party Cookies Required

需要第三方Cookie

Problem: Refresh reconnection doesn't work.

Solution: Enable third-party cookies in browser settings.

Affected scenarios:

Browser privacy mode
Safari with "Prevent cross-site tracking" enabled
Chrome with "Block third-party cookies" enabled

问题: 刷新重连功能不生效。

解决方案: 在浏览器设置中启用第三方Cookie。

受影响场景:

浏览器隐私模式
Safari开启「防止跨站点跟踪」
Chrome开启「阻止第三方Cookie」

Distribution Method Confusion

分发方式说明

Method	Use Case	Agent Integration	BYOP Required
CDN	Most use cases	Zoom-hosted iframe	No (auto PIN)
npm	Custom agent UI, full control	Custom npm integration	Yes (required)

Key Insight: If you want npm integration, you must use BYOP (Bring Your Own PIN) mode.

方式	适用场景	坐席集成	是否需要BYOP
CDN	大多数场景	Zoom托管的iframe	否（自动生成PIN）
npm	自定义坐席UI、完全可控	自定义npm集成	是（必须）

核心要点: 如果你要使用npm集成，必须使用BYOP（自带PIN）模式。

Cross-Origin Iframe Handling

跨域Iframe处理

Problem: Cobrowse doesn't work in cross-origin iframes.

Solution: Inject SDK snippet into cross-origin iframes:

html

<script>
const ZOOM_SDK_KEY = "YOUR_SDK_KEY_HERE";

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

Same-origin iframes: No extra setup needed.

问题: 协同浏览在跨域iframe中无法工作。

解决方案: 将SDK代码片段注入到跨域iframe中：

html

<script>
const ZOOM_SDK_KEY = "YOUR_SDK_KEY_HERE";

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

同域iframe: 无需额外设置。

Known Limitations

已知限制

Synchronization Limits

同步限制

Not synchronized:

HTML5 Canvas elements
WebGL content
Audio and Video elements
Shadow DOM
PDF rendered with Canvas
Web Components

Partially synchronized:

Drop-down boxes (only selected result)
Date pickers (only selected result)
Color pickers (only selected result)

不支持同步:

HTML5 Canvas元素
WebGL内容
音频和视频元素
Shadow DOM
使用Canvas渲染的PDF
Web Components

部分支持同步:

下拉框（仅同步选中结果）
日期选择器（仅同步选中结果）
颜色选择器（仅同步选中结果）

Rendering Limits

渲染限制

High-resolution images may be compressed
Different screen sizes may cause CSS media query differences
Cross-origin images may not render (CORS restrictions)
Cross-origin fonts may not render (CORS restrictions)

高分辨率图片可能会被压缩
不同屏幕尺寸可能导致CSS媒体查询差异
跨域图片可能无法渲染（CORS限制）
跨域字体可能无法渲染（CORS限制）

Masking Limits

屏蔽限制

Supported:

Text nodes ✓
Form inputs ✓
Select elements ✓

Not supported:

```
<img>
```
elements ✗
Links ✗

支持:

文本节点 ✓
表单输入框 ✓
选择器元素 ✓

不支持:

```
<img>
```
元素 ✗
链接 ✗

Complete Documentation Library

完整文档库

This skill includes comprehensive guides organized by category:

本技能包含按类别组织的完整指南：

Core Concepts

核心概念

Two Roles Pattern - Customer vs Agent architecture
Session Lifecycle - Complete flow from start to end
JWT Authentication - Token structure and signing
Distribution Methods - CDN vs npm (BYOP)

双角色模式 - 客户与坐席架构
会话生命周期 - 从启动到结束的完整流程
JWT鉴权 - Token结构与签名
分发方式 - CDN与npm（BYOP）对比

Examples

示例

Customer Integration - Complete customer-side setup
Agent Integration - Iframe and npm agent setups
Annotations - Drawing tools configuration
Privacy Masking - Field masking patterns
Remote Assist - Agent page control
Multi-Tab Persistence - Cross-tab sessions
BYOP Custom PIN - Custom PIN codes

客户端集成 - 完整的客户端设置
坐席端集成 - Iframe和npm坐席设置
标注工具 - 绘制工具配置
隐私屏蔽 - 字段屏蔽模式
远程协助 - 坐席页面控制
多标签页持久化 - 跨标签页会话
BYOP自定义PIN - 自定义PIN码

References

参考文档

API Reference - Complete SDK methods and events
Settings Reference - All initialization settings
Error Codes - Complete error reference
Session Events - All event types

API参考 - 完整的SDK方法与事件
配置项参考 - 所有初始化配置项
错误码 - 完整错误参考
会话事件 - 所有事件类型

Troubleshooting

故障排查

Common Issues - Quick diagnostics
Error Codes - Error code reference
CORS and CSP - Cross-origin configuration
Browser Compatibility - Browser support

常见问题 - 快速诊断
错误码 - 错误码参考
CORS与CSP - 跨域配置
浏览器兼容性 - 浏览器支持

Resources

资源

Official Docs: https://developers.zoom.us/docs/cobrowse-sdk/
API Reference: https://marketplacefront.zoom.us/sdk/cobrowse/
Quickstart Repo: https://github.com/zoom/CobrowseSDK-Quickstart
Auth Endpoint Sample: https://github.com/zoom/cobrowsesdk-auth-endpoint-sample
Dev Forum: https://devforum.zoom.us/
Developer Blog: https://developers.zoom.us/blog/?category=zoom-cobrowse-sdk

Need help? Start with Integrated Index section below for complete navigation.

官方文档: https://developers.zoom.us/docs/cobrowse-sdk/
API参考: https://marketplacefront.zoom.us/sdk/cobrowse/
快速入门仓库: https://github.com/zoom/CobrowseSDK-Quickstart
鉴权端点示例: https://github.com/zoom/cobrowsesdk-auth-endpoint-sample
开发者论坛: https://devforum.zoom.us/
开发者博客: https://developers.zoom.us/blog/?category=zoom-cobrowse-sdk

需要帮助？ 从下方的集成索引章节开始查找完整导航。

Integrated Index

集成索引

This section was migrated from
SKILL.md
.

Complete navigation guide for all Cobrowse SDK documentation.

本章节迁移自
SKILL.md
。

所有Cobrowse SDK文档的完整导航指南。

Getting Started (Start Here!)

入门指南（从这里开始！）

If you're new to Zoom Cobrowse SDK, follow this learning path:

SKILL.md - Main overview and quick start
5-Minute Runbook - Preflight checks for common failures
Get Started Guide - Step-by-step setup from credentials to first session
Session Lifecycle - Understand the complete customer and agent flow
Customer Integration - Integrate SDK into your website
Agent Integration - Set up agent portal

如果你是初次使用Zoom Cobrowse SDK，请遵循以下学习路径：

SKILL.md - 主概览与快速入门
5分钟运行手册 - 常见故障预检清单
入门指南 - 从凭证到首个会话的分步设置
会话生命周期 - 了解完整的客户与坐席流程
客户端集成 - 将SDK集成到你的网站
坐席端集成 - 搭建坐席门户

Core Concepts

核心概念

Foundational concepts you need to understand:

Two Roles Pattern - Customer (role_type=1) vs Agent (role_type=2) architecture
Session Lifecycle - Complete flow: init → start → PIN → connect → end
JWT Authentication - Token structure, signing, SDK Key vs API Key
Distribution Methods - CDN vs npm (BYOP mode)

你需要了解的基础概念：

双角色模式 - 客户（role_type=1）与坐席（role_type=2）架构
会话生命周期 - 完整流程：初始化 → 启动 → PIN → 连接 → 结束
JWT鉴权 - Token结构、签名、SDK Key与API Key区别
分发方式 - CDN与npm（BYOP模式）对比

Examples and Patterns

示例与模式

Complete working examples for common scenarios:

常见场景的完整可运行示例：

Session Management

会话管理

Customer Integration - Complete customer-side implementation (CDN and npm)
Agent Integration - Iframe and npm agent setup patterns
Session Events - Handle all session lifecycle events
Auto-Reconnection - Page refresh and session recovery

客户端集成 - 完整的客户端实现（CDN与npm）
坐席端集成 - Iframe和npm坐席设置模式
会话事件 - 处理所有会话生命周期事件
自动重连 - 页面刷新与会话恢复

Features

功能

Annotation Tools - Enable drawing, highlighting, vanishing pen
Privacy Masking - Mask sensitive fields with CSS selectors
Remote Assist - Agent can scroll customer's page
Multi-Tab Persistence - Session continues across browser tabs
BYOP Custom PIN - Bring Your Own PIN with npm integration

标注工具 - 启用绘制、高亮、消失笔
隐私屏蔽 - 使用CSS选择器屏蔽敏感字段
远程协助 - 坐席可滚动客户页面
多标签页持久化 - 会话可跨浏览器标签页延续
BYOP自定义PIN - 通过npm集成实现自带PIN

References

参考文档

Complete API and configuration references:

完整的API与配置参考：

SDK Reference

SDK参考

API Reference - All SDK methods and interfaces
- ZoomCobrowseSDK.init()
- session.start()
- session.join()
- session.end()
- session.on()
- session.getSessionInfo()
Settings Reference - All initialization settings
- allowAgentAnnotation
- allowCustomerAnnotation
- piiMask
- remoteAssist
- multiTabSessionPersistence
Session Events Reference - All event types
- pincode_updated
- session_started
- session_ended
- agent_joined
- agent_left
- session_error
- session_reconnecting
- remote_assist_started
- remote_assist_stopped

API参考 - 所有SDK方法与接口
- ZoomCobrowseSDK.init()
- session.start()
- session.join()
- session.end()
- session.on()
- session.getSessionInfo()
配置项参考 - 所有初始化配置项
- allowAgentAnnotation
- allowCustomerAnnotation
- piiMask
- remoteAssist
- multiTabSessionPersistence
会话事件参考 - 所有事件类型
- pincode_updated
- session_started
- session_ended
- agent_joined
- agent_left
- session_error
- session_reconnecting
- remote_assist_started
- remote_assist_stopped

Error Reference

错误参考

Error Codes - Complete error code reference
- 1001-1017: Session errors
- 2001: Token errors
- 9999: Service errors

错误码 - 完整错误码参考
- 1001-1017: 会话错误
- 2001: Token错误
- 9999: 服务错误

Official Documentation

官方文档

Get Started - Official get started documentation (crawled)
Features - Official features documentation (crawled)
Authorization - Official JWT authorization docs (crawled)
API Documentation - Crawled API reference docs

入门指南 - 官方入门文档（爬取）
功能特性 - 官方功能文档（爬取）
授权 - 官方JWT授权文档（爬取）
API文档 - 爬取的API参考文档

Troubleshooting

故障排查

Quick diagnostics and common issue resolution:

Common Issues - Quick fixes for frequent problems
- SDK not loading
- Token generation fails
- Agent can't connect
- Fields not masked
- Session doesn't reconnect after refresh
Error Codes - Error code lookup and solutions
- Session start/join failures (1001, 1011, 1016)
- Session limit errors (1002, 1004, 1012, 1013, 1015)
- PIN code errors (1006, 1008, 1009, 1010)
- Token errors (2001)
CORS and CSP - Cross-origin and Content Security Policy setup
- Access-Control-Allow-Origin headers
- Content-Security-Policy headers
- Cross-origin iframe handling
- Same-origin iframe handling
Browser Compatibility - Browser requirements and limitations
- Supported browsers (Chrome 80+, Firefox 78+, Safari 14+, Edge 80+)
- Internet Explorer not supported
- Privacy mode limitations
- Third-party cookie requirements

快速诊断与常见问题解决：

常见问题 - 高频问题的快速修复
- SDK无法加载
- Token生成失败
- 坐席无法连接
- 字段未被屏蔽
- 刷新后会话无法重连
错误码 - 错误码查询与解决方案
- 会话启动/加入失败（1001, 1011, 1016）
- 会话限制错误（1002, 1004, 1012, 1013, 1015）
- PIN码错误（1006, 1008, 1009, 1010）
- Token错误（2001）
CORS与CSP - 跨域与内容安全策略设置
- Access-Control-Allow-Origin头
- Content-Security-Policy头
- 跨域iframe处理
- 同域iframe处理
浏览器兼容性 - 浏览器要求与限制
- 支持的浏览器（Chrome 80+, Firefox 78+, Safari 14+, Edge 80+）
- 不支持Internet Explorer
- 隐私模式限制
- 第三方Cookie要求

By Use Case

按使用场景分类

Find documentation by what you're trying to do:

按你想要实现的功能查找文档：

I want to...

我想要...

Set up cobrowse for the first time:

Get Started Guide
JWT Authentication
Customer Integration
Agent Integration

Add annotation tools:

Annotation Tools Example
[Settings Reference - allowAgentAnnotation](references/settings-reference.md#allowa gentannotation)
Settings Reference - allowCustomerAnnotation

Hide sensitive data from agents:

Privacy Masking Example
Settings Reference - piiMask

Let agents control customer's page:

Remote Assist Example
Settings Reference - remoteAssist

Use custom PIN codes:

BYOP Custom PIN Example
JWT Authentication - enable_byop

Handle page refreshes:

Auto-Reconnection Example
Session Lifecycle - Recovery

Integrate with npm (not CDN):

BYOP Custom PIN Example
Distribution Methods

Debug session connection issues:

Common Issues
Error Codes
Session Events - session_error

Configure CORS and CSP headers:

CORS and CSP Guide
Browser Compatibility

首次搭建协同浏览：

入门指南
JWT鉴权
客户端集成
坐席端集成

添加标注工具：

标注工具示例
配置项参考 - allowAgentAnnotation
配置项参考 - allowCustomerAnnotation

对坐席隐藏敏感数据：

隐私屏蔽示例
配置项参考 - piiMask

让坐席控制客户页面：

远程协助示例
配置项参考 - remoteAssist

使用自定义PIN码：

BYOP自定义PIN示例
JWT鉴权 - enable_byop

处理页面刷新：

自动重连示例
会话生命周期 - 恢复

使用npm集成（非CDN）：

BYOP自定义PIN示例
分发方式

调试会话连接问题：

常见问题
错误码
会话事件 - session_error

配置CORS和CSP头：

CORS与CSP指南
浏览器兼容性

By Error Code

按错误码分类

Quick lookup for error code solutions:

快速查找错误码解决方案：

Session Errors

会话错误

1001 (SESSION_START_FAILED) → Error Codes
1002 (SESSION_CONNECTING_IN_PROGRESS) → Error Codes
1004 (SESSION_COUNT_LIMIT) → Error Codes
1011 (SESSION_JOIN_FAILED) → Error Codes
1012 (SESSION_CUSTOMER_COUNT_LIMIT) → Error Codes
1013 (SESSION_AGENT_COUNT_LIMIT) → Error Codes
1015 (SESSION_DUPLICATE_USER) → Error Codes
1016 (NETWORK_ERROR) → Error Codes
1017 (SESSION_CANCELING_IN_PROGRESS) → Error Codes

1001 (SESSION_START_FAILED) → 错误码
1002 (SESSION_CONNECTING_IN_PROGRESS) → 错误码
1004 (SESSION_COUNT_LIMIT) → 错误码
1011 (SESSION_JOIN_FAILED) → 错误码
1012 (SESSION_CUSTOMER_COUNT_LIMIT) → 错误码
1013 (SESSION_AGENT_COUNT_LIMIT) → 错误码
1015 (SESSION_DUPLICATE_USER) → 错误码
1016 (NETWORK_ERROR) → 错误码
1017 (SESSION_CANCELING_IN_PROGRESS) → 错误码

PIN Errors

PIN错误

1006 (SESSION_JOIN_PIN_NOT_FOUND) → Error Codes
1008 (SESSION_PIN_INVALID_FORMAT) → Error Codes
1009 (SESSION_START_PIN_REQUIRED) → Error Codes
1010 (SESSION_START_PIN_CONFLICT) → Error Codes

1006 (SESSION_JOIN_PIN_NOT_FOUND) → 错误码
1008 (SESSION_PIN_INVALID_FORMAT) → 错误码
1009 (SESSION_START_PIN_REQUIRED) → 错误码
1010 (SESSION_START_PIN_CONFLICT) → 错误码

Auth Errors

鉴权错误

2001 (TOKEN_INVALID) → Error Codes

2001 (TOKEN_INVALID) → 错误码

Service Errors

服务错误

9999 (UNDEFINED) → Error Codes

9999 (UNDEFINED) → 错误码

Official Resources

官方资源

External documentation and samples:

Official Docs: https://developers.zoom.us/docs/cobrowse-sdk/
API Reference: https://marketplacefront.zoom.us/sdk/cobrowse/
Quickstart Repo: https://github.com/zoom/CobrowseSDK-Quickstart
Auth Endpoint Sample: https://github.com/zoom/cobrowsesdk-auth-endpoint-sample
Dev Forum: https://devforum.zoom.us/
Developer Blog: https://developers.zoom.us/blog/?category=zoom-cobrowse-sdk

外部文档与示例：

官方文档: https://developers.zoom.us/docs/cobrowse-sdk/
API参考: https://marketplacefront.zoom.us/sdk/cobrowse/
快速入门仓库: https://github.com/zoom/CobrowseSDK-Quickstart
鉴权端点示例: https://github.com/zoom/cobrowsesdk-auth-endpoint-sample
开发者论坛: https://devforum.zoom.us/
开发者博客: https://developers.zoom.us/blog/?category=zoom-cobrowse-sdk

Documentation Structure

文档结构

cobrowse-sdk/
├── SKILL.md                    # Main skill entry point
├── SKILL.md                    # This file - complete navigation
├── get-started.md              # Step-by-step setup guide
│
├── concepts/                   # Core concepts
│   ├── two-roles-pattern.md
│   ├── session-lifecycle.md
│   ├── jwt-authentication.md
│   └── distribution-methods.md
│
├── examples/                   # Working examples
│   ├── customer-integration.md
│   ├── agent-integration.md
│   ├── annotations.md
│   ├── privacy-masking.md
│   ├── remote-assist.md
│   ├── multi-tab-persistence.md
│   ├── byop-custom-pin.md
│   ├── session-events.md
│   └── auto-reconnection.md
│
├── references/                 # API and config references
│   ├── api-reference.md        # SDK methods
│   ├── settings-reference.md   # Init settings
│   ├── session-events.md       # Event types
│   ├── error-codes.md          # Error reference
│   ├── get-started.md          # Official docs (crawled)
│   ├── features.md             # Official docs (crawled)
│   ├── authorization.md        # Official docs (crawled)
│   └── api.md                  # API docs (crawled)
│
└── troubleshooting/            # Problem resolution
    ├── common-issues.md
    ├── error-codes.md
    ├── cors-csp.md
    └── browser-compatibility.md

cobrowse-sdk/
├── SKILL.md                    # 主技能入口
├── SKILL.md                    # 本文件 - 完整导航
├── get-started.md              # 分步设置指南
│
├── concepts/                   # 核心概念
│   ├── two-roles-pattern.md
│   ├── session-lifecycle.md
│   ├── jwt-authentication.md
│   └── distribution-methods.md
│
├── examples/                   # 可运行示例
│   ├── customer-integration.md
│   ├── agent-integration.md
│   ├── annotations.md
│   ├── privacy-masking.md
│   ├── remote-assist.md
│   ├── multi-tab-persistence.md
│   ├── byop-custom-pin.md
│   ├── session-events.md
│   └── auto-reconnection.md
│
├── references/                 # API与配置参考
│   ├── api-reference.md        # SDK方法
│   ├── settings-reference.md   # 初始化配置
│   ├── session-events.md       # 事件类型
│   ├── error-codes.md          # 错误参考
│   ├── get-started.md          # 官方文档（爬取）
│   ├── features.md             # 官方文档（爬取）
│   ├── authorization.md        # 官方文档（爬取）
│   └── api.md                  # API文档（爬取）
│
└── troubleshooting/            # 问题解决
    ├── common-issues.md
    ├── error-codes.md
    ├── cors-csp.md
    └── browser-compatibility.md

Search Tips

搜索技巧

Find by keyword:

"annotation" → Annotation Tools
"mask" or "privacy" → Privacy Masking
"PIN" or "custom PIN" → BYOP Custom PIN
"JWT" or "token" → JWT Authentication
"error" → Error Codes
"CORS" or "CSP" → CORS and CSP
"iframe" → Agent Integration
"npm" → Distribution Methods, BYOP
"refresh" or "reconnect" → Auto-Reconnection
"agent" → Agent Integration, Two Roles Pattern
"customer" → Customer Integration, Two Roles Pattern

Not finding what you need? Check the Official Documentation or ask on the Dev Forum.

按关键词查找：

"annotation" → 标注工具
"mask"或"privacy" → 隐私屏蔽
"PIN"或"custom PIN" → BYOP自定义PIN
"JWT"或"token" → JWT鉴权
"error" → 错误码
"CORS"或"CSP" → CORS与CSP
"iframe" → 坐席端集成
"npm" → 分发方式, BYOP
"refresh"或"reconnect" → 自动重连
"agent" → 坐席端集成, 双角色模式
"customer" → 客户端集成, 双角色模式

找不到你需要的内容？ 查看官方文档或在开发者论坛提问。

Environment Variables

环境变量

See references/environment-variables.md for standardized
```
.env
```
keys and where to find each value.

查看references/environment-variables.md了解标准化的
```
.env
```
键以及每个值的获取位置。