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’.

<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>

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:

39 Likes

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.


script
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
/script


script
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
/script

3 Likes

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 Tawk.to code and it does not want to work for me…

More info here

1 Like

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.) ?

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

Here’s the example:

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

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

Hi @AlterFonico - thanks for adding this. Sorry for the noob question, but if you have time (or anyone else) can someone help me put a few addl pieces together that seem related but incomplete regarding your addeventlistener suggestion? More info below if anyone has time:

  • I have build a webflow website. In the footer custom code, I have a Segment snippet listed below.
  • Now, I want to use Segments “track call” Spec: Track | Segment Documentation for any button clicks.
  • I thought I could use some kind of onClick or maybe addEventListener, but I am unclear of a few things, namely:
  1. Do I need to add anything else to the Footer Custom Code?
  2. What do I specifically do in the element itself? Should I use onClick or addEventListener? And if so, what is an example line of code for either?

Thanks so much for anyone’s help in advance!

<script>
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey=“WRITEKEY;;analytics.SNIPPET_VERSION="4.15.3";
  analytics.load("WRITEKEY");
  analytics.page();
  }}();
</script>