Token导航 LogoToken导航TokenDH.com
开发敏感数据github未标认证来源可访问许可证需确认审计提醒

zoom-cobrowse-sdkzoom cobrowse SDK 命令行

Agent Skill

zoom-cobrowse-sdk 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息,适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态,以及是否会触发联网、命令执行或文件读写。

总安装

6,634

周安装

271

GitHub Stars

11,684

下载量

2,146
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

GitHub

来源数

2

许可证

unknown

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:zoom-cobrowse-sdk(zoom cobrowse SDK 命令行)
来源仓库:https://github.com/anthropics/knowledge-work-plugins
仓库路径:skills/zoom-cobrowse-sdk
安装命令:
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill zoom-cobrowse-sdk
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill zoom-cobrowse-sdk

简介

zoom-cobrowse-sdk 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息。

  • 适合在 Codex、Claude、Cursor、Gemini CLI 中围绕仓库状态、代码变更或协作事项进行整理。
  • 通过 npx skills add 命令从指定 GitHub 仓库安装并使用。
  • 安装前建议确认权限范围、维护状态,以及是否会触发联网、命令执行或文件读写。
  • 适用宿主包括 Codex、Claude、Cursor、Gemini CLI,接入前应确认版本、权限和运行环境要求。

SKILL.md

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 - Complete setup from credentials to first session
  2. Session Lifecycle - Understanding customer and agent flows
  3. JWT Authentication - Token generation and security
  4. Customer Integration - Integrate SDK into your website
  5. Agent Integration - Set up agent portal (iframe or npm)

Core Concepts:

Features:

Troubleshooting:

Reference:

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:

Rolerole_typeIntegrationJWT RequiredPurpose
Customer1Website integration (CDN or npm)YesUser who shares their browser session
Agent2Iframe (CDN) or npm (BYOP only)YesSupport 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

  1. 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.

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

Zoom Account Requirements

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

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

Credentials Overview

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

CredentialTypeUsed ForExposure Safe?
SDK KeyPublicCDN URL, JWT app_key claim✓ Yes (client-side)
SDK SecretPrivateSign JWTs✗ No (server-side only)
API KeyPrivateREST API calls (optional)✗ No (server-side only)
API SecretPrivateREST 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.

Quick Start

Step 1: Get SDK Credentials

  1. Go to Zoom Marketplace
  2. Open your Video SDK App (or create one)
  3. Navigate to the Cobrowse tab
  4. Copy your credentials:

- SDK Key - SDK Secret - API Key (optional) - API Secret (optional)

Step 2: Set Up Token Server

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

git clone https://github.com/zoom/cobrowsesdk-auth-endpoint-sample.git
cd cobrowsesdk-auth-endpoint-sample
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

npm start

Token endpoint:

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

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

Step 3: Customer Side Integration (CDN)

<!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>

Step 4: Agent Side Integration (Iframe)

<!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>

Step 5: Test the Integration

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

Key Features

1. Annotation Tools

Both customer and agent can draw on the shared screen:

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

2. Privacy Masking

Hide sensitive fields from agents using CSS selectors:

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)

3. Remote Assist

Agent can scroll the customer's page:

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

4. Multi-Tab Session Persistence

Session continues when customer opens new tabs:

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

Session Lifecycle

Customer Flow

  1. Load SDK → CDN script loads ZoomCobrowseSDK
  2. InitializeZoomCobrowseSDK.init(settings, callback)
  3. Fetch JWT → Request token from your server (role_type=1)
  4. Start Sessionsession.start({sdkToken})
  5. PIN Generatedpincode_updated event fires
  6. Share PIN → Customer gives 6-digit PIN to agent
  7. Agent Joinsagent_joined event fires
  8. Session Active → Real-time synchronization begins
  9. End Sessionsession.end() or agent leaves

Agent Flow

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

Session Recovery (Auto-Reconnect)

When customer refreshes the page:

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.

