Personalized checkout and custom promotions with Shopify Scripts
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
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.
Thanks! I'll try that and let you know if it works.
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!
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?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024