Streaming live at 10am (PST)

Add onClick attribute to any element with this JS snippet

Hello everyone!

I saw that allot of people, including me, missed the option to add the onClick attribute to elements, mostly for analytics purposes.
So I’ve written a short JavaScript snippet that you can paste in the head tag of your project.
This JavaScript snippet essentially renames the onClick attribute to ‘whenClicked’ (you’re invited to propose a better name lol).
So you can add a custom attribute to any element on your page, name it ‘whenClicked’ and use it it just like you would use ‘onClick’.

    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');

To add attributes to elements you do the following:

  • Choose an element
  • Go to the element’s settings tab
  • Close to the bottom, you’ll find the Custom Attributes section
  • Add the ‘whenClicked’ attribute, while being careful to spell the ‘whenClicked’ correctly, and input your desired code to the value - will it be analytics code or your custom code.

I hope this post will be of help :slight_smile:

And to the Webflow staff, who will probably be reading this,
I love you guys!
And I know that this feature was once available, and that you took it down due to security threats.
But people need this feature!
Bring it back please :heart:


Hi benavnon.

Thanks for your code. This is what I’ve been looking for.

When I test your code with a simple function that changes background color, it works perfectly. But it somehow does not work for the Google Analytics functions such whenClicked=“ga(‘send’, ‘pageview’, ‘vpv/viewers’);”

Do you have any idea?

Simple onClick replacement snippet. This method works by using the ID of the element (links, buttons, div’s, etc.).

First example below stops a video by removing the content of a div and then replaces it again.
Second example will hide or show a element. Both scripts can be modified to use ClassName.

var BTN_1 = document.getElementById('BTN_ID-1');
var BTN_2 = document.getElementById('BTN_ID-2');

//Do Something
function MyFunction_1() {
	document.getElementById('ELEMENT_ID').innerHTML=''; //Removes the div
	document.getElementById('ELEMENT_ID').innerHTML='{iframe code here}'; //Puts the content back

//Do Something
function MyFunction_2() {
	//document.getElementById('ELEMENT_ID').innerHTML=''; //Removes the div
	//document.getElementById('ELEMENT_ID').innerHTML='{iframe code here}'; //Puts the content back

BTN_1.onclick = MyFunction_1; //Start action on click
BTN_2.onclick = MyFunction_2; //Start action on click

var BTN_1 = document.getElementById('BTN_ID-1');
var BTN_2 = document.getElementById('BTN_ID-2');

//Just hide element
function JustHide(){
	document.getElementById('ELEMENT_ID').style.display = "none"; 

//Just show element
function JustShow(){ 
	document.getElementById('ELEMENT_ID').style.display = ""; 

BTN_1.onclick = JustHide; //Start action on click
BTN_2.onclick = JustShow; //Start action on click


For anyone looking for a way to trigger a chatbot with a button (ie. Chatra or others), this code works excellent. This is also great for ensuring your buttons are designed exactly how you want. Thank you @benavnon!

For Chatra: “Open chat by clicking on a button”:

  1. Add the above code in Site Settings > Custom Code > Head
  2. Add ‘whenClicked’ to your button’s custom attribute NAME
  3. Add ‘Chatra(‘openChat’, true)’ to your button’s custom attribute VALUE

Does this still work? I have tried it with my site using code and it does not want to work for me…

More info here

Answered your question in your thread, good luck!

1 Like

This looks great but doesn’t work for GA event tracking.

I thought the cause is that the camel case doesn’t work and changed it, but still not working.

Anyone without any trouble for setting this (“gtag” ver.) ?