• Support
  • buttons appearing over popup

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.

https://nocodoorservices.com/reviews/

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.

      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?

        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.