Articles on: Page Editor

How to TRIGGER the WHATSAPP FLOATING BUTTON on SCROLL

If your page already has the WhatsApp floating button installed, you must delete or disable that code in order to implement the one below. If you have questions about how to do this, you can access this link --> https://ajuda.greatsoftwares.com.br/pt-br/article/como-editar-ou-excluir-o-botao-de-whatsapp-dos-templates-1tu9nxq/ or reach out to our team on Chat! We're always happy to help.

Open the page editor;

Click the gear icon in the upper right corner of the screen;

Then click "Javascript & CSS";

Click to "Add code" a new code;

Choose a name for your code, select the " Operation " option and add the entire code below in the text field;

<a href="https://api.whatsapp.com/send?phone=55{DDDNÚMERO}" class="float" id="botao_whatsapp">
    <svg class="icon">
        <path d="M.33,48.33,3.06,35.62A23.67,23.67,0,0,1,0,24,24.06,24.06,0,0,1,24.12,0h0a23.95,23.95,0,1,1,0,47.89,24.33,24.33,0,0,1-11-2.61ZM13.7,41.08l.67.36a20.3,20.3,0,0,0,9.74,2.49A20,20,0,1,0,4,24a19.78,19.78,0,0,0,2.89,10.3l.41.68L5.52,43Z" ></path>
        <path d="M34.67,31.75C34.22,33,32,34.21,31,34.31S30,35.12,24.5,33s-9-7.77-9.27-8.13S13,21.92,13,19.27a6.08,6.08,0,0,1,1.89-4.5,2,2,0,0,1,1.45-.67c.36,0,.72.05,1,.05s.77-.18,1.22.9,1.54,3.72,1.67,4a1,1,0,0,1,.05.95,3.53,3.53,0,0,1-.54.89c-.28.32-.58.71-.82.95s-.55.56-.24,1.09a16.48,16.48,0,0,0,3,3.73,14.93,14.93,0,0,0,4.37,2.68c.54.26.86.22,1.17-.14s1.36-1.58,1.72-2.12.72-.45,1.22-.26,3.17,1.47,3.71,1.74.9.41,1,.63A4.4,4.4,0,0,1,34.67,31.75Z" ></path>
    </svg>
</a>
<style>
:root {--icon-color: #fff; --icon-hover: #fff; --background-color: #00c800; --background-hover: #009600 }
.icon {width: 48px; height: 48px; transform: scale(0.6) translate(20%, 20%); fill: var(--icon-color);pointer-events: none; }
.float {display: none; position: fixed; cursor: pointer; width: 60px; height: 60px; bottom: 40px; right: 40px; transition: 1s; background-color: var(--background-color); border-radius: 50px; animation: pulse 3s infinite; -webkit-animation: pulse 3s infinite; -moz-animation: pulse 3s infinite; -o-animation: pulse 3s infinite; z-index: 900000 }
.float:hover { background-color: var(--background-hover) }
.float:hover .icon { fill: var(--icon-hover) }
@-webkit-keyframes pulse {
  0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
  70% { -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
  100% { -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
}
@-o-keyframes pulse {
  0% {-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
  70% {-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
  100% {-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
}
@-ms-keyframes pulse {
  0% {-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
  70% {-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
  100% {-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
}
@-moz-keyframes pulse {
  0% {-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
  70% {-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
  100% {-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
}
@keyframes pulse {
  0% {-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 1) }
  70% {-webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0) }
  100% {-webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0) }
}
</style>
<script type="text/javascript">
  var bloco = $('.gpc-b').not('.esconder_desktop').first();
  if($(window).width < 800){ bloco = $('.gpc-b').not('.esconder_mobile').first();}
  var controle = bloco.height()-(bloco.height()*0.75);
  $(document).on('resize',function(e){
    bloco = $('.gpc-b').not('.esconder_desktop').first();
    if($(window).width < 800){bloco = $('.gpc-b').not('.esconder_mobile').first();}
    controle = bloco.height()-(bloco.height()*0.75);
  });
  $(document).on('scroll',function(e){
    if(window.scrollY >= controle){
      $('#botao_whatsapp').css('display','block');
    } else {
      $('#botao_whatsapp').css('display','none');
    }
  });
  if($(window).scrollTop >= controle){
    $('#botao_whatsapp').css('display','block');
  }
</script>

The only change you need to make to the code is to modify the link section that reads 55{DDDNUMERO} by replacing "55" with your country code, "DDD" with your area code, and "NUMERO" with your WhatsApp number. Do not add spaces or hyphens, and remove the brackets.

Then click "Add"!

Still have questions? Reach out to our team on Chat! We're always happy to help.

Updated on: 08/12/2026

Was this article helpful?

Thank you!