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

1. Accede al editor de tu página;

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

2. Haz clic en el icono "**+**" y selecciona la opción "**HTML/CSS**";

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

3. A continuación, se abrirá el cuadro de HTML dentro de su página;

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

4. En la pestaña de código, basta con hacer clic en el cuadrado en blanco e insertar el script de abajo;

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


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

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

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