Button that triggers Calendly Popup Widget

DAVAN-ryan · ‎09-08-2022

Hi there,

I'm looking for a way to make a Button in our theme "Refresh" open up a Calendly widget when clicked.

I found a discussion about the same thing, but without a solution posted:
https://community.shopify.com/c/technical-q-a/calendly-embedded-code-on-a-button/m-p/1683882

Would appreciate any help! Thanks,

Ryan

koravski · ‎09-09-2022

Hi @DAVAN-ryan,

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

<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">

Then you can create the button to open a popup with the calendar. You can put it wherever you want to be shown. You will need to style it to look like the rest of the buttons on your website. Something like that:

<a href="pages/contact" class="calender">Book now</a>

We are using a link tag only to be sure if someone has disabled the javascript on the website then your link will send him 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>

Don't forget to add your link to Calendly in the code above where it says: "HERE ..."

Hope this helps.

DAVAN-ryan · ‎09-09-2022

Thanks! I'll try that and let you know if it works.

DAVAN-ryan · ‎09-09-2022

Hey @koravski. I followed your instructions and was able to create a simple text link that does exactly what I need it too. So the popup is works...however I would like the popup to be triggered when someone clicks the link at the bottom of a multicolumn section (Refresh theme). I have approximately zero coding experience (half lie...I'm ok with Excel macros/VBA haha!), so I hope there's an easy solution to this. Thanks!

fredemeincke · ‎12-14-2023

hey @koravski and @DAVAN-ryan

where do you put the:

in the theme.liqiud file or?

Button that triggers Calendly Popup Widget

Button that triggers Calendly Popup Widget

Community Blog Articles