Import SDK


The Web Meeting SDK can be added to your project via NPM or the Zoom Meeting SDK CDN.

On this page

Import via NPM

In the component file where you want to use the Web Meeting SDK, import ZoomMtgEmbedded and create the client.

import ZoomMtgEmbedded from '@zoomus/websdk/embedded'

const client = ZoomMtgEmbedded.createClient()

In the HTML file, set an id attribute on the HTML element where you want to render the Web Meeting SDK. It will be hidden until you start or join a meeting.

<div id="meetingSDKElement">
  <!-- Zoom Meeting SDK Rendered Here -->
</div>

Back in the component file, init the SDK and pass in the HTML element from above:

let meetingSDKElement = document.getElementById('meetingSDKElement')

client.init({
  debug: true,
  zoomAppRoot: meetingSDKElement,
  language: 'en-US',
  customize: {
    meetingInfo: [
      'topic',
      'host',
      'mn',
      'pwd',
      'telPwd',
      'invite',
      'participant',
      'dc',
      'enctype',
    ],
    toolbar: {
      buttons: [
        {
          text: 'Custom Button',
          className: 'CustomButton',
          onClick: () => {
            console.log('custom button')
          }
        }
      ]
    }
  }
})

For the full set of client.init() properties, as well as the Web Meeting SDK APIs and event listeners, see the Component View Reference.

Import via CDN

Since you installed the Web Meeting SDK via the CDN, ZoomMtgEmbedded should already be available in the window.

In the JavaScript file where you want to use the Web Meeting SDK, create the client.

const client = ZoomMtgEmbedded.createClient()

In the HTML file, set an id attribute on the HTML element where you want to render the Web Meeting SDK. It will be hidden until you start or join a meeting.

<div id="meetingSDKElement">
  <!-- Zoom Meeting SDK Rendered Here -->
</div>

Back in the JavaScript file, init the SDK and pass in the HTML element from above:

let meetingSDKElement = document.getElementById('meetingSDKElement')

client.init({
  debug: true,
  zoomAppRoot: meetingSDKElement,
  language: 'en-US',
  customize: {
    meetingInfo: [
      'topic',
      'host',
      'mn',
      'pwd',
      'telPwd',
      'invite',
      'participant',
      'dc',
      'enctype',
    ],
    toolbar: {
      buttons: [
        {
          text: 'Custom Button',
          className: 'CustomButton',
          onClick: () => {
            console.log('custom button')
          }
        }
      ]
    }
  }
})

For the full set of client.init() properties, as well as the Web Meeting SDK APIs and event listeners, see the Component View Reference.

Now that we have chosen a view, we can start and join Zoom Meetings and Webinars.

Need help?

If you're looking for help, try Developer Support or our Developer Forum. Priority support is also available with Premier Developer Support plans.