Embed Meetings

const client = ZoomMtgEmbedded.createClient();

client.init({
  zoomAppRoot: document.getElementById('meetingSDKElement'),
  language: 'en-US',
});

client.join({
  sdkKey: 'YOUR_SDK_KEY',
  signature: 'YOUR_SIGNATURE',
  meetingNumber: 'MEETING_NUMBER',
  userName: 'User Name',
});

import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';

// Create client
const client = ZoomMtgEmbedded.createClient();

// Initialize
await client.init({
  zoomAppRoot: document.getElementById('meetingSDKElement'),
  language: 'en-US',
  customize: {
    video: {
      isResizable: true,
      viewSizes: {
        default: { width: 1000, height: 600 },
        ribbon: { width: 300, height: 700 }
      }
    },
    meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
    toolbar: {
      buttons: [
        { text: 'Custom', className: 'CustomButton', onClick: () => console.log('Custom clicked') }
      ]
    }
  }
});

// Join meeting
await client.join({
  sdkKey: SDK_KEY,
  signature: signature,
  meetingNumber: '123456789',
  password: 'password',
  userName: 'John Doe',
  userEmail: 'john@example.com'
});

import { ZoomMtg } from '@zoom/meetingsdk';

// Load dependencies
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

// Initialize
ZoomMtg.init({
  leaveUrl: 'https://your-app.com/meeting-ended',
  success: () => {
    ZoomMtg.join({
      sdkKey: SDK_KEY,
      signature: signature,
      meetingNumber: '123456789',
      passWord: 'password',
      userName: 'John Doe',
      userEmail: 'john@example.com',
      success: (res) => {
        console.log('Joined meeting', res);
      },
      error: (err) => {
        console.error('Join error', err);
      }
    });
  }
});

// Hide specific UI elements
await client.init({
  zoomAppRoot: document.getElementById('meetingSDKElement'),
  customize: {
    // Hide meeting info
    meetingInfo: [],
    
    // Customize toolbar
    toolbar: {
      buttons: [
        // Add custom buttons
        {
          text: 'Info',
          className: 'info-btn',
          onClick: () => showInfo()
        }
      ]
    },
    
    // Video layout
    video: {
      viewSizes: {
        default: { width: 1280, height: 720 }
      },
      popper: {
        disableDraggable: false
      }
    },
    
    // Active speaker view
    activeStateEnabledMode: {
      enabled: true
    }
  }
});

// Change view programmatically
client.changeView('gallery');  // 'speaker' | 'gallery' | 'ribbon'

// Meeting status events
client.on('connection-change', (payload) => {
  const { state } = payload;
  switch (state) {
    case 'Connected':
      console.log('Connected to meeting');
      break;
    case 'Reconnecting':
      console.log('Reconnecting...');
      break;
    case 'Closed':
      console.log('Meeting ended');
      handleMeetingEnd();
      break;
  }
});

// User events
client.on('user-added', (payload) => {
  console.log('User joined:', payload);
});

client.on('user-removed', (payload) => {
  console.log('User left:', payload);
});

// Audio/video events
client.on('active-speaker', (payload) => {
  console.log('Active speaker:', payload.userId);
});

// Error handling
client.on('error', (payload) => {
  console.error('SDK Error:', payload);
});

// Leave meeting (participant)
client.leaveMeeting();

// End meeting (host only)
client.endMeeting();

// Handle leave URL (Client View)
// User is redirected to leaveUrl specified in init()