Hey CalPals!

Simplifying the scheduling process on your website is easy with Calendly Embeds. Whether you're offering clients the ability to book meetings directly or guiding them through a routing form, embedding Calendly into your website streamlines the booking experience, keeping users engaged without the need to navigate away.

With flexible embedding options and seamless integration, this feature enhances the user experience while saving you time.

Ready to get started? Follow the simple steps below to add Calendly to your website and make scheduling a breeze for your customers!

First, you’ll want to choose what you want to embed

There are two ways to embed Calendly on your website:

• Landing page - Let users to choose from all your event types.
  1. Select the gear icon on the top right of your personal event types
  2. Select Add to website
     
• Booking page - Show users a specific event type to schedule.
  1. Locate your event type.
  2. Select the three vertical dots > Add to Website.
     
      
• Routing Form - Posts a form to your website that users can fill out to be routed to a specific event or page:
  1. Create a Routing Form
  2. Select Share from the Routing Form Page:
     

Then, copy your embed code

1. Choose how you want your embed to appear:
   • Inline embed – Displays directly on your page.
   • Popup widget – Adds a floating button to open your scheduling page.
   • Popup text – Adds a clickable link to open your scheduling page.

2. Select Continue.
3. Here, you can adjust the settings of the embed to have it display how you want!
   
   Here, you can:
   • Hide event details
   • Remove the cookie banner
   • Customize your embed colors (paid feature)
4. From here, just select Copy Code and paste it into your website’s HTML.

Have a specific website you’re adding Calendly to? Select your provider below for more specific instructions:

• Wix
• Unbounce
• Squarespace
• Shopify
• Weebly
• WordPress
• Google Sites
• Joomla

FAQ

Q. I have a scroll bar on my embed, how do I remove it?
A.  You can follow the instructions in this help center article to help remove that scroll bar: Auto-resize the Calendly embed

Q. My embed is taking too long to load, is there anyway to speed it up?
A. To ensure that the Calendly embed is loading as quickly as possible, there are a few steps that you can take:

1. Ensure that the key term async is on the Javascript link on the embed code.

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

2. Add the Javascript code to your HTML file directly before the closing </body> tag instead of loading it with the embed code. You can see details about this here in the section Optimize Javascript Placement.

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>

3. If you are using a website builders (Squarespace, Shopify, Wordpress), they may have specific suggestion for you as well for improved performance. Contacting their support team would be the next best option.