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
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
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’);”
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
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”:
Add the above code in Site Settings > Custom Code > Head
Add ‘whenClicked’ to your button’s custom attribute NAME
Add ‘Chatra(‘openChat’, true)’ to your button’s custom attribute VALUE
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.