Build an App

This guide will walk through the steps to get started with the Web SDK through the following steps:

  1. Integrating the SDK
  2. Creating a Generate Signature function
  3. Joining a Meeting or Joining a Webinar

Before you get started:

To use the Web SDK, you’ll need an API Key and Secret. With Developer Role permissions, navigate to the Marketplace and Create a JWT App to create or view API Key/Secret.

The Web SDK uses an API Key & Secret for authentication. Login to the Zoom Marketplace and Create a JWT App to get API Keys & Secrets.

Integrate SDK

The Web SDK can be imported locally into an existing Node.js app through an npm package, or into any HTML5 project through a CDN (content delivery network).

Option 1: Import Module Locally

The Zoom Web SDK can be installed through npm using the zoomus-websdk package.

npm i @zoomus/websdk
index.js
import { ZoomMtg } from ‘@zoomus/websdk‘;
index.html
<head>
    <!-- import local css for #zmmtg-root -->
    <link type="text/css" rel="stylesheet" href="node_modules/@zoomus/websdk/dist/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="node_modules/@zoomus/websdk/dist/css/react-select.css" />
</head>

Option 2: Import Through CDN

The Zoom Web SDK can also be imported and used through CDN. To import, include the following in your index.html file:

index.html
<head>
    <!-- import #zmmtg-root css -->
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.8.1/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.8.1/css/react-select.css" />
<head>
<body>
    <!-- import ZoomMtg dependencies -->
    <script src="https://source.zoom.us/1.8.1/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/1.8.1/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/1.8.1/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/1.8.1/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/1.8.1/lib/vendor/jquery.min.js"></script>
    <script src="https://source.zoom.us/1.8.1/lib/vendor/lodash.min.js"></script>

    <!-- import ZoomMtg -->
    <script src="https://source.zoom.us/zoom-meeting-1.8.1.min.js"></script>
    
    <!-- import local .js file -->
    <script src="js/index.js"></script>
</body>

Specify dependency library:

To specify the required dependency library, use the setZoomJSLib function:

index.js
// For Local module default:
ZoomMtg.setZoomJSLib('node_modules/@zoomus/websdk/dist/lib', '/av');
// For CDN version default
ZoomMtg.setZoomJSLib('https://dmogdx0jrul3u.cloudfront.net/1.8.1/lib', '/av'); 
// For Global use source.zoom.us:
ZoomMtg.setZoomJSLib('https://source.zoom.us/1.8.1/lib', '/av'); 
// In China use jssdk.zoomus.cn:
ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/1.8.1/lib', '/av'); 

Prepare Required Files

Before launching and joining a meeting, make sure to load WebAssembly files and JavaScript requirements onto the page.

index.js
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk

Appended DOM Elements

When imported, the Web SDK adds new elements to the DOM to handle Meeting window overlays and accessibility elements. The following elements are added to the end of <body></body>:

index.html
<body>
    <!-- added on import -->
    <div id="zmmtg-root"></div>
    <div id="aria-notify-area"></div>
</body>

To manage or manipulate this DOM element within your app, use JavaScript to get the element:

index.js
const zoomMeeting = document.getElementById("zmmtg-root")

When a Meeting is launched via ZoomMtg.init() additional DOM elements are appended to include core in-Meeting UI and functions:

index.html
<body class="ReactModal__Body--open">
    
    <!-- added on import -->
    <div id="zmmtg-root"></div>
    <div id="aria-notify-area"></div>
    
    <!-- added on meeting init -->
    <div class="ReactModalPortal"></div>
    <div class="ReactModalPortal"></div>
    <div class="ReactModalPortal"></div>
    <div class="ReactModalPortal"></div>
    <div class="global-pop-up-box"></div>
    <div class="sharer-controlbar-container sharer-controlbar-container--hidden"></div>
	
</body>

Need help?

The first place to look is on our Developer Forum. If you can't find the answer or your request includes sensitive information, contact Developer Support.