Embed Recipes

The best way to encourage visitors to book with you is to embed a scheduling page onto your website. Choose from our three embed options to match the look and functionality that best suits your web page.

Change the position of the widget

When using the pop-up widget embed, the default placement is at the bottom-right corner. To change the alignment, add one of the CSS snippets below.

Left:

1
<!-- left align the badge widget -->
2
<style type="text/css">
3
  .calendly-badge-widget {
4
    right: auto !important;
5
    left: 20px !important;
6
  }
7
</style>

Center:

1
<!-- center align the badge widget -->
2
<style type="text/css">
3
  .calendly-badge-widget {
4
    left: 50% !important;
5
    margin-left: -100px !important;
6
  }
7
</style>

Create your own button

Add the Calendly CSS and JavaScript without the default text link, then trigger the popup on button click:

1
<!-- Calendly link widget begin -->
2
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
3
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>
4
<!-- Calendly link widget end -->

Add this onclick handler to any HTML element:

1
onclick="Calendly.initPopupWidget({url:'YOUR_SCHEDULING_LINK'});return false;"

Remove scroll bars

If the embed exceeds its container size, increase the height in the embed code:

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

Make mobile embeds fullscreen

Add this meta tag to make the widget responsive on mobile devices:

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

Hide event details

Remove duplicated information by hiding event details using URL parameters:

Pre-fill questions

Pre-populate the booking form with information you’ve already collected:

1
Calendly.initInlineWidget({
2
  "url": 'https://calendly.com/YOUR_LINK/30min',
3
  "prefill": {
4
    "name": "John Doe",
5
    "email": "john@doe2.com",
6
    "customAnswers": {
7
      "a1": "Yes",
8
      "a2": "At the Starbucks on 3rd and 16th"
9
    }
10
  }
11
});

Use firstName and lastName instead of name for event types with separate name fields. Custom answers are numbered a1 through a10 in order.

Set UTM parameters

Track the source of your invitee with UTM parameters. If you’ve added the embed code to your website, it will automatically look for these UTM parameters in the parent page URL:

• utm_source
• utm_medium
• utm_campaign
• utm_content
• utm_term

Map UTM parameters directly in the embed code:

1
Calendly.initInlineWidget({
2
  "url": 'https://calendly.com/YOUR_LINK/30min',
3
  "utm": {
4
    "utmCampaign": "Spring Sale 2019",
5
    "utmSource": "Facebook",
6
    "utmMedium": "Ad",
7
    "utmContent": "Shoe and Shirts",
8
    "utmTerm": "Spring"
9
  }
10
});

Add a dynamic query string:

1
<div
2
  class="calendly-inline-widget"
3
  data-url="https://calendly.com/YOUR_LINK/30min?utm_source={source}"
4
  style="min-width:320px; height:630px;">
5
</div>

Hardcode a parameter:

1
<div
2
  class="calendly-inline-widget"
3
  data-url="https://calendly.com/YOUR_LINK/30min?utm_source=facebook"
4
  style="min-width:320px; height:630px;">
5
</div>