Adding Calendly to your website

 

Adding Calendly to your website

The best way to encourage bookings -- add Calendly scheduling to your website

KB_Add2Site[right]

Add Calendly to your website so invitees can book time with you from your website. Choose from three customizable styles to give your site visitors the option to schedule an event without having to leave the page.

KMEMBED

Note: to add Calendly scheduling to your site, you'll need to know how to edit HTML and CSS. If you don't, ask a developer for assistance.

To add the scheduling widget

Use an HTML editor and add the code snippet below to one or more pages where you want invitees to book with you.

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

Choose where the widget displays by customizing the CSS.

To add a button that displays a popup scheduler

Instead of displaying the scheduler on the page, use the following snippet to display a button that visitors click to display a pop-up scheduler. 

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript">
</script>


Then, add the following snippet to the button of the page:

add:onclick="Calendly.showPopupWidget('YOUR_SCHEDULING_LINK');return false;"

Where:
YOUR_SCHEDULING_LINK is the link to your Calendly main scheduling or specific-event page.
  

To remove the scroll bars

If the size of the Calendly widget is too large, the Calendly widget may display with a scroll bar. To remove the scroll bar, increase the height:

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

To display fullscreen on mobile

If you add Calendly to a mobile site and it appears smaller than expected, make the widget responsive by adding this code to the page source:

<meta name="viewport" content="width=device-width, initial-scale=1">

A note about GDPR

Calendly's inline embed includes a General Data Protection Regulation (GDPR Banner). The General Data Protection Regulation governs data protection in the EU and EEA. Certain Calendly integrations require access to cookies with user information. If you do not embed the GDPR banner, users in those areas will not have the ability to give their consent in order to access integrations such as Google Analytics, Facebook Pixel, PayPal, and Stripe.

If you use a developer to write custom code

See Additional things you can do with a developer's help.

If you experience performance issues

Contact Calendly Support for assistance and provide:

  • a link to your website

  • the name of your website host

  • (optional) screenshots of the page where the performance issue occurs