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 groups
window.Buttonizer.close(?string group_id) - Closes one or more button groups
window.Buttonizer.toggle(?string group_id) - Opens or closes one or more button groups
window.Buttonizer.groups() - Shows a list of all loaded button groups
window.Buttonizer.options(string group_id) - Directly access available group functions
window.Buttonizer.options(string group_id).isOpened() - Checks if the group is opened
window.Buttonizer.options(string group_id).open() - Opens button group
window.Buttonizer.options(string group_id).close() - Closes button group
window.Buttonizer.options(string group_id).toggle() - Toggles button group
window.Buttonizer.options(string group_id).element - DOM container
window.Buttonizer.options(string group_id).id - Button ID
window.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>

What can we help you with?