Introduction
Use the Zoom plugin for personal authentication, create and manage Zoom Meetings and Webinars right from your Bubble app.
Prerequisites
You must have a Zoom account. This plugin uses Zoom OAuth authentication.
This means, the plugin will have to be registered in Zoom Marketplace, and thereafter any user registered on your Zoom master account will be able to use the plugin by logging in with his Zoom account: https://marketplace.zoom.us/docs/guides/getting-started/zoom-platform
Plugin Setup
How to get Plugin keys
First, register your Zoom application in Zoom Marketplace.Follow these steps:
- Log in with Zoom and follow this link: https://marketplace.zoom.us/
- In the upper right corner hover the ‘Develop’ dropdown and choose ‘Build app’. This will open a new window.
- Choose OAuth and click ‘Create’:
4. Fill in the form and click ‘Create’ again:
This will open a new window with your application details. Here you’ll need to fill in some information about the application. You’ll also get access to the keys you need for the plugin.
5. On the ‘App Credentials’ tab insert your application (webpage) url into the field ‘Redirect URL for OAuth’.
You’ll be able to change this field later if needed. Make sure to add this (webpage) url into the ‘Whitelist URL’ field as well.
6. Copy the ‘Client ID’ and ‘Client Secret’ from the ‘App Credentials’ tab. These are the CLIENT_ID and CLIENT_SECRET keys for ZOOM plugin settings respectively.
7. On ‘Information’ tab fill in all the necessary information.
8. On ‘Scopes’ tab click the ‘+Add Scopes’ button and add to your application the scopes you want to use. Right now the plugin supports ‘Meetings’ and ‘Webinars’.
9. If all the necessary fields are filled in, you’ll see the ‘Installation URL’ on the ‘Activation’ tab. Copy it. This will be the REDIRECT_URL key of your Zoom Plugin.
Setting up Keys and URL in Plugin Settings
After obtaining the keys, now fill in all the keys for the plugin:
- Paste CLIENT_ID and CLIENT_SECRET in respective fields
2. Use your (webpage) url as the APP_URL key for the plugin
3. Use the copied ‘Installation URL’ for REDIRECT_URL:
Plugin Element Proprieties
The plugin contains
LoginWithZoomButton visual element which represents Zoom login/logout button and should be used on the page.LoginWithZoomButton element has ‘Authentication error’ propriety that has to be set to the ‘auth_error’ returned from the ‘
ZOOM: AUTH - Login’ plugin action. Save the ‘auth_error’ to your page’s state, and use it here:
It comes with styling options proprieties to create it for your own design. Once the element is placed on the page, the button appearance can be changed.
Fields that can be styled by:
- button color
- text color
- text font
- text font size
- button width
- button height
- border radius
Setting Up Zoom Authentication
The authentication may be a bit tricky, so let’s make sure you set everything correctly.
Follow these steps:
To set up Zoom authentication, follow these steps:
1. Add 2 new fields into your app/page Database for the ‘User’ data type:
‘zoom_token’ and ‘zoom_refresh_token’, both of type ‘text’. Make sure to use exactly these 2 names for them, as they are used by Zoom plugin actions. 2. Place the LoginWithZoomButton visual element on your page.
This element exposes 2 events, ‘login_button_is_clicked’ and ‘logout_button_is_clicked’, that will be used for logging the user in and logging the user out. We’ll use these events in the following workflows
3. Set ‘Login’ workflow.
Set a new ‘LoginWithZoomButton login_button_is_clicked’ workflow:
Now add the following steps to this workflow:
Step 1: Zoom Plugin Action ‘ZOOM: AUTH - Login’. Pass it ‘LoginWithZoomButton’s Auth code’ as ‘Auth Code’
Step 2: Make changes to the Current User, populating the ‘zoom_token’ and ‘zoom_refresh_token’ with new values received from the previous action:
Step 3: In case an error happens during the authentication request, set a new ‘auth_error’ state of your page and populate it with the ‘error’ returned from this plugin action.
4. Set ‘Refresh token’ workflow.
Zoom tokens expire every hour. So we need to set up a workflow that will run every hour, to refresh tokens, but only if the ‘zoom_token’ for the Current User is not empty.
Here again follow 3 steps:
Step 1: Zoom Plugin Action ‘ZOOM: AUTH - Refresh Token’, and pass it ‘Current User’s zoom_token’ as ‘Access token’ and ‘Current User’s zoom_refresh_token’ as ‘Refresh token’
Step 2: Make changes to the Current User, populating the ‘zoom_token’ and ‘zoom_refresh_token’ with new values received from the previous action:
Step 3: Set your page’s ‘error’ state to the ‘error’ returned from the plugin action in the 1st step.
5. Set ‘Logout’ workflow.
Set a new ‘LoginWithZoomButton logout_button_is_clicked’ workflow:
Now add these 3 steps:
Step 1: Zoom Plugin Action ‘ZOOM: AUTH - Logout’. Pass it ‘Current User’s zoom_token’ as ‘Access token’
Step 2: Make changes to Current User, populating the ‘zoom_token’ and ‘zoom_refresh_token’ with new values received from the previous action:
Step 3: To track if an error occurred, set your page’s ‘error’ state as the ‘error’ returned from the plugin action in the 1st step.
Congratulations! Your Zoom authentication is set up!
Plugin actions
In case an error happens during any of the actions, set a new ‘error’ state of your page and populate it with the ‘error’ returned from the current plugin action:
Meetings
- ZOOM: Meeting Create - Is used to create a new Zoom meeting.
Action properties:
- Meeting topic - Text. Any topic for the meeting
- Meeting type - Allowed values: Scheduled, Instant Make sure to use only these string values for meeting type.
- Start time - The date and time format is important when setting ‘start time’. Make sure to set ‘custom’ format when getting date/time from a date/time picker, the way indicated in the picture
- Timezone - Timezone ID. You can find the full list of available timezones here: https://marketplace.zoom.us/docs/api-reference/other-references/abbreviation-lists#timezones
- Duration (in minutes) - Meeting duration
- Schedule meeting for - If you would like to schedule this meeting for someone else in your account, provide the Zoom user ID or email address of the user here.
- Meeting password - Password to join the meeting. Passwords may only contain the following characters: [a-z A-Z 0-9 @-_*] and can have a maximum of 10 characters.
Returned values:
If a meeting was created successfully:
- meeting_id - New meeting id
- start_url - URL to start the meeting
- join_url- URL to join the meeting
In case of error:
- error - Will contain the error message
- ZOOM: Meetings Get All - Is used to get all Zoom meetings for the current user. Returns a list of meeting ids and topics. If you need more information about a certain meeting, use its id and ‘ZOOM: Meetings - Get One’ plugin action
Action properties:
This action has no properties.
Returned values:
If run successfully:
- meetings - A list of meeting ids and topics
- meeting_ids - A list of all meeting ids
- meeting_topics - A list of all meeting topics
- page_size - The number of meetings returned by one action
- total_records - The total number of all the meetings
In case of error:
- error - Will contain the error message
- ZOOM: Meetings Get One - Is used to get data for one meeting by its id.
Action properties:
- Meeting ID - Id of the meeting to get
Returned values:
If meeting with this id was found:
- topic - Meeting topic
- type - Type of the meeting (Scheduled of Instant)
- status - Meeting status
- start_time - Meeting start time
- duration - Meeting duration in minutes
- start_url - URL to start the meeting
- join_url - URL to join the meeting
In case of error:
- error - Will contain the error message
- ZOOM: Meetings Update - Is used to update the meeting with a provided id
Action properties:
- Meeting ID - Id of the meeting to be updated
- Meeting topic - Text. New topic for the meeting, if change is needed
- Meeting type - Provide if change is needed. Allowed values: Scheduled, Instant.
- Start time - Provide the value if change for the start time is needed.
The date and time format is important when setting ‘start time’. Make sure to set ‘custom’ format when getting date/time from a date/time picker, the way indicated in the picture
- Timezone - Timezone ID. You can find the full list of available timezones here: https://marketplace.zoom.us/docs/api-reference/other-references/abbreviation-lists#timezones
- Duration (in minutes) - New meeting duration. Provide if change is needed.
- Schedule meeting for - Provide if change is needed. If you would like to schedule this meeting for someone else in your account, provide the Zoom user ID or email address of the user here.
- Meeting password - Provide if change is needed. Password to join the meeting. Passwords may only contain the following characters: [a-z A-Z 0-9 @-_*] and can have a maximum of 10 characters.
Returned values:
In case of success:
- message - Will have the value ‘Meeting updated’
In case of error:
- error - Will contain the error message
- ZOOM: Meetings Delete - Is used to delete a meeting by its id
Action properties:
- Meeting ID - Id of the meeting to be deleted
Returned values:
In case of success:
- message - Will have the value ‘Meeting deleted’
In case of error:
- error - Will contain the error message
Webinars
Webinar actions are available only for those users who have webinar plan enabled in their Zoom account
- ZOOM: Webinars Create - Is used to create a new Zoom webinar.
Action properties:
- Webinar topic - Text. Any topic for the webinar
- Webinar type - Allowed values: Webinar, Recurring - no fixed time, Recurring - fixed time. Make sure to use only these string values for webinar type.
- Start time - The date and time format is important when setting ‘start time’. Make sure to set ‘custom’ format when getting date/time from a date/time picker, the way indicated in the picture
- Timezone - Timezone ID. You can find the full list of available timezones here: https://marketplace.zoom.us/docs/api-reference/other-references/abbreviation-lists#timezones
- Duration (in minutes) - Webinar duration
- Webinar password - Webinar password. Passwords may only contain the following characters: [a-z A-Z 0-9 @-_*!] and can have a maximum of 10 characters.
Returned values:
If meeting was created successfully:
- webinar_id - New webinar id
- uuid - Unique identifier for a webinar
- host_id - Id of the user set as host of the webinar
- start_url - URL to start the webinar
- join_url - URL to join the webinar
In case of error:
- error - Will contain the error message
- ZOOM: Webinars Get All - Is used to get all Zoom webinars for the current user, if webinar plan is available for this user. Returns a list of webinar ids and topics. If you need more information about a certain webinar, use its id and ‘ZOOM: Webinars - Get One’ plugin action
Action properties:
This action has no properties.
Returned values:
If run successfully:
- webinars - A list of webinar ids and topics
- webinar_ids - A list of all webinar ids
- webinar_topics - A list of all webinar topics
- page_size - The number of webinars returned by one action
- total_records - The total number of all the webinars
In case of error:
- error - Will contain the error message
- ZOOM: Webinars Get One - Is used to get data for one webinar by its id.
Action properties:
- Webinar ID - Id of the webinar to get
Returned values:
If webinar with this id was found:
- webinar_id - id of the webinar
- uuid - Unique identifier for the webinar
- topic - Webinar topic
- type - Type of the webinar (Webinar, Recurring - no fixed time, Recurring - fixed time)
- start_time - Webinar start time
- duration - Webinar duration in minutes
- start_url - URL to start the webinar
- join_url - URL to join the webinar
In case of error:
- error Will contain the error message
- ZOOM: Webinars Update - Is used to update a Zoom webinar by its id.
Action properties:
- New webinar topic - If change is required. Text. Any topic for the webinar.
- New webinar type - If change is required. Allowed values: Webinar, Recurring - no fixed time, Recurring - fixed time. Make sure to use only these string values for webinar type.
- New start time - If change is required. The date and time format is important when setting ‘start time’. Make sure to set ‘custom’ format when getting date/time from a date/time picker, the way indicated in the picture
- Timezone - if change is required. Timezone ID. You can find the full list of available timezones here: https://marketplace.zoom.us/docs/api-reference/other-references/abbreviation-lists#timezones
- New webinar duration - If change is required. Webinar duration (in minutes)
- New webinar password - If change is required. Webinar password. Passwords may only contain the following characters: [a-z A-Z 0-9 @-_*!] and can have a maximum of 10 characters.
Returned values:
If webinar was updated successfully:
- message - Will have the value ‘Webinar updated’
In case of error:
- error - Will contain the error message
- ZOOM: Webinars Delete - Is used to delete a webinar by its id
Action properties:
- Webinar ID - Id of the webinar to be deleted
Returned values:
In case of success:
- message - Will have the value ‘Webinar deleted’
In case of error:
- error - Will contain the error message
Plugins States
LoginwithZoom Button's Auth code
LoginwithZoom Button's User is logged out
Changelogs
Update 26/10/23 - Version 1.11.0
- Updated Node 18
Update 27/12/23 - Version 1.12.0
- Replaced deprecated functions