How to create a custom button to open Calendly

Add a custom button that opens Calendly in a popup using HTML and JavaScript—no iframe needed. Full setup and styling guide included.

Before you begin

To create a button that opens Calendly in a popup, you'll need to:

• Include Calendly’s embed script and CSS on your page
• Add a button or other clickable element to your HTML
• Use a JavaScript onclick function to launch the scheduler

Step 1 – Add Calendly’s CSS and JavaScript

Add the following code to your site’s HTML, ideally just before the closing </head> tag or at the top of the body:

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

These resources are required for the popup to work.

Step 2 – Add your button

Create a button or link in your HTML. In the onclick attribute, call the Calendly popup function and include your scheduling link.

Example:

<button onclick="Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_SCHEDULING_LINK' }); return false;">
  Schedule a time to meet
</button>

Replace YOUR_SCHEDULING_LINK with the full URL to your booking page or event type.

You can use any clickable element — links, icons, or divs — as long as it includes the same onclick function.

Optional – Customize the popup behavior

The popup appears in the center of the screen with an overlay. You can also pass parameters such as pre-filled invitee data or UTM tags if you're using the advanced embed. For most cases, the example above is enough.

Style your button

You can style your button with CSS. Here’s an example:

<style>
  .calendly-button {
    background-color: #0069ff;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
  }
  .calendly-button:hover {
    background-color: #0052cc;
  }
</style>

<button class="calendly-button" onclick="Calendly.initPopupWidget({ url: 'https://calendly.com/YOUR_SCHEDULING_LINK' }); return false;">
  Book your appointment
</button>

Update the colors, padding, fonts, and other styles to match your site.

Troubleshooting tips

• Make sure both the Calendly script and CSS file are included
• Ensure your button uses return false; to prevent the page from refreshing
• If the popup doesn’t appear, check for errors in the browser console
• Avoid multiple Calendly.initPopupWidget calls on the same page unless needed