Questions Regarding Button Formatting

Ttmc-vincentturner · Jul 14, 2021

Dear Buttonizer Administrator,

Thank you for answering me on Wordpress.

I recently purchased the “Pro” version of your plugin, and am excited to start using it.

Please let us know if we need to pay extra to attain the following features.

Demo Page: https://www.texasmigraineclinic.com/test-1

Issue 1: Displaying Icon Only
On our site Texas Migraine Clinic, we’re trying to display the icon only as a “Picture”. This icon will display a floating social proof picture 0px from the left page border (an image similar to the following picture): https://cdn.repuso.com/images/widgets-badge2.png. When clicked, we’re triggering a popup slide-in with reviews.

However, the main issue is that there is no option we can find to just display the icon as a “Picture”. Instead, the only closest option to displaying just the image is “Icon with Text” – not just “Icon”. Is there a way through perhaps CSS to omit the “text” field so only the icon is shown without any text – just a floating picture?

Issue 2: Floating Icon Fade Out Only (Without Dropping)
We’ve made it so that the icon disappears on page scroll. However, the icon makes a somewhat distracting movement when it fades out because it moves down the page slightly as it fades out. So, it’s not just a pure fade-out like we would like. How can we make it so that when the icon disappears on page scroll that the icon fades out “in place” instead of fading out & moving down?

Thanks,
Vincent Turner

James · Jul 14, 2021

Hi tmc-vincentturner ,

Glad to see that you were finally able to login!

I think all of these issues can be resolved with a custom CSS.

.buttonizer .buttonizer-button {
   height: auto !important;
}
.buttonizer .buttonizer-button img {
  margin: 5px !important;
}
.buttonizer .buttonizer-button .buttonizer-label {
  display: none !important;
}
.buttonizer[class*="buttonizer-hidden"] {
  transform: unset !important;
}

Copy and paste this into your WordPress' Additional CSS.
To find WordPress' Additional CSS, go to My Site → Appearance → Customize → Additional CSS

Let me know if this works for you!

Ttmc-vincentturner · Jul 14, 2021

Hi James, thanks - that worked.
Also, there are 3 other issues I've found that I can't seem to resolve (please see attached picture).
It would be great if you could add an optional donation portal one day to Buttonizer (or by private link) because we'd gladly pay extra as a thank-you for help with this. Though we have Pro, these modifications feel like too much to ask for 1 license.

Thank You,
Vincent

James · Jul 14, 2021

tmc-vincentturner ,

No worries about any extra payment!
These are fairly easy to do and it lets us know whether it's a good feature to add in the future.

This custom CSS should resolve issue #1 and #3:

.buttonizer {
    animation: 250ms ease-out 0s 1 fadeIn;
    z-index: 9999 !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}

Regarding issue #2, would you like the button to disappear until the user reloads the page or would you like it to remain hidden for the rest of the session ( until the user closes the site )?

Ttmc-vincentturner · Jul 14, 2021

Hi James, and thanks for your help. That code works great for #1 and #3.
For #2, remaining hidden for the rest of the session would be fantastic.

Thanks!
Vincent

James · Jul 15, 2021

Since you have the pro version of Buttonizer, we can use one of Buttonizer's APIs for #2.

Here's a script that will hide the button after clicking on it and will remain hidden for the rest of the session.

<script>
  window.addEventListener("buttonizer_button_clicked", (obj) => {
	obj.detail.action.button.style.setProperty("visibility", "hidden", "important");
    obj.detail.action.button.style.setProperty("opacity", "0", "important");
    obj.detail.action.button.style.pointerEvents = "none"
    document.cookie = "buttonizer_clicked=true;";
  });
  window.addEventListener("buttonizer_initialized", (obj) => {
    let cookie = JSON.parse(("; "+document.cookie).split("; buttonizer_clicked=").pop().split(";").shift());
    if(cookie === true) Object.values(obj.detail.groups)[0].element.style.display = "none"
  });
</script>

Add this script to the footer of your site.

Ttmc-vincentturner · Jul 15, 2021

Hi James, everything looks great! Thanks for your help.
Also, if you have a user Buttonizer donation option, let me know about that as well.

Cheers,
Vincent