/component-view

name: zoom-meeting-sdk-web-component-view
description: |
  Zoom Meeting SDK Web - Component View. Embeddable Zoom meeting components with Promise-based API
  for flexible integration. Ideal for React/Vue/Angular apps and custom layouts. Uses ZoomMtgEmbedded
  with async/await patterns and embeddable UI containers.
user-invocable: false
triggers:
  - "meeting sdk component view"
  - "zoommtgembedded"
  - "zoomapproot"
  - "embeddable meeting ui"
  - "component view embedded zoom"
  - "custom meeting ui"
  - "custom zoom meeting ui"
  - "custom meeting video ui"
  - "custom video ui for meeting"

Zoom Meeting SDK Web - Component View

Embeddable Zoom meeting components for flexible integration into any web application. Component View provides Promise-based APIs and customizable UI.

This is the correct web skill for a **custom UI around a real Zoom meeting**. Do not route to Video SDK unless the user is building a non-meeting custom session product.

Overview

Component View uses `ZoomMtgEmbedded.createClient()` to create embeddable meeting components within a specific container element.

| Aspect | Details | |--------|---------| | **API Object** | `ZoomMtgEmbedded.createClient()` (instance) | | **API Style** | Promise-based (async/await) | | **UI** | Embeddable in any container | | **Password param** | `password` (lowercase) | | **Events** | `on()`/`off()` | | **Best For** | Custom layouts, React/Vue/Angular apps |

Installation

NPM

npm install @zoom/meetingsdk --save

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

CDN

<script src="https://source.zoom.us/{VERSION}/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/{VERSION}/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-embedded-{VERSION}.min.js"></script>

Complete Initialization Flow

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

// Step 1: Create client instance (do once, not on every render!)
const client = ZoomMtgEmbedded.createClient();

async function joinMeeting() {
  try {
    // Step 2: Get container element
    const meetingSDKElement = document.getElementById('meetingSDKElement');

    // Step 3: Initialize client
    await client.init({
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
      debug: true,
      patchJsMedia: true,
      leaveOnPageUnload: true,
    });

    // Step 4: Join meeting
    await client.join({
      signature: signature,
      sdkKey: sdkKey,
      meetingNumber: meetingNumber,
      userName: userName,
      password: password,  // lowercase!
      userEmail: userEmail,
    });

    console.log('Joined successfully!');
  } catch (error) {
    console.error('Failed to join:', error);
  }
}

client.init() - All Options

Required

| Parameter | Type | Description | |-----------|------|-------------| | `zoomAppRoot` | `HTMLElement` | Container element for meeting UI |

Display

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `language` | `string` | `'en-US'` | UI language | | `debug` | `boolean` | `false` | Enable debug logging |

Media

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | `patchJsMedia` | `boolean` | `false` | Auto-apply media fixes | | `leaveOnPageUnload` | `boolean` | `false` | Cleanup on page unload | | `enableHD` | `boolean` | `true` | Enable 720p video | | `enableFullHD` | `boolean` | `false` | Enable 1080p video |

Customization

| Parameter | Type | Description | |-----------|------|-------------| | `customize` | `object` | UI customization options | | `webEndpoint` | `string` | For ZFG: `'www.zoomgov.com'` | | `assetPath` | `string` | Custom path for AV libraries |

Customize Object

await client.init({
  zoomAppRoot: element,
  customize: {
    // Meeting info displayed
    meetingInfo: [
      'topic',
      'host', 
      'mn',
      'pwd',
      'telPwd',
      'invite',
      'participant',
      'dc',
      'enctype'
    ],
    
    // Video customization
    video: {
      isResizable: true,
      viewSizes: {
        default: {
          width: 1000,
          height: 600
        },
        ribbon: {
          width: 300,
          height: 700
        }
      },
      popper: {
        disableDraggable: false
      }
    },
    
    // Custom toolbar buttons
    toolbar: {
      buttons: [
        {
          text: 'Custom Button',
          className: 'custom-btn',
          onClick: () => {
            console.log('Custom button clicked');
          }
        }
      ]
    },
    
    // Active speaker indicator
    activeSpaker: {
      strokeColor: '#00FF00'
    }
  }
});

client.join() - All Options

Required

| Parameter | Type | Description | |-----------|------|-------------| | `signature` | `string` | SDK JWT from backend | | `sdkKey` | `string` | SDK Key / Client ID | | `meetingNumber` | `string \| number` | Meeting number | | `userName` | `string` | Display name |

Authentication

| Parameter | Type | When Required | Description | |-----------|------|---------------|-------------| | `password` | `string` | If set | Meeting password (lowercase!) | | `zak` | `string` | Starting as host | Host's ZAK token | | `tk` | `string` | Registration | Registrant token | | `userEmail` | `string` | Webinars | User email |

Event Listeners

Syntax

// Subscribe
client.on('event-name', callback);

// Unsubscribe
client.off('event-name', callback);

Connection Events

client.on('connection-change', (payload) => {
  // payload.state: 'Connecting', 'Connected', 'Reconnecting