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

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

Home Forums Support Show WhatsApp button only when a visitor scroll down to the footer

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #2200457
    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?

    #2200479
    David
    Staff
    Customer Support

    Hi there,

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

    #2200498
    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.

    #2200521
    David
    Staff
    Customer Support

    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.

    #2200540
    User 7

    Done.

    #2200542
    David
    Staff
    Customer Support

    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

    #2200549
    User 7

    Yes, I did it!

    #2200557
    David
    Staff
    Customer Support

    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;
    }
    #2200578
    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?

    #2200785
    David
    Staff
    Customer Support

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

    #2200805
    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!

    #2200858
    David
    Staff
    Customer Support

    Well thats super nice of you to say. Glad we can be of help ๐Ÿ™‚

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.