adding custom attribute to button

Casparsmits

Hello Buttonizer,

We have started a function to track our phone calls and the links in our Call now button will be dynamically changed. To do this, a custom class and a custom attribute have to be added. Custom class was easy to find, but how do I add a custom attribute to the button? We would like to add data-aen="***" so that the button html looks like this:

Is that possible?

Jasper

Hey there,

Thanks for your question! We unfortunately do not support custom attributes inside the editor itself, but there is a workarround you can use 🙂

You can give a button a custom ID, then with JavaScript you wait until Buttonizer is loaded and then add the attribute through JavaScript. I'll write an example below 🙂

For example, give a button an ID attribute through the Buttonizer editor, something like: the_unique_button_id.

Then add the following code to your website:

window.addEventListener("buttonizer_initialized",  () => {
   document.querySelector("#the_unique_button_id").setAttribute("data-aen", "myvalue");
});

If you have more buttons where you want to give them additional attributes, you can duplicate the querySelector:

window.addEventListener("buttonizer_initialized",  () => {
   document.querySelector("#the_unique_button_id").setAttribute("data-aen", "myvalue");
   document.querySelector("#another_button").setAttribute("data-aen", "second value");
   document.querySelector("#third_button").setAttribute("data-aen", "third value");
});

Let me know if this helps!

Casparsmits

Hi Jasper, it defnitely helps! I'm almost there but can't seem to solve the last problem.

<a role="button" class="buttonizer-closed-0-0-49 buttonizer-button buttonizer-button-0-0-44" href="tel:+31202106027" id="belonsbuttonizer" aria-describedby="buttonizer-button-0-0-44-label"><i aria-hidden="true" class="fas fa-phone buttonizer-icon-0-0-45"></i><div class="buttonizer-label buttonizer-label-0-0-47" id="buttonizer-button-0-0-44-label">Bel ons</div></a>

I need to add the data-aen="" and a class to the child <div> of the parent <a> element (#belonsbuttonizer). I can't seem to get it to select the div child of the #belonsbuttonizer, do you know how to do that?

Both the #belonsbuttonizer and the child <div> need to get the data-aen in there.

Jasper

Hey Casparsmits ,

Thanks for your reply! Apologies for the delay in my reply!

I'm glad to hear you were able to fix the first issue!

The querySelector is actually quite advanced, you can do much more with it, such as targetting sub elements.

With the following code, you can target the button-label class. You can also refer the element with #belonsbuttonizer > div, which will target the same div as well. But using the following way, you are always sure that you target the label-div:

document.querySelector("#belonsbuttonizer .buttonizer-label").setAttribute("data-aen", "label value");

Let me know if this helps 🙂