Help me with an onClick snippet?

Design help Custom code
1

Hi, I found this thread that shows a method to enable adding an onClick event to a Webflow element: Add onClick attribute to any element with this JS snippet

Seems simple enough, and as far as I can see, I set it up right. But obviously not because it’s not working and I can’t seem to figure it out.

I’m adding it to a button, in order to trigger a Calendly embed popup.

Calendly had me add a snippet to the page, which I did. Then Calendly instructed me to trigger some additional code onClick, which I’m using the above method for.

Calendly instructions: https://help.calendly.com/hc/en-us/articles/360019861794-Common-embed-questions#2

Any help would be greatly appreciated, I promise I’ve worked on it for a while, and just can’t seem to get it working.

Here’s my read-only link: https://preview.webflow.com/preview/evolvexguarddigital?utm_medium=preview_link&utm_source=designer&utm_content=evolvexguarddigital&preview=7afe0513159290498294ac5febd2ce3d&mode=preview

Thanks a bunch.

2

Hey, @jackwabbit try pasting your whenClicked script Before </body> tag and can you add your published .io link so that we can look.

1 Like
3

Hi Sachin, thanks for replying! So move this script:

<script>
    window.onload = function() {
        var anchors = document.getElementsByTagName('*');
        for(var i = 0; i < anchors.length; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {
                code = this.getAttribute('whenClicked');
                eval(code);   
            }
        }
    }
</script>

from the head section to the"Before tag"? section?

Or did you mean the Calendly script that I current have in the attribute section of the button element?

If you’re talking about the script I have in the attribute section, if I added that before the /body section, would I need to target the button too? With something like this?:

document.getElementById("cta").onClick ='Calendly.showPopupWidget('https://calendly.com/jacksbusiness/15min');return false;';

And here is the .io link: https://evolvexguarddigital.webflow.io/

Sorry for my slow response, stepped away to eat some dinner.

4

Hi community. Shameless bump :sweat_smile:

I think I made it a bit confusing in my reply to @Sachin sorry for that.

Anybody else have any ideas on how I might be able to get what I described in the original post working?

@benavnon not sure if you’re still active on the forum or not, but do you know if the method in your thread I linked to in OP is still working?

5

Hey got it working. Had to remove return false; from the end of the Calendly snippet.

1 Like
6

FINALY - Thank you for posting the solution, I was going crazy trying to trigger Calendly from a button.

Btw, did you use a button element or did you style a div as a button?

7

Wow man… You saved me a lot of time too! Thanks Jack!!

Daniel, I used a button on my side.

8

Hi, just want to point out that the whenClicked snippet (from 2016) is using eval() that is usually considered dangerous and best avoided so you don’t accidentally allow malicious code injection on your site, see eval() - JavaScript | MDN!

I was able to add a custom onClick just by using the Custom Code settings. Set the ID of your element then add something like this to the Footer code.

<script type='text/javascript'> 
document.getElementById("nav-contact-button").onclick = function() {
 //do something, for example
 CustomContactPopup.show();
}
</script>
9

I found a way! :tada: You can workaround the onclick attribute using addEventListener. Check the following documentation:

Here’s the example:

const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction);

function myFunction() {
  alert("Hello World");
}
10

I have multiple buttons all with the same ID that i would like to trigger towards the same function. It seems this solution only works to the first ID it finds but not others on the same page. Do you have any idea on how to solve that?

11

Try to use getElementsByClassName with class name of your buttons inside the quotes instead of using getElementById with ID name.

12

I have found a nice workaround without having to deal with custom code snippets.

Steps:

  1. Insert a link block where you want the button.
  2. Style the link block how you see fit, and set the position to Relative
  3. Add a Code Embed element. Set position to Absolute.
  4. Inside this Code Embed add the following snippet from Calendly.
<button onclick="Calendly.initPopupWidget({url: 'https://calendly.com/YOUR_CALENDLY_LINK'});return false;"></button>
  1. Add the Calendly stylesheet to the head of your code.
  2. Add the Calendly js script to before the /body tag section.