Since the Buttonizer 2.2 update we've written an extensive JavaScript API which you can use to interact with one or more Buttonizer instances. For this purpose we've made the window.Buttonizer object available. This variable contains the ButtonizerApi container which contains multiple handy JavaScript functions to interact with Buttonizer.
All available JavaScript functions
window.Buttonizer.open(?string group_id) - Opens one or more button groupswindow.Buttonizer.close(?string group_id) - Closes one or more button groupswindow.Buttonizer.toggle(?string group_id) - Opens or closes one or more button groupswindow.Buttonizer.groups() - Shows a list of all loaded button groupswindow.Buttonizer.options(string group_id) - Directly access available group functionswindow.Buttonizer.options(string group_id).isOpened() - Checks if the group is openedwindow.Buttonizer.options(string group_id).open() - Opens button groupwindow.Buttonizer.options(string group_id).close() - Closes button groupwindow.Buttonizer.options(string group_id).toggle() - Toggles button groupwindow.Buttonizer.options(string group_id).element - DOM containerwindow.Buttonizer.options(string group_id).id - Button IDwindow.Buttonizer.hasPremium()window.Buttonizer.setParameter(string parameterName, string value) - Sets a Custom Parameter
Open and close menus
The following functionality opens or closes the groups.
Open all button groups
The open() function accepts 1 parameter which is not required. Without this parameter, all button groups will be opened.
Example usage:
window.Buttonizer.open();
Open a single button group
With the same open() function it is possible to open one single button group instead of all of them at the same time. To do this, you need to add the group_id parameter. You can find the group ID in the URL or by using the groups() function.
Example usage:
window.Buttonizer.open("0f9e7901-073c-4317-bce3-7eff945f5808"); // Example ID
Close all button groups
The close() function accepts 1 parameter which is not required. Without this parameter, all button groups will be closed.
Example usage:
window.Buttonizer.close();
Close a single button group
With the same close() function it is possible to close one single button group instead of all of them at the same time. To do this, you need to add the group_id parameter. You can find the group ID in the URL or by using the groups() function.
Example usage:
window.Buttonizer.close("0f9e7901-073c-4317-bce3-7eff945f5808"); // Example ID
Toggle all button groups
The toggle() function accepts 1 parameter which is not required. Without this parameter, all button groups will be toggled, depending on their status. If a menu was opened, it will close. If the menu was closed, it will open.
For example, you have two button menus and one of them is opened and the other one is closed, when you execute this function it will close the button menu that was opened, and it will open the button menu that was closed.
Example usage:
window.Buttonizer.toggle();
Toggle a single button group
With the same toggle() function it is possible to toggle one single button group instead of all of them at the same time. To do this, you need to add the group_id parameter. You can find the group ID in the URL or by using the groups() function.
Example usage:
window.Buttonizer.toggle("0f9e7901-073c-4317-bce3-7eff945f5808"); // Example ID
Loop through button groups
We've made it easy to loop through all the available button groups. They will provide you an array with objects that have direct access to the group and button.
Loop through all groups
window.Buttonizer.groups();
Object parameters
The object you receive will have the following options available:
[{
close: ƒ close()
element: div.group-0-0-1.buttonizer-group
id: "0f9e7901-073c-4317-bce3-7eff945f5808"
isOpened: ƒ isOpened()
open: ƒ open()
toggle: ƒ toggle()
}]
Code examples
window.Buttonizer.groups().forEach((obj, key) => {
console.log(`Button ${obj.id} is ${obj.isOpened() ? 'opened' : 'closed'}!`);
});
Buttonizer hooks
Hooks are events that are activated by the buttonizer instance. You can hook onto these events and add callback functions to make magic happens whenever certain Buttonizer events take place!
Hooking onto one of these events is done using the document addEventListener function.
window.addEventListener(name, callback)
- name: the name of the hook to hook onto. See all available hooks below.
- callback: your callback function. Will be called with an object that includes details about the event. See details per hook below.
Current hooks:
buttonizer_loading
First hook, called right when the Buttonizer api has been initialized.
Details: undefined
buttonizer_get_data_start
Called right before getting data from our backend API
Details: undefined
buttonizer_get_data_end
Called right after getting data from our backend API
Details: {
data: (object) all buttonizer data, straight from our API
}
buttonizer_loaded
Called after Buttonizer has loaded and rendered. Runs every time after buttonizer has rerendered in preview.
Details: {
groups: (object) all buttonizer groups
}
buttonizer_initialized
Called after Buttonizer has loaded and rendered, and after buttonizer_loaded. Runs only once, not even after rerendering in preview.
Details: {
groups: (object) all buttonizer groups
}
buttonizer_reload
Called after the buttonizer frontend has gotten the request from the dashboard to refresh to get the new changes. Only in preview.
Details: undefined
buttonizer_group_opened
Called after user has clicked on a group button to open or close it. Has not yet opened when this is called.
Details: {
open: (boolean) whether the group will open or close
group_id: (string) the group's id that will open/close
}
buttonizer_button_clicked (PRO only)
Called after a user has clicked on a button. Performed before action is performed
Details: {
action: (object) the button action that will be performed
button_id: (string) the button id of the button that was clicked on
}
Code example
The following example will close a group automatically after 1 second:
window.addEventListener("buttonizer_group_opened", (obj) => {
if(obj.detail.open) {
setTimeout(() => {
window.Buttonizer.close(obj.detail.group_id);
}, 1000)
}
});
Other code examples
We've some other code examples you might want to play with.
Open groups on button click
Sometimes you'd like to open or close a menu as soon a guest has clicked on a button in your User Interface (UI). We provide you some interesting examples how you could use Buttonizer.
HTML:
<button id="open_buttonizer">Click me! I open all menus!</button>
<button id="close_buttonizer">Close all menus!</button>
<button id="toggle_buttonizer">Toggle all menus!</button>
<script>
// Wait for Buttonizer to be ready
window.addEventListener("buttonizer_initialized", () => {
document.querySelector("#open_buttonizer").addEventListener("click", () => {
window.Buttonizer.open();
});
document.querySelector("#close_buttonizer").addEventListener("click", () => {
window.Buttonizer.close();
});
document.querySelector("#toggle_buttonizer").addEventListener("click", () => {
window.Buttonizer.toggle();
});
});
</script>
