> ## 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 track CLICK-BASED CONVERSIONS on the FLOATING WhatsApp BUTTON

The floating WhatsApp button can track every click as a conversion on your page. This allows you to see exactly how many people reached out via WhatsApp, and these clicks appear alongside your leads in the reports.

1. Access your page editor;

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

2. Click the "+" icon and select the "**HTML/CSS**" option;
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_op2i2d.png =650xauto)

3. Next, the HTML box will open within your page;

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

4. In the Code tab, simply click on the blank square and enter the script below;
![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_146p28w.png =650x480)



```
<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. n the code, replace {**DDDNÚMERO**} with your WhatsApp number, keeping the "**55**" at the beginning. Do not add spaces, hyphens, or parentheses, and remove the curly braces { }.
Example: for the number (11) 91234-5678, the first line looks like this:
```
<a href="https://api.whatsapp.com/send?phone=5511912345678" class="float gpc-conversion"
```

6. Click **Save** and then **Publish** (or **Update**, if the page is already live). Tracking only works on the published page; clicks are not counted in the preview..

Have any questions? Contact our team via Chat! We are always ready to help. <3