Cómo registrar la CONVERSIÓN POR CLIC en el BOTÓN FLOTANTE de WhatsApp
El botón flotante de WhatsApp puede registrar cada clic como una conversión en tu página. De esta forma, sabrás cuántas personas te contactaron a través de WhatsApp, y estos clics aparecerán junto con tus clientes potenciales en tus informes.
- Accede al editor de tu página;
- Haz clic en el icono "+" y selecciona la opción "HTML/CSS";
- A continuación, se abrirá el cuadro de HTML dentro de su página;
- En la pestaña de código, basta con hacer clic en el cuadrado en blanco e insertar el script de abajo;
<a href="https://api.whatsapp.com/send?phone=55{DDDNÚMERO}" class="float gpc-conversion" aria-label="Botão para contato no WhatsApp">
<span class="float-label">WhatsApp</span>
<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 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" />
</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-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
pointer-events: none
}
.float {
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: 99999
}
.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>
- En el código, reemplaza {DDDNÚMERO} con tu número de WhatsApp, manteniendo el 55 al principio. No añadas espacios, guiones ni paréntesis, y elimina las llaves { }.
Ejemplo: para el número (11) 91234-5678, la primera línea se ve así:
<a href="https://api.whatsapp.com/send?phone=5511912345678" class="float gpc-conversion"- Haz clic en Guardar y luego en Publicar (o Actualizar, si la página ya está activa). El seguimiento solo funciona en la página publicada; los clics no se contabilizan en la vista previa.
¿Tienes alguna pregunta? ¡Chatea con nuestro equipo! Siempre estamos listos para ayudarte.
Actualizado el: 14/09/2026
¡Gracias!