How do I embed Zoom.ai on my website?
Zoom.ai users can now add the Zoom.ai self-scheduling embed directly to their website! This allows leads and web visitors to easily self schedule time with you or your team at the height of interest - without ever leaving your website. Zoom.ai now includes three embed styles Inline, Slide Out and Directory Embed - so you can select the one that works best for your website design!
Visitors will first see the personal scheduling form, which prompts visitors for their name and email. As with all scheduling form pages you can also customize this with a logo, meeting instructions, or custom invitee questions - to easily collect information before the meeting!
Embed Design Options
The Inline Embed option will load your Zoom.ai scheduling interface directly within your website's content. This design is recommended if you are embedding only one (1) meeting type and want the scheduler to be embedded on a specific page AND have it appear within the page's content.
Slide Out Embed
The Slide Out option adds a floating button to your website. When a customer clicks on the button it launches the Zoom.ai scheduler in a fixed slide-out. This design is recommended if embedding only one (1) meeting type, and you want to include the scheduling CTA on multiple website pages.
Meeting Directory Embed
Meeting Directories are a public landing page for your popular meeting types, and now are embeddable! This design is recommended if you want to embed more then one (1) meeting type on your website page, AND have it appear on a single page within the page's content.
This embed style can be added to your website by copying the Meeting directory embed code (rather then the meeting type embed code). Learn more about Meeting Directories
Add the Embed to your Website
Add the scheduler to your website in 3 easy steps!
1. Select your Meeting Type:
Ready to add the embed to your website? First choose which Meeting Type you want to use for your embed. Your meeting type controls the associated settings. (Not Sure? Open the associated personal scheduling link and this will be how the scheduling page appears inside the inline embed).
Tip! If you want to embed multiple meeting types on one page then use your Meeting Directory embed code instead. Learn More
2. Select your Embed Experience:
Once you have selected the meeting type click on the "Add to my Website" section and select which experience you want to embed on your website:
- The Inline Embed option will load your Zoom.ai scheduling interface directly within your website's content.
- The Slide Out option adds a floating icon to your website that launches Zoom.ai in a fixed slide-out.
3. Copy and paste the Embed Code:
Once you selected the experience you want simply copy the embed code, and paste this code directly on your own website. Once your changes are published your Zoom.ai personal scheduling page will automatically render on your webpage!
Embed Tips: Slide Out
If you want to reposition the "Schedule a Meeting" button on your website ask your developer to use CSS to target the button with class name
zoomai-slideout-widget-button and change
right values to re-position as needed.
Embed Tips: Inline
Adding an embed to your website may be dependent on the website provider you are using. Below are some tips and tricks to help! We will continue to add more based on frequently asked questions.
WIDTH: The embed width is automatically responsive and designed to work well at different widths. The minimum width is 320px.
HEIGHT: To change the default height of 630px simply update the height parameter "height: 630px". Scroll bars will automatically appear when the embed exceeds the height of the container. Please keep in mind that the height of the scheduling embed WILL adjust based on the content, so may increase if you have added additional features like invitee questions on the landing page. The scheduling page will also adjust based on the number of available time slots (based on real-time availability).
Website does not support scripts: If your website does not support embed scripts you can always direct users to your personal scheduling link by adding a clickable call to action on your page.
Still need help or have feedback? Contact us
Looking for additional customization? Drop us a line and let the product team know
Adding Zoom.ai to Squarespace
Squarespace supports Zoom.ai's inline embed for users on the Squarespace Business Plan.
Once you sign-in to Squarespace, in edit mode open the page you would like to add the Zoom.ai embed. To add the embed select "Block". Paste the Zoom.ai embed code that you copied from your Zoom.ai meeting type. Once you save and publish your page your Zoom.ai scheduling interface will appear.
Here's an example of the embed added to our own Squarespace website: