How to embed and customize Calendly on your website

This article will guide you on how to seamlessly embed Calendly on your website. You’ll learn how to embed event types, landing pages, or other users' event types, as well as how to customize embed settings like hiding event details and the cookie banner. It also covers advanced embedding options for developers, including using JavaScript API calls, resizing embeds, pre-filling invitee information, and notifying parent windows of booking events. Customize your embed’s appearance with color and button text options to create a seamless scheduling experience on your site.

How to embed Calendly - General Embed

There are a few ways that you can embed Calendly. You can embed your event type, your landing page, or another user's event type to your website. 

How to embed your event type to your website

1. From your Home page, visit the Event Types tab.
2. Locate the event type card you would like to embed, and select Share.
3. Select </> Add to Website.
4. Choose how you'd like to add Calendly to your site, and select Continue.
5. Make any relevant changes to your settings, and select Copy Code.
   
   • To hide your profile picture, name, event duration, location, and description: Select Hide Event Type Details.
   • To hide the cookie banner: Select Hide Cookie Banner 
6. Paste your code in your website's HTML editor (this may differ by web provider). 

How to embed another user's event type to your website

1. From the My Calendly dropdown, locate the user whose page you'd like to add.
2. Select the Share icon for the event you want to embed. 
3. Follow steps 4-6 above. 

How to embed your landing page to your website

1. From your Home Page, select the gear icon to right hand side of your page.
2. Select </> Add to Your Website. 
3. Choose how you'd like to add Calendly to your site, and select Continue.
4. Make any relevant changes to your settings, and select Copy Code.
   • To hide your profile picture, name, event duration, location, and description: Select Hide Page Details
   • To hide the cookie banner: Select Hide Cookie Banner 
5. Paste your code in your website's HTML editor (this may differ by web provider). 

How to embed another user's landing page to your website

1. From the My Calendly dropdown, locate the user whose page you'd like to add.
2. Select the gear icon to the far right of the user.
3. Select </> Add to Website.
4. Follow steps 3-5 above. 

How to embed Calendly - Advanced Embed

Developers can make a JavaScript API call to create an inline embed on demand, automatically resize the embed, hide event details, hide the cookie banner, notify the parent window, and pre-fill invitee questions all by using our advanced embed features. 

How to use the developer embed code

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.

How to automatically resize the embed

By default, the inline embed will be a fixed height and will contain a scrollbar within the embed itself if it exceeds the specified embed height. To change this from the default, you can set the embed to automatically resize.

To automatically resize the standard html embed code, data-resize="true" will need to be added as an attribute:

<div class="calendly-inline-widget"
data-url="http://calendly.com/YOUR-LINK"
data-resize="true"
style="min-width:320px;height:700px;">
</div>

To automatically resize the advanced inline embed code, pass resize: true as an option in the object passed to the initInlineWidget() function:

Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR-LINK',
parentElement: someElement,
resize: true
});

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

How to hide event details

Remove any information that is duplicated by the content of your web page by hiding the event details, such as your Calendly account picture, name, or event location. Add one of the following URL parameters to the code, depending on the type of scheduling link you are embedding:

A profile page or team page link:

?hide_landing_page_details=1

An event type-specific link:

?hide_event_type_details=1

How to hide the cookie banner

A cookie banner will show by default within the frame of the page that Calendly loads. Without making any changes to your website, the banner keeps you compliant with privacy regulations worldwide (GDPR, CCPA, etc.) when users visit your page and interact with the Calendly widget. Calendly does provide the option for you to hide the cookie banner as a configurable property when embedding your Calendly booking page.

However, by hiding the banner, your site takes responsibility in managing customer preferences to remain compliant with global privacy regulations. When Calendly is embedded, and the banner is hidden, Calendly will still use cookies. Therefore, our recommendation is to prevent Calendly from loading unless users have opted into performance cookies.

How to hide the cookie banner on your existing embed code:

1. If you've already embedded Calendly on your website, access your Calendly embed code from the HTML editor on your site.
2. In your embed code, add the following parameter to your Calendly link: hide_gdpr_banner=1

The final code will look something like this:

<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_EVENT?hide_gdpr_banner=1" style="min-width:320px;height:630px;"></div><script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

How to hide the cookie banner when creating new embed code for your site:

Follow the steps in Embedding Calendly on your site. Make sure to select Hide Cookie Banner before copying the code:

How to notify the parent window

The embedded scheduling page notifies the parent window of important events during the booking flow. As a developer, you can subscribe to these notifications to fire analytics events or change the state of your app.

We use window.postMessage() to post events to the parent window. The event payload is a JavaScript object of the following format where XXX is the name of the booking flow event:

{ event: 'calendly.XXX' }

Here are the events Calendly fires when an invitee follows the booking flow:

This example code listens to these events and logs them to the console:

function isCalendlyEvent(e) {
  return e.origin === "https://calendly.com" && e.data.event && e.data.event.indexOf("calendly.") === 0;
};
 
window.addEventListener("message", function(e) {
  if(isCalendlyEvent(e)) {
    /* Example to get the name of the event */
    console.log("Event name:", e.data.event);
    
    /* Example to get the payload of the event */
    console.log("Event details:", e.data.payload);
  }
});

How to pre-fill invitee questions

If you've already gathered information from visitors to your webpage, you can have it pre-populated in the booking form by modifying Javascript calls in the embed code. Prefill parameters are set in the following structure:

prefill: {
    name:
    email:
    customAnswers:
}

If your event type takes separate first name and last name fields you can use firstName and lastName instead of name.

You can also set custom answers to invitee questions you've added to your event type. Each custom answer will be numbered in order as a1, a2, a3, and up to a10.

prefill: {
    customAnswers: {
        a1:
        a2:
        a3:
    }  
}

<script>
    Calendly.initInlineWidget({
        url: 'https://calendly.com/YOUR_LINK/30min',
        prefill: {
            name: "John Doe",
            email: "john@doe2.com",
            customAnswers: {
                a1: "Yes",
                a2: "At the Starbucks on 3rd and 16th"
            }
        }         
   });
</script>

Customizing your embed 

There are several customizations that you can make to your embed. You can hide event details and customize the colors. 

How to 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.

How to 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.