Botão Whatsapp com Animação de mensagem (Elementor)

gistfile1.txt

<!-- 
Para alterar o link do botão do whatsapp 

Coloque seu link dentro do atributo <a href=""> abaixo.

Exemplo: 
<a href="https://SeuLink.com.">


Para exibir o botão do whatsapp é só colocar section-midia no id de algum bloco elemntor
-->


<style>
    .area-button-whatsapp{
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 40px;
        right: 40px;
        z-index:1000000;
    }
    
    .area-button-whatsapp p{
        opacity: 0;
        margin: 0 10px 0 0;
        padding: 5px 10px;
        border-radius: 12px;
        background: darkgray;
        color:#fff;
    }
    
    .area-button-whatsapp .btn-whatsapp{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height:50px; 
        width:50px; 
        background-color:#25d366; 
        color:#FFF; 
        border-radius:50px; 
        text-align:center; 
        box-shadow: 2px 2px 3px #999; 
        z-index:1000000; 
        padding: 0px;
    }
    
    .area-button-whatsapp .btn-whatsapp .notification-whatsapp{
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        right:0;
        opacity: 0;
        height: 16px;
        width: 16px;
        background: red;
        border-radius: 50%;
    }
    .area-button-whatsapp .btn-whatsapp img{
        width: 70%; 
    }
    
    .show-animation-whatsapp p,
    .show-animation-whatsapp .notification-whatsapp {
        animation: show-message-whatsapp 1s forwards ease-in-out 5s;
    }
    
    .has-hide{
        height: 0;
        width: 0;
        opacity: 0;
    }
    
    @keyframes show-message-whatsapp{
        0%{
            opacity: 0    
        }
        
        100%{
            opacity: 1    
        }
    }
</style>

<div class="area-button-whatsapp has-hide">
    <p>Nos Mande uma mensagem em caso de dúvida</p>
    <a href="https://api.whatsapp.com/send?phone=556199451074&text=Eu%20Quero%20Saber%20Mais%20Sobre%20o%20Travesseiro%20Meu%20Sono%20Brasil" class="btn-whatsapp" target="_blank">
        <div class="notification-whatsapp">1</div>
        <img class="my-float" src="https://i.ibb.co/TMR8RQz/whatsappicon.png"></img>
    </a>
</div>
<!-- Não alterar daqui pra baixo-->

<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script>
    // armazena o scrolltop do elemento que deseja aguardar
var scrollTopoffset = jQuery('#section-midia').offset().top - jQuery(window).height();

let showWhats = false
let btnWhats = document.getElementsByClassName('area-button-whatsapp')

jQuery(window).scroll(function() {
  if (jQuery(window).scrollTop() > scrollTopoffset && !showWhats) {
  showWhats = true
  btnWhats[0].classList.remove('has-hide');
  btnWhats[0].classList.add('show-animation-whatsapp');
  }
});
</script>