Critical Gotchas and Best Practices

⚠️ CRITICAL: SDK Secret Must Stay Server-Side

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)
// ❌ 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 Key vs API Key (Different Purposes!)

CredentialUsed ForJWT Claim
SDK KeyCDN URL, JWT app_keyapp_key: "SDK_KEY"
API KeyREST API calls (optional)Not used in JWT

Common mistake: Using API Key instead of SDK Key in JWT app_key claim.

Session Limits

LimitValueWhat Happens
Customers per session1Error 1012: SESSION_CUSTOMER_COUNT_LIMIT
Agents per session5Error 1013: SESSION_AGENT_COUNT_LIMIT
Active sessions per browser1Error 1004: SESSION_COUNT_LIMIT
PIN code length10 chars maxError 1008: SESSION_PIN_INVALID_FORMAT

Session Timeout Behavior

EventTimeoutWhat Happens
Agent waiting for customer3 minutesSession ends automatically
Page refresh reconnection2 minutesSession ends if not reconnected
Reconnection attempts2 times maxSession ends after 2 failed attempts

HTTPS Requirement

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 ✓

Third-Party Cookies Required

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

Distribution Method Confusion

MethodUse CaseAgent IntegrationBYOP Required
CDNMost use casesZoom-hosted iframeNo (auto PIN)
npmCustom agent UI, full controlCustom npm integrationYes (required)

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

Cross-Origin Iframe Handling

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

Solution: Inject SDK snippet into cross-origin iframes:

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

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)

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)

Masking Limits

Supported:

  • Text nodes ✓
  • Form inputs ✓
  • Select elements ✓

Not supported:

  • <img> elements ✗
  • Links ✗

Complete Documentation Library

This skill includes comprehensive guides organized by category:

Core Concepts

Examples

References

Troubleshooting

Resources


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


Integrated Index

*This section was migrated from SKILL.md.*

Complete navigation guide for all Cobrowse SDK documentation.

Getting Started (Start Here!)

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

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

Core Concepts

Foundational concepts you need to understand:

Examples and Patterns

Complete working examples for common scenarios:

Session Management

Features

References

Complete API and configuration references:

SDK Reference

- 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

- 1001-1017: Session errors - 2001: Token errors - 9999: Service errors

Official Documentation

Troubleshooting

Quick diagnostics and common issue resolution:

- SDK not loading - Token generation fails - Agent can't connect - Fields not masked - Session doesn't reconnect after refresh

- 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

- Supported browsers (Chrome 80+, Firefox 78+, Safari 14+, Edge 80+) - Internet Explorer not supported - Privacy mode limitations - Third-party cookie requirements

By Use Case

Find documentation by what you're trying to do:

I want to...

Set up cobrowse for the first time:

Add annotation tools:

Hide sensitive data from agents:

Let agents control customer's page:

Use custom PIN codes:

Handle page refreshes:

Integrate with npm (not CDN):

Debug session connection issues:

Configure CORS and CSP headers:

By Error Code

Quick lookup for error code solutions:

Session Errors

PIN Errors

Auth Errors

Service Errors

Official Resources

External documentation and samples:

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

Search Tips

Find by keyword:


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

Environment Variables

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明,方便继续核验

能力 4

展示第三方安全扫描或审计结果

安装后应在对应宿主中按原始 README 的触发条件使用;具体调用方式请以来源页面和 README 为准。

平台分布

Codex

36.58%
按下载量换算785

Claude

27.72%
按下载量换算595

Cursor

18.54%
按下载量换算398

Gemini CLI

9.86%
按下载量换算212

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

可疑

权限和风险

敏感数据

该 Skill 可能接触密钥、Token、环境变量或敏感配置,应进入高风险复核队列,默认不自动发布。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。来源安全扫描存在 warning/failed 结果,不能写成本站确认安全。当前只有一个来源,正式发布前建议补源仓库或其他目录站核验。

来源信息

继续浏览同类 Skills