Skip to main content
zoom-cobrowse-sdk Reference skill for Zoom Cobrowse SDK. Use after routing to a collaborative-support workflow when implementing browser co-browsing, annotation tools, privacy masking, remote assist, or PIN-based session sharing.
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill zoom-cobrowse-sdkيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المزيد من هذا المستودع Claude as the trainer. Walks an SMB owner through connecting their first two tools, runs one recipe to prove immediate value, interviews them about their business (industry, size, top three headaches), stores that context persistently so every other skill benefits, and sets a weekly check-in cadence. Use when the owner is getting started or says any of: "set me up," "setup," "help me get set up," "get started," "help me get started," "get me started," "what can you do," "I'm new to this," or is in their first session.
Produces a one-page cross-functional business snapshot for SMB owners — cash position (QuickBooks), sales trend (PayPal/Square), pipeline movement (HubSpot), this week's commitments (Calendar), urgent watch-list items (Gmail/Slack), and the single most important thing needing attention today. Proactively tries every available connector and gracefully scopes to whatever is connected — one connector gives a partial pulse; the full stack gives the full picture. Trigger when the user asks how the business is doing, wants a snapshot, a weekly summary, a Monday brief, or says anything like "what am I missing" or "catch me up on the business."
Ranks the top-5 leads most worth calling today, supplies talking points from email history, blocks time on the calendar, and drafts follow-up messages. Accepts optional count and date arguments.
استنادا إلى تصنيف SOC المهني
SDK Overview The Zoom Cobrowse SDK is a JavaScript library that provides:
Real-Time Co-Browsing : Agent sees customer's browser activity livePIN-Based Sessions : Secure 6-digit PIN for customer-to-agent connectionAnnotation Tools : Drawing, highlighting, vanishing pen, rectangle, color pickerPrivacy Masking : CSS selector-based masking of sensitive form fieldsRemote Assist : Agent can scroll customer's page (with consent)Multi-Tab Persistence : Session continues when customer opens new tabsAuto-Reconnection : Session recovers from page refresh (2-minute window)Session Events : Real-time events for session state changesHTTPS 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:
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.
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
Zoom Workplace Account with SDK Universal CreditVideo SDK App created in Zoom MarketplaceCobrowse 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:
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.
Quick Start
Step 1: Get SDK Credentials
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)
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
cat > .env << EOF
ZOOM_SDK_KEY=your_sdk_key_here
ZOOM_SDK_SECRET=your_sdk_secret_here
PORT=4000
EOF
npm start
{
"role" : 1 ,
"userId" : "user123" ,
"userName" : "John Doe"
}
{
"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' ;
(function (r, a, b, f, c, d ) {
r[f] = r[f] || { init : function (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 >
<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;
session.on ("pincode_updated" , (payload ) => {
console .log ("PIN Code:" , payload.pincode );
alert (`Share this PIN with agent: ${payload.pincode} ` );
});
session.on ("session_started" , () => console .log ("Session started" ));
session.on ("agent_joined" , () => console .log ("Agent joined" ));
session.on ("agent_left" , () => console . </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 (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 ();
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
Open two separate browsers (or incognito + normal)
Customer browser : Open customer page, click "Start Cobrowse Session"Customer browser : Note the 6-digit PIN displayedAgent browser : Open agent page, enter the PIN codeBoth browsers : Session connects, agent can see customer's pageTest 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 ,
allowCustomerAnnotation : true
};
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" ,
maskCssSelectors : ".pii-mask, #ssn" ,
maskHTMLAttributes : "data-sensitive=true"
}
};
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 ,
remoteAssistTypes : ['scroll_page' ],
requireStopConfirmation : false
}
};
4. Multi-Tab Session Persistence Session continues when customer opens new tabs:
const settings = {
multiTabSessionPersistence : {
enable : true ,
stateCookieKey : '$$ZCB_SESSION$$'
}
};
Session Lifecycle
Customer Flow
Load SDK → CDN script loads ZoomCobrowseSDKInitialize → ZoomCobrowseSDK.init(settings, callback)Fetch JWT → Request token from your server (role_type=1)Start Session → session.start({ sdkToken })PIN Generated → pincode_updated event firesShare PIN → Customer gives 6-digit PIN to agentAgent Joins → agent_joined event firesSession Active → Real-time synchronization beginsEnd Session → session.end() or agent leaves
Agent Flow
Fetch JWT → Request token from your server (role_type=2)Load Iframe → Point to Zoom agent portal with tokenEnter PIN → Agent inputs customer's 6-digit PINConnect → session_joined event firesView Session → Agent sees customer's browserUse Tools → Annotations, remote assist, zoomLeave 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 ();
if (sessionInfo.sessionStatus === 'session_recoverable' ) {
session.join ();
} else {
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.
✓ SDK Key → Safe to expose (embedded in CDN URL)
✗ SDK Secret → Never expose (use for JWT signing server-side)
const jwt = signJWT (payload, 'YOUR_SDK_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!) 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.
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
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
HTTPS Requirement Problem : SDK doesn't load on HTTP sites.
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.
Browser privacy mode
Safari with "Prevent cross-site tracking" enabled
Chrome with "Block third-party cookies" enabled
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.
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 (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
HTML5 Canvas elements
WebGL content
Audio and Video elements
Shadow DOM
PDF rendered with Canvas
Web Components
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
Text nodes ✓
Form inputs ✓
Select elements ✓
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:
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
API Reference
ZoomCobrowseSDK.init()
session.start()
session.join()
session.end()
session.on()
session.getSessionInfo()
Settings Reference
allowAgentAnnotation
allowCustomerAnnotation
piiMask
remoteAssist
multiTabSessionPersistence
Session Events Reference
pincode_updated
session_started
session_ended
agent_joined
agent_left
session_error
session_reconnecting
remote_assist_started
remote_assist_stopped
Error Reference
Error Codes
1001-1017: Session errors
2001: Token errors
9999: Service errors
Official Documentation
Troubleshooting Quick diagnostics and common issue resolution:
Common Issues
SDK not loading
Token generation fails
Agent can't connect
Fields not masked
Session doesn't reconnect after refresh
Error Codes
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
Access-Control-Allow-Origin headers
Content-Security-Policy headers
Cross-origin iframe handling
Same-origin iframe handling
Browser Compatibility
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:
Hide sensitive data from agents:
Let agents control customer's page:
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
Environment Variables log
"Agent left"
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:"
document
getElementById
"cobrowse-btn"
addEventListener
"click"
async
const
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
await
json
start
sdkToken
