Button that triggers Calendly Popup Widget

DAVAN-ryan
New Member
4 0 0

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

Replies 4 (4)

koravski
Shopify Partner
23 9 8

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
New Member
4 0 0

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

DAVAN-ryan
New Member
4 0 0

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!

 

Screen Shot 2022-09-09 at 5.19.05 PM.png

fredemeincke
Visitor
1 0 0

hey @koravski and @DAVAN-ryan 

where do you put the: 

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

 

in the theme.liqiud file or?