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 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
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 than 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