Calendly has three scheduling page layouts. The layout shown depends on the width of the browser or the embed’s container.
To control which layout appears in an embed, adjust the width of the parent element.
See the screenshots and layout breakpoints below.
Large window layout
Parent element width >= 1000px
Example
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_LINK_HERE/calendly-intro" style="width:1000px;height:700px;"></div>
<script type="text/javascript" src="https://assets-staging.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->
Medium window layout
Parent element width < 1000px and >= 650px
Example
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_LINK_HERE/calendly-intro"
style="width:700px;height:700px;"></div>
<script type="text/javascript" src="https://assets-staging.calendly.com/assets/external/widget.js"
async></script>
<!-- Calendly inline widget end -->
Small window layout
Parent element width < 650px
Example
<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_LINK_HERE/calendly-intro" style="width:600px;height:700px;"></div>
<script type="text/javascript" src="https://assets-staging.calendly.com/assets/external/widget.js" async></script>
<!-- Calendly inline widget end -->