Como colocar um botão de WhatsApp flutuante no site

Este é o essencial. Cole antes do fechamento do </body> e troque o número:

<a
  href="https://wa.me/5511987654321?text=Ol%C3%A1!%20Vim%20pelo%20site."
  class="wa-float"
  target="_blank"
  rel="noopener"
  aria-label="Conversar no WhatsApp"
>
  <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" aria-hidden="true">
    <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2m0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.26 8.26 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 4.54 0 8.24 3.7 8.24 8.24 0 4.55-3.7 8.24-8.24 8.24m4.52-6.16c-.25-.12-1.47-.72-1.69-.8-.23-.09-.4-.13-.56.12-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.44.12-.14.17-.25.25-.41.08-.17.04-.31-.02-.44-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.44.06-.67.31-.23.25-.87.85-.87 2.07 0 1.22.89 2.4 1.01 2.56.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.6.19 1.14.16 1.57.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.23-.16-.48-.28"/>
  </svg>
</a>

<style>
  .wa-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    transition: transform .15s ease;
  }
  .wa-float:hover { transform: scale(1.06); }
  .wa-float:focus-visible { outline: 3px solid #0b7a3b; outline-offset: 3px; }

  @media (max-width: 600px) {
    .wa-float { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  }
</style>

Alguns detalhes desse código que costumam ser esquecidos e importam:

• aria-label — sem ele, quem usa leitor de tela ouve apenas "link" e não sabe para onde vai.
• rel="noopener" — necessário sempre que usar target="_blank", por segurança.
• focus-visible — deixa o botão navegável por teclado com contorno visível.
• SVG embutido — nada de carregar imagem de outro site: uma dependência externa quebra quando o serviço cai.

WordPress

Não edite o footer.php do tema pelo editor de tema: a próxima atualização do tema substitui o arquivo e o botão some. Dois caminhos que sobrevivem às atualizações:

• Todas as páginas: o plugin gratuito WPCode (antigo Insert Headers and Footers) tem um campo de código para o rodapé. Cole o código inteiro (HTML e CSS juntos) ali.
• Uma página só: no editor de blocos, adicione um bloco HTML personalizado e cole o código.

Wix

Em Configurações → Código personalizado → Adicionar código personalizado, escolha o fim do corpo da página ("Body – end") e todas as páginas. A Central de Ajuda do Wix diz que o recurso exige site publicado e com domínio conectado, e que os códigos são apagados se você trocar o domínio. Os nomes dos menus podem variar entre editores do Wix.

Shopify

Em Loja virtual → Temas, no menu do tema, use Editar código e abra theme.liquid; cole antes de </body>. Duplique o tema antes de editar. A Central de Ajuda do Shopify avisa que alterações no código podem ser removidas quando o tema é atualizado, então guarde o código para colar de novo.

Outras plataformas

Construtores de site costumam ter um campo de "código personalizado" para o fim da página, às vezes só em planos pagos. Consulte a ajuda da sua plataforma.

Landing page de anúncio

Se a página é de campanha paga, confira as regras da plataforma de anúncio antes: algumas exigem que o destino do clique seja rastreável, e um botão que sai do site pode interferir na medição de conversão.

Posição. Canto inferior direito é a convenção — as pessoas já procuram ali. Se o seu site já tem um chat, cupom flutuante ou botão de aceitar cookies naquele canto, mova o WhatsApp para o inferior esquerdo em vez de empilhar dois elementos.

Não cubra o rodapé. Em telas pequenas, um botão de 56px sobre um botão de "finalizar compra" custa venda. Se o seu site tem barra fixa embaixo, aumente o bottom para ficar acima dela.

Mensagem pronta por página. Aqui está o ganho que quase ninguém explora. Em vez de um link igual em todo o site, use mensagens diferentes por seção:

• Página de preços → ?text=Vi os planos e tenho uma dúvida
• Página de produto → ?text=Quero saber sobre [PRODUTO]
• Página de contato → ?text=Vim pela página de contato

A mensagem que chega já diz onde a pessoa estava quando decidiu falar com você. O formato do parâmetro está explicado em como criar link do WhatsApp.

Texto ao lado do ícone. Um botão redondo só com ícone funciona; um botão com "Fale com a gente" ao lado converte mais, especialmente com público mais velho. O custo é ocupar mais espaço.

Não abra automaticamente. Popup de chat que abre sozinho ao entrar na página irrita e aumenta rejeição. Deixe o clique ser do usuário.

Depende de quanto você quer manter. Comparando honestamente:

	Código próprio	Plugin
Peso na página	Praticamente zero	Costuma carregar CSS e JS extras
Configurar horário de atendimento	Precisa programar	Normalmente já tem
Vários atendentes com seleção	Precisa programar	Normalmente já tem
Risco de quebrar em atualização	Baixo	Existe
Custo	Zero	Grátis ou pago, varia

Regra prática: se você quer só um botão que abre a conversa, o código acima resolve e é mais leve. Se você precisa de horário de funcionamento, escolha de departamento ou balanceamento entre atendentes, um plugin economiza tempo.

Independentemente da escolha, use um link curto próprio no destino em vez do wa.me cru. Assim, quando o número mudar, você troca em um lugar só — e não precisa mexer no código do site nem esperar o time de tecnologia.

Um botão flutuante é fácil de instalar e difícil de avaliar, porque o clique leva a pessoa para fora do site. Duas formas de medir:

Pelo link. A mais simples: aponte o botão para um link curto exclusivo, tipo zaplink.pro/site. O contador de cliques desse link é, literalmente, quantas vezes o botão foi usado. Nada para configurar.

Pelo Google Analytics. Se você já usa GA4, dá para registrar um evento no clique:

<script>
  document.querySelector('.wa-float')?.addEventListener('click', function () {
    if (typeof gtag === 'function') {
      gtag('event', 'clique_whatsapp', { origem: location.pathname });
    }
  });
</script>

Com o origem preenchido pelo caminho da página, você descobre quais páginas geram conversa — informação que muda onde vale investir conteúdo. Se quiser aprofundar a leitura desses números, veja como medir WhatsApp no marketing digital.