Advanced Calendly embed for developers

Control how Calendly works on your website. Use the advanced JavaScript embed to customize how and when Calendly appears. You can pre-fill invitee info, track events, hide details, and more.

Set up the embed with JavaScript

Add Calendly to a specific element on your page:

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

Required setup:

1. Include the Calendly script in your HTML:

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

2. Add a container element for the embed:

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

Include the parentElement to control where the embed appears. Without it, Calendly will load at the bottom of your webpage.

Pre-fill booking answers

Learn about pre-filling booking answers.

Auto-resize the Calendly embed

By default, the embed has a fixed height. If the content is longer, it may scroll inside the widget. You can make the height adjust automatically.

Use standard embed

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

Use advanced JavaScript embed

Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK',
parentElement: document.getElementById('calendly-embed'),
resize: true
});

Important:

• Only use one auto-resizing embed per page to prevent layout problems.
• Avoid dropdowns in booking or routing forms when using auto-resize.

Hide profile info or the cookie banner

Learn how to customize your embed to hide profile info or the cookie banner. 

Track actions with postMessage

Calendly sends events when someone interacts with the embed. You can listen for these to trigger actions or track behavior.

Events sent:

• calendly.profile_page_viewed
• calendly.event_type_viewed
• calendly.date_and_time_selected
• calendly.event_scheduled

Example:

function isCalendlyEvent(e) {
return e.origin === "https://calendly.com" && e.data.event?.startsWith("calendly.");
}

window.addEventListener("message", function(e) {
if (isCalendlyEvent(e)) {
console.log("Calendly Event:", e.data.event);
console.log("Event Details:", e.data.payload);
}
});

Calendly uses window.postMessage() to send these events to the parent window.

Use an iframe (alternative method)

Calendly loads in an iframe by default. If you prefer, you can embed Calendly using direct iframe code:

<iframe src="https://calendly.com/YOUR_SCHEDULING_LINK"
style="width: 100%; min-width: 320px; height: 700px;" frameborder="0"></iframe>

Note: Iframes do not support auto-resize or event tracking via postMessage.