Build an App
This guide will walk through the steps to get started with the Web SDK through the following steps:
- Downloading the SDK
- Integrating the SDK
- Creating a Generate Signature function
- 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.
Download the Zoom SDK
Login to the Zoom App Marketplace using your Zoom account, click the Develop option in the dropdown on the top-right corner and select Build App. Next, click the Create button and provide the required details if you haven’t already created an SDK app. If you previously created an SDK app on the Marketplace, click the View here option and navigate to the Download page. Click Web to download the Web SDK.
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/{VERSION_NUMBER}/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/{VERSION_NUMBER}/css/react-select.css" />
<head>
<body>
<!-- import ZoomMtg dependencies -->
<script src="https://source.zoom.us/{VERSION_NUMBER}/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/{VERSION_NUMBER}/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/{VERSION_NUMBER}/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/{VERSION_NUMBER}/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/{VERSION_NUMBER}/lib/vendor/lodash.min.js"></script>
<!-- import ZoomMtg -->
<script src="https://source.zoom.us/zoom-meeting-{VERSION_NUMBER}.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 Global use source.zoom.us:
ZoomMtg.setZoomJSLib('https://source.zoom.us/{VERSION_NUMBER}/lib', '/av');
// In China use jssdk.zoomus.cn:
ZoomMtg.setZoomJSLib('https://jssdk.zoomus.cn/{VERSION_NUMBER}/lib', '/av');
Replace {VERSION_NUMBER} in the code samples above with the latest version number. For example, if the version number is 5.5.5, the react-select stylesheet link should be https://source.zoom.us/5.5.5/css/react-select.css.
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>
Set debug log level
Use the setLogLevel API to print logs in debug mode. To do so, set debug to true and use setLogLevel('info').