How to trigger Calendly popup widget with a button

Back to Blogs
How to trigger Calendly popup widget with a button
  • 10 Dec 2022

Calendly is a powerful tool that allows you to easily schedule appointments and events with clients, colleagues, and others. But did you know that you can also trigger the Calendly popup widget with a button? This can be extremely useful if you want to schedule an appointment or event on someone’s behalf, or if you want to make sure that the widget is triggered when a particular person visits your website.

So you need to go to your Shopify Store/Online Store/Actions/Edit code and find theme.liquid file.
Look for <head> </head>. You need to add this code inside the head tag:

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

Then you can use a button to trigger the Calendly popup widget. To do this, you’ll need a button that says “Schedule a Meeting” or something similar. When someone clicks the button, the Calendly widget will appear.

You can add the button to your website using HTML or JavaScript. Here’s a basic HTML button:

<a href="/pages/contact" class="calender">Schedule a Meetingow</a>

We are only using a link tag to be sure that if someone has disabled javascript on the website, your link will send them to the contact page instead of doing nothing.

Then again in theme.liquid file you will need to find the closing body tag: </body>. Above it add this:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    let btn = document.querySelector('.calender');
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      Calendly.initPopupWidget({url: 'HERE YOU PUT YOUR CALENDLY LNK TO THE CALENDAR'});
    });
  });
</script>
</body>

Make sure to add your Calendly link in the code above where it says ” Calendly.initPopupWidget({url: ‘HERE YOU PUT YOUR CALENDLY LNK TO THE CALENDAR”.

Please feel free to contact me if you have any questions or problems.

  • Category:
  • Shopify