[Resolved] Show WhatsApp button only when a visitor scroll down to the footer

[User 7]

Hello team,

I just followed your great tutorial on how to add sticky social icons and used that to create a “WhatsApp Button” and it’s worked beautifully! Just wondering, if I want this “WhatsApp button element” to show in the footer at the left-side and only when a visitor scroll down to the footer; Is there any option or css code snippet for that?

[David]

Hi there,

so is this going to be part of the Footer or float over the footer ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[User 7]

Let’s put it in the following scenario 🙂
In Mobile/Tablet/Desktop: When a visitor visits the website, there will be no “WhatsApp Button”, but if he/she scrolled down to the bottom (which is here the footer bar) then the “WhatsApp” will shows up as a float button at the lower-left corner of the page. When the visitor scroll up, the “WhatsApp Button” disappears.

I know it seems a bit complicated, but I hope there will be a way to do it without using a plugin.

[David]

Trickier as its going to require Javascript. But lets give this a shot:

1. The Whatsapp button needs to be added inside the site-footer. So following the steps that were provided in that video but use the generate_after_footer_content hook.

And the GB Container Block you first add to the Block Element needs an Advanced > Additional CSS Class of: floating-button

2. Now create a Hook Element, and set that Hook to wp_footer and add this script to hook text area:

<script>
const found = document.querySelectorAll('.site-footer');

observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('in-view');
    } else {
      entry.target.classList.remove('in-view');
    }
  });
});

found.forEach(find => {
  observer.observe(find);
});
</script>

3. Add this CSS to your site:

.gb-container.floating-button {
    position: fixed;
    bottom: 30px;
    left: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
.in-view .gb-container.floating-button {
    opacity: 1;
    pointer-events: auto;
}

Once thats done, and the buttons is visible, let me know so i can take a look at the CSS requirements.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[User 7]

Done.

[David]

Can you edit the Block element. Select the Container Block that the Whatsapp icon is inside of and go in Advance > Additional CSS Class(es) add: floating-button

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[User 7]

Yes, I did it!

[David]

Now in Customizer > Additional CSS or in your Child Theme style.css add this:

.gb-container.floating-button {
    position: fixed;
    bottom: 30px;
    left: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}
.in-view .gb-container.floating-button {
    opacity: 1;
    pointer-events: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[User 7]

Really can’t find words to thank you enough!
Just one minor thing please: The button is not clickable (I put the WhatsApp number already and it was working before).

Any idea?

[David]

Oops updated the CSS above – which was to add the pointer-events: auto; property in the second rule.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[User 7]

I had truly never experienced such a great support team as you in my whole life, I want you to know that and I want everyone in the WordPress industry knows this as well. Keep up the good work and have a beautiful day!

[David]

Well thats super nice of you to say. Glad we can be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts