I am using wordpress and there is no way to add custom attribute to HTML element via theme. I found that it can be done via Jquery, but it doesn't help me.
Attributes that I want to add to HTML element on load (No need to click anything specific):
data-tf-popup="Vxs1VOeK"
data-tf-hide-headers=""
data-tf-transitive-search-params="utm_source, utm_medium,utm_campaign,utm_term,utm_content"
data-tf-iframe-props="title=Dermatologo konsultacija internetu - iDerma"
data-tf-medium="snippet"
data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx"
Specific button/item to which I want to add it. Currently it has Ahref, but I will remove the ahref, to keep it empty.
<li id="menu-item-37" class="menu-singup menu-item menu-item-type-custom menu-item-object-custom menu-item-37" data-tf-popup="Vxs1VOeK"><a href="https://form.typeform.com/to/Vxs1VOeK">Pradėti konsultaciją</a></li>
Any help will be appreciated!
You can add the attributes via jQuery's .attr() function. The first parameter determines the attribute you're adding while the second parameter is the value of the said attribute.
Example:
$(document).ready(() => {
$('#element_id').attr('data-tf-popup', 'Vxs1VOeK');
$('#element_id').attr('data-tf-hide-header', '');
// ...
});
You can make it cleaner by using JSON objects as such:
$(document).ready(() => {
const attr = {
'data-tf-popup': 'Vxs1VOeK',
'data-tf-hide-header': '',
'data-tf-transitive-search-params': 'utm_source, utm_medium,utm_campaign,utm_term,utm_content',
// ...
}
for (let key in attr) {
$('#element_id').attr(key, attr[key]);
}
});