How to control your embed layout and sizing

Calendly adjusts the calendar layout to fit the size of its container. You can change the layout and size to better fit your website or app.

Choose a layout based on width

Calendly’s inline embed has three layout styles. The style depends on the width of the container (called the “parent container”).

Large window layout

Parent element width >= 1100px

Example

<div class="calendly-inline-widget"
data-url="https​:​//calendl​y.com/YOUR​_LINK"
style="width:1100px;height:700px;"></div>

Medium window layout

Parent element width < 1100px and >= 650px

Example

<div class="calendly-inline-widget"
data-url="https​:​//calendl​y.com/YOUR​_LINK"
style="width:700px;height:700px;"></div>

Small window layout

Parent element width < 650px

Example

<div class="calendly-inline-widget"
data-url="https​:​//calendl​y.com/YOUR​_LINK"
style="width:600px;height:700px;"></div>

Remove scroll bars

If you see a scroll bar inside the embed:

• Increase the height in the embed code style="min-width:320px;height:750px;"
• Use data-resize="true" to enable auto-resize

Example:

<div 
class="calendly-inline-widget" 
data-url="https​:​//calendl​y.com/your​-link" 
style="min-width:320px; height:750px;" 
data-resize="true">
</div>
<script 
type="text/javascript" 
src="https​:​//assets.​calendly.c​om/assets/​external/w​idget.js" 
async>
</script>

Minimum width for mobile

Calendly needs at least 320px of width to show correctly on mobile.

If the embed looks off-center or cut off:

• Check for extra padding or margins on mobile.
• Make sure the container is at least 320px wide.

Test your embed layout

After adding the embed:

• Check layout on both desktop and mobile
• Use your browser’s inspect tool to preview different sizes
• Adjust the container’s size or margins as needed