How to create a FLOATING WHATSAPP BUTTON

1. Go to the page editor;

2. Click on the gear icon in the top right corner of the screen;

3. Then click on "Javascript & CSS";

4. Click to "Adicionar" a new code;

5. Choose a name for your code, select the "Funcionamento" option and add all the code below into the text field;

<a href="https://api.whatsapp.com/send?phone=55{DDDNÚMERO}" class="float" aria-label="Botão para contato no 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 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 {
        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>

6. The only change you will need to make in the code is to replace the part of the link where it says {DDDNUMERO} with your WhatsApp number. **Do not add spaces or dashes, and remove the curly brackets { } **

Then click on "Salvar"!

For security reasons, in preview mode it is not possible to open links external to our platform, so if you try to access the FLOATING WHATSAPP BUTTON in this mode, an error message will appear.

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

Updated on: 08/01/2026