anthropics/build-zoom-meeting-sdk-app
Reference skill for Zoom Meeting SDK. Use after routing to a meeting-embed workflow when implementing real Zoom meeting joins, platform-specific SDK behavior, auth and join flows, waiting room issues, or meeting bot patterns.
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill build-zoom-meeting-sdk-appBackground reference for embedded Zoom meetings across web, mobile, desktop, and Linux bot environments. Prefer build-zoom-meeting-app or build-zoom-bot first, then route here for platform detail.
Embed the full Zoom meeting experience into web, mobile, desktop, and headless integrations.
join_url links.join_url is not a Meeting SDK join payload.> Need help with OAuth or signatures? See the zoom-oauth skill for authentication flows.
> Need pre-join diagnostics on web? Use probe-sdk before Meeting SDK init/join to gate low-readiness devices/networks.
> Start troubleshooting fast: Use the 5-Minute Runbook before deep debugging.
<script src="https://source.zoom.us/3.1.6/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/3.1.6/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/3.1.6/zoom-meeting-3.1.6.min.js"></script>
<script>
// CDN provides ZoomMtg (Client View - full page)
// For ZoomMtgEmbedded (Component View), use npm instead
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.init({
leaveUrl: window.location.href,
patchJsMedia: true,
disableCORP: !window.crossOriginIsolated,
success: function() {
ZoomMtg.join({
sdkKey: 'YOUR_SDK_KEY',
signature: 'YOUR_SIGNATURE', // Generate server-side!
meetingNumber: 'MEETING_NUMBER',
userName: 'User Name',
passWord: '', // Note: camelCase with capital W
success: function(res) { console.log('Joined'); },
error: function(err) { console.error(err); }
});
},
error: function(err) { console.error(err); }
});
</script>
| Distribution | Global Object | View Type | API Style |
|--------------|---------------|-----------|-----------|
| CDN (zoom-meeting-{ver}.min.js) | ZoomMtg | Client View (full-page) | Callbacks |
| npm (@zoom/meetingsdk) | ZoomMtgEmbedded | Component View (embeddable) | Promises |
Never expose SDK Secret in client code. Generate signatures server-side:
// server.js (Node.js example)
const KJUR = require('jsrsasign');
app.post('/api/signature', (req, res) => {
const { meetingNumber, role } = req.body;
const iat = Math.floor(Date.now() / 1000) - 30;
const exp = iat + 60 * 60 * 2;
const header = { alg: 'HS256', typ: 'JWT' };
const payload = {
sdkKey: process.env.ZOOM_SDK_KEY,
mn: String(meetingNumber).replace(/\D/g, ''),
role: parseInt(role, 10),
iat, exp, tokenExp: exp
};
const signature = KJUR.jws.JWS.sign('HS256',
JSON.stringify(header),
JSON.stringify(payload),
process.env.ZOOM_SDK_SECRET
);
res.json({ signature, sdkKey: process.env.ZOOM_SDK_KEY });
});
Global * { margin: 0; } breaks Zoom's UI. Scope your styles:
/* BAD */
* { margin: 0; padding: 0; }
/* GOOD */
.your-app, .your-app * { box-sizing: border-box; }
If toolbar falls off screen, scale down the Zoom UI:
#zmmtg-root {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
/* Critical for SPAs (React/Next/etc): ensure Zoom UI isn't behind your app shell/overlays. */
z-index: 9999 !important;
transform: scale(0.95) !important;
transform-origin: top center !important;
}
Client View takes over full page. Hide your UI:
// In ZoomMtg.init success callback:
document.documentElement.classList.add('meeting-active');
document.body.classList.add('meeting-active');
body.meeting-active .your-app { display: none !important; }
body.meeting-active { background: #000 !important; }
Meeting SDK provides Zoom's UI with customization options:
| View | Description |
|------|-------------|
| Component View | Extractable, customizable UI - embed meeting in a div |
| Client View | Full-page Zoom UI experience |
Note: Unlike Video SDK where you build the UI from scratch, Meeting SDK uses Zoom's UI as the base with customization on top.
| Concept | Description |
|---------|-------------|
| SDK Key/Secret | Credentials from Marketplace |
| Signature | JWT signed with SDK Secret |
| Component View | Extractable, customizable UI (Web) |
| Client View | Full-page Zoom UI (Web) |
| Type | Repository | Stars |
|------|------------|-------|
| Linux Headless | meetingsdk-headless-linux-sample | 4 |
| Linux Raw Data | meetingsdk-linux-raw-recording-sample | 0 |
| Web | meetingsdk-web-sample | 643 |
| Web NPM | meetingsdk-web | 324 |
| React | meetingsdk-react-sample | 177 |
| Auth | meetingsdk-auth-endpoint-sample | 124 |
| Angular | meetingsdk-angular-sample | 60 |
| Vue.js | meetingsdk-vuejs-sample | 42 |
Full list: See general/references/community-repos.md
.env keys and where to find each value.Take anthropics/build-zoom-meeting-sdk-app from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.