What is a javascript click action?
The premium version of Buttonizer supports custom javascript as a button action. It can be useful to execute a specific javascript function on a button click.
Before you start using this function, read the following do's and dont's below.
When to use this feature? 😎
- You need to trigger one or more javascript functions
- You need to trigger a third-pary javascript function
- You want to let something happen that Buttonizer can't do yet
- You want to set javascript variables
How NOT to use this feature 🧯 🔥
There are a few things we don't recommend you to do:
- Write tons of lines. If you have something like that in mind, just make another javascript file, import that to your site and then execute the function here
- You want to import javascript or CSS files (no, it won't work)
- Write pure CSS (manipulating style of elements in javascript is allowed)
Still here? Let's write a simple demo!
First, select the button wich should execute javascript when someone clicks it. Then select 'Javascript' as button action.
Now click the button Open javascript code editor. A modal will apear where you can write code.
Let's write some simple javascript using the alert function that uses a variable. Add the following code:
var text = "I am a variable!";
alert(text);
Okay, save it, close the modal and press the button! It will execute this javascript code and you'll see an alert.
Great! Now execute a function
Write a simple function in javascript to try this out.
var text = "I am a variable!";
function simpleFunction() {
// You can do some stuff in here
alert(text);
}
// Do NOT forget to call your function, Buttonizer won't do that for you
simpleFunction();
Can I use jQuery?
Yes! To make sure you it will always work, use the jQuery variable instead of $ to avoid any jQuery conflicts. You can find a simple demo script below.
// Show or hide all titles on your website
jQuery("h1, h2, h3, h4, h5").toggle();
Executing third party scripts
When you want to execute third party functions on a button click, make sure you've imported the javascript code on your website.
Just execute the function following their instructions. Super simple! When you're not sure how to implement that function, or your mind is blown by this feature 🤯, you can ask support in the support forums! We'll help you through!
