Embed Calendly trouble with OnClick Attributes

Design help Custom code
1

Hi,

I want to add my own link in Calendly to my webflow project.

They want me to add this code somewhere on the page (ex header)

<!-- Calendly link widget begin -->
<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>
<!-- Calendly link widget end -->

Then they want me to create a button with this code

onclick="Calendly.showPopupWidget('YOUR_SCHEDULING_LINK');return false;"

And my guess is that this is added to the Custom attributes on the button widget in Webflow.

BUT, the onclick name is taken. What do i do?

44

2

Hey there,

the only solution I can come up with right now is to drag in a HTML embed box and write some code to make a custom button. I just tested with this and it seems to be working fine;

<div class="button" onclick="Calendly.showPopupWidget('YOUR_SCHEDULING_LINK');return false;" 
style="width: 200px; background: #ebebeb; color: #333; padding: 20px; text-align: center; border-radius: 100px; 
">Calendly</div>

It’s just a simple light grey button with the text “Calendly”. :slight_smile:

2 Likes
3

@robingranqvist - Nice effort on your first post!

If you want create and style the button in Webflow, you can add some custom code (plain JavaScript) with an embed anywhere on the page, to listen for the click on that element (I gave the button an ID of calendyButton, in the designer, then used that in the code example. The script will fire off the widget overlay when your custom button is clicked:

Make sure you replace the url: value of youraccount with your calendy Account settings → My link → value in the script.

<script>
    var calendyButton = document.getElementById('calendyButton');
        calendyButton.addEventListener("click", function() {
            Calendly.initPopupWidget({ url: 'https://calendly.com/youraccount' });
     return false;
     })
</script>

This code needs to be in the document head for your page:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>
<!-- Calendly link widget end -->
8 Likes
4

Thank you @robingranqvist I think that will work great as well!
Really appreciate it :slight_smile:

@webdev Thank you!

For some reason I don’t see the button when adding the code.

Am I totally missing something? :slight_smile:

Read Only Link
Page link

1 Like
5

@krubens I think he meant for you to add a standard webflow button with the ID “calendyButton” and then add an Embed with the JS code anywhere on the page.

Way smarter than whatever I could think of. :slight_smile:

@webdev Thank you so much!

6

I did. Nice catch. Just more time in the ring @robingranqvist. Of course, you could use any ID you want. Just needs to be unique and match in the script. :slight_smile:

7

Yes, thats what I did :slight_smile: But the embed is not showing. I just have the webflow button there to show the styling.

8

Can you share your Read-Only project link so I can take a look? Or a published link would work for me.

9

Read Only Link
Page link

Does this work?

10

Make sure you replace the url: value of youraccount with your calendy Account settings → My link → value in the script. That will resolve the issue.

11

ah… sorry! Didn’t think that would matter. Thank you so much for you help! :slight_smile:

12

This is excellent! I was trying to do the same thing and this is working nicely. The only challenge I’m having is that it works great for the first instance of the button on the page, but doesn’t work for an identical button further down the page. same link, same button. Just adding a second CTA at the bottom so you dont have to scroll back up. Any thoughts?

13

The code was written to target an element by its ID. On a page ID’s must be unique in the HTML spec. If one wanted to trigger the code with multiple targets, the code would need to be refactored to use a class name like below. Note the class is lowercase (Webflow changes it on publish). In this case that would be “calendybutton”.

<script>
    var calendyButton = document.getElementsByClassName('calendybutton');
        calendyButton.addEventListener("click", function() {
            Calendly.initPopupWidget({ url: 'https://calendly.com/youraccount' });
     return false;
     })
</script>

You would still need to add the external JS as provided in my solution above.

14

Hi there!

This is exactly the same problem I’m currently having, and I’m thankful there are some great responses here - although I’ve not had any luck getting this working.

The only difference is, I’m trying to do it with the Pop-up text option instead.

Here’s what I’ve done so far.

I have set the buttonID to calendyButton.

I have the HTML embed with the following code:

<script>
    var calendyButton = document.getElementById('calendyButton');
        calendyButton.addEventListener("click", function() {
            Calendly.initPopupWidget({ url: 'https://calendly.com/daretoinspire/30min' });
     return false;
     })
</script>

And the following code in the head tag:

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>
<!-- Calendly link widget end -->

I have multiple buttons on the page that I’d like to trigger the popup (and have noted I have to get the button by classname instead of ID to do this), however I thought I’d get the script working before tinkering with the buttons.

Any help would be greatly appreciated!!

Cheers,

Luke

15

Hi, I have added the code as you’ve stated to integrate Calendy to a button click but I’m not having any joy? Are you able to shed any light? Below is the share link for my site. Thanks in advance.

https://preview.webflow.com/preview/leigh-foley-design-strategic-web-design?utm_medium=preview_link&utm_source=designer&utm_content=leigh-foley-design-strategic-web-design&preview=d9c295e33aee2e76f659a6b7c35bd98d&mode=preview

16

@Leigh_F- You can move your embed below the button or you could add the code to the page before body close area.

17

Legend, thanks for the reply adding it to the page body worked a treat!

1 Like
18

Quick question for anyone who can answer - struggling with what I’ve done wrong here. Maybe its a simple fix.

read-only-link

I’ve tried just about everything on the page here to some extent or another, but can’t seem to get it going. My intent is to put the link on the “Book Now” buttons.

Thanks in advance!

19

Bildschirmfoto 2020-04-24 um 14.23.55

It’s not the ID of your button. Please change that to “calendlybutton”.

20

I just tried the solution with .getElementsByClassName for multiple elements from @webdev, but it did not work for me. After tuning it a bit I found a way to really select all elements with the same class name.
Just use this:
This text will be hidden
<script> var calendyButton = document.getElementsByClassName('calendlybuttonclass'); var counter; for (counter = 0; counter < calendyButton.length; counter++) { calendyButton[counter].addEventListener("click", function() { Calendly.initPopupWidget({ url: 'https://calendly.com/monishabajaj' }); return false; })} </script>

3 Likes