Best Practices for Integrating Calendly on a Website?

Hey there @Podcast65884 -- thanks for your post. I do hope other Calendly Community users that have similar use cases chime in, for sure! In the meantime I’m going to share some of our best information about embedding on websites and different platforms, just in case you find it useful as well!
 

Note

You can add your Calendly booking flow directly to your website so your website visitors can schedule with you without leaving your site. You can choose from three customizable embed options (explained below).

If you are instead looking to add your scheduling link to your email signature, this article walks you through how to do so.

Embed Options Overviews (Click Each Link to Learn More!)

Embedding Calendly on your website

Select your website provider to learn more about the embed options available for your website.

• Wix
• Unbounce
• Squarespace
• Shopify
• Weebly
• WordPress
• Google sites

Add your landing page to your website

To embed a landing page with multiple event types, visit the Event Types tab on your Home page. Find the team or user whose landing page you'd like to share. Select the gear icon and then select Add to Website. Then, choose the type of embed that you prefer and adjust the appearance to fit your site.

Add an event type scheduling page to your website

Control the type of meeting your site visitors schedule by embedding an event type scheduling page. Visit the Event Types tab on your Home page. Locate the event type you would like to embed, and select Share. In the pop-up, select Add to Website. Then, choose the type of embed that you prefer and adjust the appearance to fit your site.

Customizing your embed

Hide event details

All three embed types allow you to Hide Event Details. You can enable this option to remove your avatar, the event type name, the location, and the event type details when Calendly is embedded. This will reduce any duplicate content you may have already added to your website.

Customize the color and button text

Color and button text customizations are available for the pop-up widget embed, and you can edit the text shown for the pop-up text option. Users with paid subscriptions have access to more color customization settings, including background color, text color, and button & link color.

Once you’re happy with the changes, copy the code to add it to your web page.

Need more help? Check out our embed guides for some of the most popular website platforms.

Using the developer embed code

Note

By making a JavaScript API call, you can create an inline embed on demand. This will allow you to delay the appearance of the embed until specific actions are completed, or until information is collected to be used for pre-filling the booking form.

Create a div on your site with a specific ID. Include the Calendly Javascript file somewhere on your site as well:

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

Then use this API call, making sure to replace the sample text with your div ID:

Calendly.initInlineWidget({
 url: 'https://calendly.com/YOURLINK',
 parentElement: document.getElementById('SAMPLEdivID'),
 prefill: {},
 utm: {}
});

Load the inline embed automatically while still pre-filling questions, or while setting UTM parameters, use the following code:

<!-- Calendly inline widget begin -->

<div id="calendly-embed" style="min-width:320px;height:700px;"></div>

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

<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/YOURLINK',
parentElement: document.getElementById('calendly-embed')
});
</script>

<!-- Calendly inline widget end -->

Make sure to include the parentElement, otherwise the embed will always load at the bottom of your web page.

There is more information where this came from -- so just let me know if you need me to dig deeper, and I’ll be happy to! However, this should all be more than enough to get you going. 

Good luck! 🍀