1. Help Center
  2. Integrations & Apps
  3. Embed Options

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.

Note

If you are needing more in depth customization information, we recommend reaching out to a web developer for assistance

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.initPopupWidget({url:'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

 

Issues with your Embed?

If you are experiencing performance issues with your embed code, contact our support team. Be prepared to provide 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.

 

Was this article helpful?
15 out of 55 found this helpful