Common embed questions

Embedding a scheduling page onto your website is the best way to encourage visitors to book with you. With our three embed options, you can choose the look and functionality that suits your webpage the most. Because our embed code may perform differently across host platforms and site themes, we're providing answers to some common embed questions. You may wish to consult a developer for further customizations.

IN THIS ARTICLE:

 

Change the position of the widget

embedalign.gif

When using our pop-up widget embed code, the default placement of the widget will be the bottom of the webpage aligned to the right corner. To change the alignment to either the left or center of your page, add one of the CSS codes below. Then, adjust the left and right inputs until you arrive at your desired spacing.

Left:

<!-- left align the badge widget -->
<style type="text/css">
.calendly-badge-widget {
right: auto !important;
left: 20px !important;
}
</style>
<!-- end left align the badge widget -->

Center:

<!-- center align the badge widget-->
<style type="text/css">
.calendly-badge-widget {
left: 50% !important;
margin-left: -100px!important;
}
</style>
<!--end center align the badge widget-->

 

Create your own button 

Entice your site visitors to schedule with you with a button that triggers a pop-up scheduler. Adding this code somewhere within your web page will give you the Calendly CSS and Javascript resources, without the clickable text link:
<!-- Calendly link widget begin -->
<link
href="https://calendly.com/assets/external/widget.css"
rel="stylesheet">
<script
src="https://calendly.com/assets/external/widget.js"
type="text/javascript"></script>
<!-- Calendly link widget end -->
Next, you’ll need to trigger this Javascript code when the button is clicked to initiate the pop-up. To an HTML element, add:
onclick="Calendly.showPopupWidget('YOUR_SCHEDULING_LINK');
return false;"
Replace the link with your own URL, either for your scheduling page or a specific event type.

embedbutton.gif
 
 

Remove scroll bars

Depending on the host and theme you’re using for your website, your visitors may encounter a Calendly embed module with a scroll bar. The scroll bar appears when the embed exceeds the size of the container, which is controllable in your site layout. To remove the additional scroll bar, you can increase the height specified in the code copied from your account:

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

embedscroll.png


If you are experiencing performance issues with your embed code, fill out this form to reach our support team. Include the link to your website and the host you are using, as well as screenshots of what you’re seeing to help us better assist you.

 

Make your mobile schedule fullscreen 

If you embedded Calendly on a mobile site and the view is smaller than expected, you can make the widget responsive so that it will appear full screen on your device by adding this line of code to your page's source code.
<meta name="viewport" content="width=device-width, initial-scale=1">
Was this article helpful?
21 out of 81 found this helpful