Calendly: How To Embed A Scheduling Popup or Embedded Calendar In Your Website or WordPress Site
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 beautiful and easy-to-use scheduling forms. Best of all, you can limit when you let someone connect with you on your calendar. For example, I often have only a few hours available on specific days for external meetings.
Using a scheduler like this is a far better experience than just filling out a form. My digital transformation consulting firm has group sales events where the leadership team is at the meeting. We also integrate our web meeting platform into Calendly so that calendar invitations include all online meeting links.
Calendly has launched a widget script and stylesheet that embeds 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. I’m surprised that Calendly has not published plugins or apps for different platforms.
This is incredibly useful. Whether you’re an in-home services provider and want to provide a means for your customers to schedule their appointments, 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 great self-service tools.
How To Embed Calendly In Your Site
Strangely, you’ll only find directions on these embedded at the Event Type level and not the actual event level within your Calendly account. The code is in the dropdown for the settings of the event type at the top right.
Once you click that, you’ll see the options for the types of embeds:
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 different widgets on a single page—perhaps a button that launches the scheduler (Popup Text) and the footer button (Popup Widget)—you’ll need to add the stylesheet and script several times. That’s unnecessary.
- Calling an external script and stylesheet file inline in your site isn’t optimal for adding the service.
My recommendation is to load the stylesheet and JavaScript in your header, and 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/link', 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/link'});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/link" 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!
