Collaborative Apps

Build real-time shared experiences across meeting participants.

Overview

Collaborative Zoom Apps let multiple participants interact with the same shared state simultaneously - like Google Docs for Zoom meetings. Examples: shared whiteboards, polls, text editors, dashboards.

Skills Needed

zoom-apps-sdk (Collaborate Mode, App Communication) - Primary
oauth - Authentication

Synchronization Patterns

Pattern	Technology	Best For	Complexity
SDK messaging	connect() + postMessage()	Simple state (counters, toggles)	Low
Server relay	Socket.io / WebSocket	Polls, games, dashboards	Medium
CRDT sync	Y.js + WebRTC	Text editors, whiteboards	High

Pattern 1: SDK Messaging (Simplest)

No server needed for state sync:

await zoomSdk.connect();

// Send state change
await zoomSdk.postMessage({
  payload: JSON.stringify({ type: 'vote', option: 'A' })
});

// Receive state changes
zoomSdk.addEventListener('onMessage', (event) => {
  const data = JSON.parse(event.payload);
  applyChange(data);
});

Pattern 2: Server Relay

Your backend is the source of truth:

const socket = io('https://your-server.com');
const { meetingUUID } = await zoomSdk.getMeetingUUID();
socket.emit('join', { room: meetingUUID });

socket.on('state-update', (state) => renderApp(state));
socket.emit('action', { type: 'vote', option: 'A' });

Pattern 3: CRDT (Conflict-Free)

Best for concurrent editing (text, drawings):

import * as Y from 'yjs';
import { WebrtcProvider } from 'y-webrtc';

const { meetingUUID } = await zoomSdk.getMeetingUUID();
const ydoc = new Y.Doc();
const provider = new WebrtcProvider(meetingUUID, ydoc);
// Changes sync automatically via CRDT

Meeting UUID as Room ID

Use getMeetingUUID() as the room identifier for state synchronization:

const { meetingUUID } = await zoomSdk.getMeetingUUID();
// Same UUID for all participants in the same meeting/room
// Different UUID in breakout rooms

Detailed Guides

Collaborate Mode Example - Complete implementation
App Communication - Instance messaging
Breakout Rooms - Cross-room state sync
Sample app: https://github.com/zoom/zoomapps-texteditor-vuejs

Skill Chain

zoom-apps-sdk (Collaborate + Communication)  -->  oauth (authorization)

2.6 KiB Raw Permalink Blame History