You can add your Calendly booking flow directly to your website, so your site visitors can schedule with you without leaving your site. You can choose from three customizable embed options.
Inline example |
 |
Pop-up text example |
 |
Pop-up widget example |
|
Embedding Calendly on your website
Select your website provider to learn more about the embed options available for your website.
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
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 class="calendly-inline-widget" style="min-width:320px;height:580px;" data-auto-load="false">
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/YOURLINK'
});
</script>
</div>
<!-- Calendly inline widget end -->
Hiding 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, event location and event description. 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
Notifying 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:
|
Event name
|
Event description
|
|---|---|
| calendly.profile_page_viewed | Profile page was viewed |
| calendly.event_type_viewed | Event type page was viewed |
| calendly.date_and_time_selected | Invitee selected date and time |
| calendly.event_scheduled | Invitee successfully booked a meeting |
This example code listens to these events and logs them to the console:
function isCalendlyEvent(e) {
return e.data.event && e.data.event.indexOf('calendly') === 0;
};
window.addEventListener(
'message',
function(e) {
if (isCalendlyEvent(e)) {
console.log(e.data);
}
}
);
Pre-Fill 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:
}
}This example code will pre-populate John Doe's contact information and his answers to the invitee questions this event type is asking:
<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>