Archived topic
Help with creating a button for Calendly integration
7 replies · Started by Marcel on September 10, 2021
I want to create a button to open the Calendly booking window. I can insert in the website a text link that opens the popup, but I don't know how I could convert it into a button (preferably made with GenerateBlocks, but not necessarily).
The embed code I have to insert in HTML where I want my scheduling link to appear is this one:
<!-- Calendly link widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<a href="" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/askmarcel/manicure-session'});return false;">Schedule time with me</a>
<!-- Calendly link widget end -->When a visitor clicks the link, my Calendly booking page will load as a popup. So instead of text, I need a button.
Can you help me, please? Thank you!
Hi there,
so the code Calendly provides an inline onClick attribute in the HTML. Which can't be added to a Button.
But you could do the following instead:
1. Create a new Hook element. Add just the <link> and <scripts> to its content ie.
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>Set the Hook to WP_head
Set the Display Rules to the Pages where the button will be added
2. Now we need to extract the onClick event from the <a> HTML and create an eventListener script:
<script>
var calendyBtn = document.getElementById('calendyBtn');
calendyBtn.addEventListener("click", function() {
Calendly.initPopupWidget({ url: 'https://calendly.com/askmarcel/manicure-session' });
return false;
});
</script>Which you can add to another Hook Element in wp_footer
Again with the same display rules.
3. The above script will listen for a click event on an element with ad ID of calendyBtn
Just need to add a GB Button, without any link, and in the Advanced > HTML Anchor (ID) add calendyBtn
Hello David,
Followed all steps, but it's not working.
Can you share a link to the site with that code in place.
Yes, David. The link is in the private area. It's about the home page of the website.
Change your Display Rule Locations to Front Page
Working. Thank you very much!
Glad to hear that!
