# Meetings and Webinars The Meeting SDK for web supports Zoom Meetings, Zoom Webinars, and [simulive webinars](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0075963). To start or join a meeting or webinar, create a `ZoomMtg.init()` success callback and add a `ZoomMtg.join()` call inside. ## Join function properties Here are the properties for the `ZoomMtg.join()` function. You can get the meeting or webinar number, password, and registrant token from the [Zoom Meeting APIs](/docs/api/meetings/#tag/meetings/POST/users/{userId}/meetings) or [Zoom Webinar APIs](/docs/api/meetings/#tag/webinars/POST/users/{userId}/webinars). | Key | Value Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `signature` | Required, your [Meeting SDK JWT signature](/docs/meeting-sdk/auth). | | `meetingNumber` | Required, the Zoom meeting or webinar number. | | `passWord` | Required, leave as empty string if the meeting or webinar only requires the waiting room. | | `userName` | Required, the name of the user starting or joining the meeting or webinar. | | `userEmail` | Required for webinar, optional for meeting, required for meeting and webinar if registration is required. The email of the user starting or joining the meeting or webinar. | | `tk` | Required, the registrant's token if your meeting or webinar requires [registration](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0068036). | | `zak` | The user's [Zoom Access Key (ZAK) token](/docs/api/users/#tag/users/GET/users/me/zak). Requirements:- **ZAK + [JWT role 1](/docs/meeting-sdk/auth/#payload)**: Required to start a meeting or webinar (as a host)- **ZAK + JWT role 0**: Join as an authenticated user- Not required if the user is in the same account as the SDK appA ZAK token authenticates a Zoom user in the SDK, allowing them to join meetings with their full Zoom identity. It:- Identifies the authenticated Zoom user in the SDK- Enables starting meetings as the host- Allows starting as an alternative host- Preserves user profile information (name, picture, etc.)- Provides a logged-in experience | | `obfToken` | The SDK's **On Behalf Of Token** to join a meeting along with an associated user. See [Authorize](/docs/meeting-sdk/auth/) and [Authorize: join with OBF](/docs/meeting-sdk/auth/#join-meetings-and-webinars-with-an-obf-token) for details. | > **Zoom Meeting SDK client view reference** > > For the full set of [`ZoomMtg.init()`](https://marketplacefront.zoom.us/sdk/meeting/web/functions/ZoomMtg.init.html) and [`ZoomMtg.join()`](https://marketplacefront.zoom.us/sdk/meeting/web/functions/ZoomMtg.join.html) properties, as well as the Meeting SDK for Web APIs and event listeners, see the [client view reference](https://marketplacefront.zoom.us/sdk/meeting/web/index.html). ## Start or join a meeting or webinar - To **start** a Zoom meeting or webinar, you must use a `role` value of `1` in your SDK signature, and pass in the host's `zak` token. - To **join** a Zoom meeting or webinar, you must use a `role` value of `0` in your SDK signature. - _You may also pass in a user's [ZAK token](/docs/api/users/#tag/users/GET/users/{userId}/token) to [join a meeting or webinar that requires users to be signed in](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0063837)._ - For **webinars**, you must also include the `userEmail` property. ```javascript ZoomMtg.init({ leaveUrl: leaveUrl, // https://example.com/thanks-for-joining success: (success) => { ZoomMtg.join({ signature: signature, // role in SDK signature needs to be 1 to start and 0 to join meetingNumber: meetingNumber, passWord: passWord, userName: userName, userEmail: userEmail, // required for webinars zak: zakToken, // the host's ZAK token success: (success) => { console.log(success); }, error: (error) => { console.log(error); }, }); }, error: (error) => { console.log(error); }, }); ``` ### Start as an alternative host You can also pass in an [alternative host's](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0067027) `zak` token to start a meeting or webinar. ## Join with registration required As of version 1.9.6, the Meeting SDK for web client view lets users join registered meetings or webinars automatically. Your app handles the join process automatically using the registration token retrieved via the Zoom API. This feature uses the registration token denoted by the `tk` value in the query parameter in the registrant's `join_url`. ```json "join_url": "https://example.zoom.us/w/12345?tk=TOKEN" ``` ### To get a registrant's token and join 1. Call an API to get registrant information. - Meeting: [Add meeting registrant](/docs/api/meetings/#tag/meetings/POST/meetings/{meetingId}/registrants), [List meeting registrants](/docs/api/meetings/#tag/meetings/GET/meetings/{meetingId}/registrants), or [Update registrant's status](/docs/api/meetings/#tag/meetings/PUT/meetings/{meetingId}/registrants/status). - Webinar: [Add a webinar registrant](/docs/api/meetings/#tag/webinars/POST/webinars/{webinarId}/registrants), [List webinar registrants](/docs/api/meetings/#tag/webinars/GET/webinars/{webinarId}/registrants), or [Update registrant's status](/docs/api/meetings/#tag/webinars/PUT/webinars/{webinarId}/registrants/status). 2. Get the `tk` value from the response. ```json { "registrant_id": "ESJWWYqvTDWFGNUqJzB_bQ", "id": 96231721187, "topic": "My registered websdk meeting or webinar", "start_time": "2021-05-31T14:00:00Z", "join_url": "https://example.zoom.us/w/12345?tk=JtbsW3pp3KxPLLrE_y7-968kggkV7R5czHM9c0tVvgpM.DQIAAAAWZ9uI4xZFU0pXV1lxdlREV0ZHTlVxSnpCX2JRAzzzzzz&pwd=Ri0TkdxhXeWRUOITyT3ZDZmOOOGwxQT09&uuid=XX_pII1ZlzIQ42xx3zA2zYrrU" } ``` The `tk` value above is `JtbsW3pp3KxPLLrE_y7-968kggkV7R5czHM9c0tVvgpM.DQIAAAAWZ9uI4xZFU0pXV1lxdlREV0ZHTlVxSnpCX2JRAzzzzzz` **JavaScript example** ```js var registrantToken = new URL(response.join_url).searchParams.get("tk"); // Let's imagine that the response is the same and the tk value is: // JtbsW3pp3KxPLLrE_y7-968kggkV7R5czHM9c0tVvgpM.DQIAAAAWZ9uI4xZFU0pXV1lxdlREV0ZHTlVxSnpCX2JRAzzzzzz ``` 3. Set the registrant token as the value for `tk` in `ZoomMtg.join()`. ```js ZoomMtg.init({ leaveUrl: leaveUrl, // https://example.com/thanks-for-joining success: (success) => { ZoomMtg.join({ signature: signature, meetingNumber: meetingNumber, passWord: passWord, userName: userName, userEmail: userEmail, // userEmail property required for webinar tk: registrantToken, //JtbsW3pp3KxPLLrE_y7-968kggkV7R5czHM9c0tVvgpM.DQIAAAAWZ9uI4xZFU0pXV1lxdlREV0ZHTlVxSnpCX2JRAzzzzzz success: (success) => { console.log(success); }, error: (error) => { console.log(error); }, }); }, error: (error) => { console.log(error); }, }); ``` > **Webinar best practice** > > When **panelists** join webinars automatically using the `tk` parameter, they should use their email in addition to the `tk` parameter to join. ### For webinars, the `tk` parameter also supports - Joining automatically-approved registered webinars. - Webinar registration using the tk parameter. - Panelists can join Webinar in Practice mode. - Automatically joining a webinar as a panelist. ### Join with helper.html When joining, a Meeting SDK for web helper page ([helper.html](https://github.com/zoom/meetingsdk-web/blob/master/helper.html)) may be used to handle authorization and cross-origin requests during the join process. For registration-required meetings, the helper.html file handles cross-origin resource requests during the join flow. Without it, registered users may encounter errors when joining. Users who see an error message such as "You cannot authorize the app" should ensure that the helper.html file is properly deployed and accessible. ## Join with authentication required When using the Meeting SDK, meeting or webinar hosts can require their participants to authenticate either through [Single Sign-On (SSO)](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0060673), from specific email domains, or by [signing in to a Zoom account](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0061263). - You pass in a user's [ZAK token](/docs/api/users/#tag/users/GET/users/{userId}/token) to [join a meeting or webinar that requires users to be signed in](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0063837). - For more information on configuring authentication settings in the Zoom web portal, see [Configuring authentication settings and profiles](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0061263). ## Join test meeting Instead of calling join function, call [`joinTest`](https://marketplacefront.zoom.us/sdk/meeting/web/functions/ZoomMtg.joinTest.html) and use [the same code as `join`](/docs/meeting-sdk/web/client-view/meetings/#join-meeting). As with the `join` function, the `role` should be `0`. Create a meeting, for example, using the [Create a meeting API](/docs/api/meetings/#tag/meetings/POST/users/{userId}/meetings) with settings `join before host` and `device_testing` `true`. Then in the `joinTest` function, pass in the meeting ID and the password. Instead of joining the meeting, the user joins a test meeting. Use this to test a user's connection and capabilities before joining a meeting. You can only use the test meeting ID once. Subscribe to [meeting.device_tested](/docs/api/meetings/events/#tag/meeting/POSTmeeting.device_tested) to get the results of the test. ## Using virtual backgrounds You can let users select a virtual background from a list that you provide, including the blur option, or they can upload their own images to use as a virtual background. By default, the client view shows four virtual background images. To provide a different set of images, use the [`updateVirtualBackgroundList`](https://marketplacefront.zoom.us/sdk/meeting/web/functions/ZoomMtg.updateVirtualBackgroundList.html) function. Pass a `vbList` array of virtual background image objects. The `vbList` must not be empty. Here is an example of how to add virtual background images, including the blur option. ```js ZoomMtg.updateVirtualBackgroundList({ vbList: [ { id: "blur", displayName: "blur", fileName: "blur.png", url: "https://websdk.example.com/image/vb/blur.png", }, { id: "SanFrancisco", displayName: "San Francisco", fileName: "SanFrancisco.jpg", url: "https://websdk.example.com/image/vb/SanFrancisco.jpg", }, { id: "ACME-Logo", displayName: "ACME Logo", fileName: "ACME-Logo.png", url: "https://websdk.example.com/image/vb/ACME-Logo.png", }, ], }); ``` To add your own images, host them on a publicly available URL and add them to the `vbList` array. ## Meeting join flow and events Users can [allow participants to join a meeting before the host](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0060501). The following scenarios describe the events sent in each case. - **Join before host disabled.** If the user joins the meeting before the host, the user will see text indicating that the meeting is waiting for the host to join and Zoom sends the [`meeting.participant_jbh_waiting`](/docs/api/meetings/events/#tag/meeting/POSTmeeting.participant_jbh_waiting) event. If they leave, Zoom sends the [`meeting.participant_jbh_waiting_left`](/docs/api/meetings/events/#tag/meeting/POSTmeeting.participant_jbh_waiting_left) event. - **Join before host enabled.** If the user joins the meeting before the host, Zoom sends the [`meeting.participant_jbh_joined`](/docs/api/meetings/events/#tag/meeting/POSTmeeting.participant_jbh_joined) event. If they leave, Zoom sends the [`meeting.participant_left`](/docs/api/meetings/events/#tag/meeting/POSTmeeting.participant_jbh_waiting_left) event. - **Preview enabled.** If the host enabled preview, the user sees the preview page, where they can test their video and audio, then click a button to join the meeting. Once they've joined, Zoom sends the [`meeting.participant_jbh_joined`](/docs/api/meetings/events/#tag/meeting/POSTmeeting.participant_jbh_joined) event. - **Waiting room enabled.** If the host enabled the [waiting room](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0063329), the user will see a note that the host will soon let them in. Zoom sends the [`meeting.participant_joined_waiting_room`](/docs/api/meetings/events/#tag/meeting/POSTmeeting.participant_joined_waiting_room) event. _Note that you still must configure your app to [subscribe to and handle](/docs/api/webhooks/) these events._