Embed Calendly trouble with OnClick Attributes

hugosmith · June 23, 2020, 5:18pm

Hey,

Site link: https://preview.webflow.com/preview/innovate-wealth?utm_medium=preview_link&utm_source=dashboard&utm_content=innovate-wealth&preview=4ca6892ebcb56c225e3097a708638dea&mode=preview
I was just trying this on my “Start Here” page, and it didn’t seem to be working. The listener is in an embed at the end, and the code is in the head. Any idea why it’s not working?

Also: I would love to do this site-wide, because I want to have a Calendly embed in the navbar. Where should I put the code in order to do this?

Thanks, and sorry to bother you,

Hugo

webdev · June 23, 2020, 9:32pm

@hugosmith
Your script is looking for elements with a class name of calendlybutton which none exist. You do have an element with the ID of calendlyButton. If you are using classnames then add the class to your element and pay attention to case.

var calendyButton = document.getElementsByClassName('calendlybutton');

You also need to change the url to your calendly profile, not some other user.

hugosmith · June 23, 2020, 10:49pm

@webdev
I changed it to a lowercase class on my site, and it seems to still not work.

All the code is in the site-wide because I need it to work globally.

Any other ideas?

webdev · June 24, 2020, 1:40pm

Your implementation is wrong. Your target elements are using the same ID not classnames for one. If you need implementation help I am available for freelance work.

hugosmith · June 24, 2020, 4:02pm

Okay. It seems I was making two mistakes.

As @webdev said, I was using the button ID instead of a class . I also tried to put the listener in the site-wide . Don’t ask me why, but for some reason moving it to an embed in the navbar fixed my problem.

Lou667 · July 21, 2020, 10:52pm

I’m having some trouble embedding Calendly and was hoping I could get some help.

Here is what I want to do.

All carousel buttons when clicked open the Calendly pop-up
Footer buttons on each page, when clicked open the Calendly pop-up

Initially, I used the [getElementById] script provided by Jeff S, and the one carousel button on the initial slide worked. I could not get the footer button to work at all.

But since I want all the buttons on the slider to launch the Calendly pop-up, I switched it to the [getElementsByClassName], and everything stopped working.

Here are the details.

I added the following code to the page’s body code section:

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

Then I added a code embed section right after the carousel slider with the following code:

<script>
    var calendyButton = document.getElementsByClassName('slider-bigbutton');
    calendyButton.addEventListener("click", function() {
    Calendly.initPopupWidget({ url: 'https://calendly.com/wallstofloors/free-consultation' });
    return false;
     })
</script>

For the footer buttons, I did not add the first two link widget code snippets, because I figured they’re already there. And the footer buttons have a combo class, but I only used the initial class.

So that’s my story. Can anyone figure out why things aren’t working for me?
Here is my Read Only Link.

Jaime_Matarazzo · September 24, 2020, 2:25pm

Just registred to say:
Thank youuuuuuuu @webdev!!!

thebergdesign · March 12, 2021, 2:11pm

webdev:

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

Hi @webdev, I’ve followed your solution and it works as intended, except the popup displays a menu with supposedly all of my appointment types (of which I only have one), so clients need to click on the appointment type before accessing the calendar itself. Is there a way to display the calendar straight away, and to bypass the step of showing the appointment types first?

I’ve attached a video to show what I mean.

webdev · March 12, 2021, 2:30pm

@thebergdesign - just update the URL value to point to the event page.

thebergdesign · March 15, 2021, 11:41am

@webdev Thank you, that worked.

I am now trying to display the same button on two other pages, but when I copy everything over to these other pages, the button doesn’t work. Am I missing something?

Thanks

thebergdesign · March 18, 2021, 2:35pm

@webdev Perhaps you missed my above reply? Thanks

The issue is on my ‘about’ and ‘services’ pages - here is a read only link (https://preview.webflow.com/preview/the-berg-design?utm_medium=preview_link&utm_source=designer&utm_content=the-berg-design&preview=91c9062ddd3222d634b69dca1276b6da&mode=preview)

webdev · March 18, 2021, 2:39pm

@thebergdesign - Perhaps I am busy making a living?

Your issue is probably related to the use of ID as the selector. Only one element on a page can share the same name. Refactor your script to use classes and loop through the results.

Denise_Dambrackas · September 27, 2022, 8:54pm

You rock! You’ve saved me! Thanks you.

davidk77 · October 13, 2022, 10:38pm

awesome. This saved my project. what’s the matter here why did you need to add a counter and how did you come up with?