> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

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

1. Open the page editor;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_11hflv.png =650x251)

2. Click the **gear icon** in the upper right corner of the screen;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/settingseditor_1h4rd2g.png =650x176)

3. Then click **"Javascript & CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/clickjavacss_fcd8j6.png =650x451)

4. Click to **"Add code"** a new code;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_k6l46f.png =650x451)

5. 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>
```


![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1tvwdo2.png =650x432)



6. 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.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1p79wlj.png)

Then click **"Add"**!

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