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!
User | RANK |
---|---|
4 | |
2 | |
2 | |
1 | |
1 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023