Calendly: How To Embed A Scheduling Popup or Embedded Calendar In Your Website or WordPress Site

Calendly Scheduling Widget

A few weeks ago, I was on a site and noticed when I clicked a link to schedule an appointment with them that I wasn’t brought to a destination site, there was a widget that published the Calendly scheduler directly in a popup window. This is a great tool… keeping someone on your site is a much better experience than forwarding them to an external page.

What is Calendly?

Calendly integrates directly with your Google Workspace or other calendaring system to build scheduling forms that are both beautiful and easy to use. Best of all, you can even limit the time that you let someone connect with you on your calendar. As an example, I often have only a couple hours available on specific days for external meetings.

Using a scheduler like this is also a far better experience than just filling out a form. For my digital transformation consulting firm, we have group sales events where the leadership team is on the meeting. We also integrate our web meeting platform to Calendly so that calendar invitations include all of the online meeting links.

Calendly has launched a widget script and stylesheet that does a great job at embedding the scheduling form directly in a page, opened from a button, or even from a floating button in your site’s footer. The script for Calendly is written well, but the documentation to integrate it into your site is not good at all. In fact, I’m surprised that Calendly has yet to publish its own plugins or apps for different platforms.

This is incredibly useful. Whether you’re in home services and want to provide a means for your customers to schedule their appointment, a dog walker, a SaaS company that wants visitors to schedule a demo, or a large corporation with multiple members you need to easily schedule… Calendly and the embed widgets are a great self-service tool.

How To Embed Calendly In Your Site

Strangely, you’ll only find directions on these embed at the Event Type level and not the actual event level within your Calendly account. You’ll find the code in the dropdown for the settings of the event type on the top right.

calendly embed

Once you click that, you’ll see the options for the types of embeds:

embed popup text

If you grab the code and embed it whereever you’d like on your site, there are a few issues.

  • If you want to call a couple different widgets on a single page… perhaps have a button that launches the scheduler (Popup Text) as well as the footer button (Popup Widget)… you’re going to to add the stylesheet and script a couple of times. That’s unnecessary.
  • Calling an external script and stylesheet file inline in your site isn’t the most optimal means of adding the service to your site.

My recommendation would be to load the stylesheet and Javascript in your header… then use the other widgets where they make sense throughout your site.

How Calendly’s Widgets Work

Calendly has two files that are needed to embed into your site, a stylesheet and javascript. If you’re going to insert these into your site, I’d add the following into the head section of your HTML:

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

However, if you’re in WordPress, the best practice would be to use your functions.php file to insert the scripts utilizing WordPress’ best practices. So, in my child theme, I have the following lines of code to load the stylesheet and script:

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

That’s going to load these (and cache them) throughout my site. Now I can use the widgets where I’d like them.

Calendly’s Footer Button

I want to call the specific event rather than the event type on my site, so I am loading the following script in my footer:

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

You’ll see the Calendly script breaks down as follows:

  • URL – the exact event I want to load in my widget.
  • Text – the text that I want the button to have.
  • Color – the background color of the button.
  • textColor – the color of the text.
  • branding – removing the Calendly branding.

Calendly’s Text Popup

I also want this available throughout my site using a link or button. To do this, you utilize an onClick event in your Calendly anchor text. Mine has additional classes to display it as a button (not seen in the example below):

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

This message can be used to have multiple offerings on a single page. Perhaps you have 3 types of events you’d like to embed… just modify the URL for the appropriate destination and it will work.

Calendly’s Inline Embed Popup

The inline embed is a little different in that it utilizes a div that’s specifically called by class and destination.

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

Again, this is useful because you can have multiple divs with each Calendly scheduler in the same page.

Side note: I do wish Calendly modified the way this was implemented so it didn’t have to be so technical. It would be great if you could just have a class and then used the destination href to load the widget. That would require less direct coding across content management systems. But… it’s a great tool (for now!). For example – a WordPress plugin with shortcodes would be ideal for a WordPress environment. If you’re interested, Calendly… I could easily build this for you!

Get Started With Calendly

Disclaimer: I’m a user of Calendly and also an affiliate for their system. This article has affiliate links throughout the article.