How do I embed CalendarHero on my website?


CalendarHero users can now add the CalendarHero 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. CalendarHero now includes three embed styles InlineSlide 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


Inline Embed

The Inline Embed option will load your CalendarHero 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 CalendarHero 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 CalendarHero scheduling interface directly within your website's content. 
  • The Slide Out option adds a floating icon to your website that launches CalendarHero 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 CalendarHero 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 bottom and 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 CalendarHero to Squarespace

Squarespace supports CalendarHero's inline embed for users on the Squarespace Business Plan. 

Once you sign in to Squarespace, click on 'Pages' from the primary menu, and then find the page you want to add the CalendarHero embed. Hover over the page preview on the right and click on 'Edit' when it appears. Add a new block (by clicking on the + icons that appear when you hover over the page sections), and then choose the Code block. Paste the CalendarHero embed code that you copied from your CalendarHero meeting type. Once you save and publish your page your CalendarHero scheduling interface will appear.

Here's an example of the embed added to our own Squarespace website:



CalendarHero Embed Cookies


Question: I have embedded CalendarHero 
on my website and want to know what cookies CalendarHero uses

The CalendarHero Meeting acceptance UI / embed doesn't create any cookies directly. It does check for a cookie created by the CalendarHero web app (app.calendarhero.com) to see if an invitee is also a CalendarHero user (e.g. has a logged into their own CalendarHero account) as it uses this in order to calculate time slot conflicts if the Private Calendar Sync is enabled. This cookie expires 60 days from the creation date.


Private Calendar Sync: Invitees can optionally upload their own calendar so that they can easily view conflicts between your schedule and theirs. For privacy reasons the synced results are only visible to that specific user and not the meeting creator. Syncing for external users are only used for that session and are not stored by CalendarHero so they remain private to only the invitee. Learn More

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us