Hi there, i just purchased the pro version of buttonizer and i am having some troubles. I basically set up a 5 star review option so that it's easier to get our customers to leave us a review, however, the buttons are appearing over the pop up. i would like them to stay behind the pop up. you can see on the link below. Make sure to click the 1st, 2nd, or 3rd star.
buttons appearing over popup
- Edited
Hi @janayharris ,
Welcome to our community!
It seems that the z-index of your buttonizer buttons is too high. You can fix that by adding the following Custom CSS in your wordpress:
.buttonizer-group {
z-index: 9999 !important;
}
Castor
Thank you that did work. Additionally, can you assist with highlighting the stars? If it's possible id like the one's before to highlight yellow as well.
- Edited
Hi janayharris ,
It took a while but I think I managed to find out how to do this!
Using the new Buttonizer API it was possible to select all the buttons and add a new hover effect that adds the color onto the previous buttons.
Copy and paste this script into your site's footer;
<script>
window.addEventListener("buttonizer_initialized", (obj) => {
const hoverCSS = document.createElement("style")
hoverCSS.innerHTML = `
.buttonizer-hover i {
color: rgb(243 233 0) !important
}
`
document.head.appendChild(hoverCSS)
let elements = []
Object.values(obj.detail.groups).map(group => {
Object.values(group.buttons).map(button => {
if(!button.data.is_menu) {
elements.push(button.element)
}
})
})
for(let element in elements) {
elements[element].addEventListener("mouseover", () => {
for(let previous in elements.slice(0, element)) {
elements.slice(0, element)[previous].classList.add("buttonizer-hover")
}
})
elements[element].addEventListener("mouseout", () => {
for(let previous in elements.slice(0, element)) {
elements.slice(0, element)[previous].classList.remove("buttonizer-hover")
}
})
}
});
</script>
And it should work like this:
Let me know if it works for you!
I can't seem to get it to work! Can you tell me where i need to plug in that script?
Hi janayharris ,
You could use this plugin to insert a custom html into the footer of your site:
https://wordpress.org/plugins/insert-headers-and-footers/
After you've installed the plugin, go to settings -> Header and Footer
Scroll down and inside the Footer textbox, copy and paste the script from above.
Great this worked!
I have one last question! Is there a way to only allow one use per person?
Like after the user clicks it, I would like a statement to appear saying thanks but not allowing them to fill it out more than once.
Hi janayharris ,
Glad to hear that the code worked!
Regarding your last question, sorry but unfortunately, that is currently not possible in Buttonizer.
No worries, any recommendations on a expiring link option?
janayharris, Sorry we currently also don't have any options for an expiring link.