[Resolved] Help with creating a button for Calendly integration

[Marcel]

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!

[David]

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

[Marcel]

Hello David,
Followed all steps, but it’s not working.

[David]

Can you share a link to the site with that code in place.

[Marcel]

Yes, David. The link is in the private area. It’s about the home page of the website.

[David]

Change your Display Rule Locations to Front Page

[Marcel]

Working. Thank you very much!

[David]

Glad to hear that!

[Author]

Posts