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

Sem plugin: Aparência → Personalizar → CSS adicional para o estilo, e o HTML num bloco de HTML personalizado no rodapé (widget) ou via Ferramentas → Editor de tema → footer.php. Se o seu tema tem opção "código no rodapé", use ela — sobrevive a atualizações do tema.

Wix

Configurações → Código personalizado → Adicionar código, escolhendo "Corpo — fim" e "Todas as páginas".

Shopify

Loja online → Temas → Editar código → theme.liquid, colando antes de </body>. Duplique o tema antes de editar.

Webflow, Squarespace, Framer

Todos têm um campo de "código personalizado no fim do body", nas configurações do site. Mesma cola.

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.