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

# Cómo ACCIONAR el BOTÓN FLOTANTE de WHATSAPP a partir del SCROLL

||| Si tu página ya tiene el botón flotante de WhatsApp instalado, debes eliminar o deshabilitar el código para implementar este de abajo. Si tienes dudas de cómo hacerlo, puedes acceder a este enlace: https://ajuda.greatsoftwares.com.br/es/article/como-editar-o-eliminar-el-boton-de-whatsapp-de-las-plantillas-1hyequq/ 

1. Accede al editor de páginas;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_1n38kzs.png =650x368)

2. Haz clic en el **ícono de engranaje** que está en la esquina superior derecha de la pantalla;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_1w72fyp.png =650x207)

3. Enseguida, haz clic en **"Javascript y CSS"**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_1i8bp8.png =650x413)

4. Haz clic para **"Añadir código"** un nuevo código;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_zftkz8.png =650x412)

5. Elige un nombre para tu código, selecciona la opción **"Funcionamento"** y agrega en el campo de texto todo el código de abajo;

```
<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_3tomlg.png =650x428)


6. El único cambio que debes hacer en el código es modificar la parte del enlace donde dice **55{DDDNUMERO}**, reemplazando **"55"** por el código de tu país, **"DDD"** por el código de tu provincia y **"NUMERO"** por tu número de WhatsApp. No añadas espacios ni guiones y elimina los corchetes.

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/captura-de-tela-2026-08-07-as-_10oh35u.png =650x796)

Enseguida haz clic en **"Agregar"**!

¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! Siempre estamos listos para ayudarte. :-)