Botão do WhatsApp no Site: como criar, configurar e testar em 5 passos

Botão do WhatsApp no site para contato direto
📅 Publicado em · 🔄 Atualizado em · ⏱ 7 min de leitura

📌 Em resumo

  • O botão do WhatsApp no site é um link comum apontando para https://wa.me/55DDDNUMERO.
  • O número vai sem +, sem espaço, sem parêntese e sem traço — só dígitos, com código do país.
  • Para mensagem automática, acrescente ?text= com o texto codificado na URL.
  • Botão flutuante resolve mobile, mas precisa de z-index alto e não pode cobrir conteúdo.
  • Teste sempre em celular real e marque o clique como conversão no GA4.

O botão do WhatsApp no site é um link que abre a conversa direta com a empresa, sem que o visitante precise salvar o número. Ele usa o formato oficial https://wa.me/ seguido do número com código do país e DDD, e pode carregar uma mensagem pré-escrita. É o caminho mais curto entre a visita e o atendimento em negócios de serviço.

O que é e para que serve o botão do WhatsApp no site

O botão do WhatsApp no site elimina três etapas que costumam matar o contato: copiar o número, salvar na agenda e procurar a empresa na lista. Um toque abre a conversa já identificada.

Para PME de serviço, esse é normalmente o canal de conversão principal. Formulário funciona para quem tem paciência; WhatsApp funciona para quem decidiu agora.

Impacto em SEO e em buscas com IA

O botão em si não posiciona a página. O efeito indireto é o que importa: menos atrito significa mais interação, menos abandono e um sinal de página útil. Para buscadores e assistentes de IA, uma página que deixa o caminho de contato explícito também é mais fácil de resumir corretamente.

O formato oficial documentado pelo recurso “clique para conversa” do WhatsApp é:

https://wa.me/5544999999999
  • 55 — código do Brasil.
  • 44 — DDD, sem o zero na frente.
  • 999999999 — o número, só dígitos.

Nada de sinal de mais, parêntese, traço ou espaço. Qualquer caractere extra quebra o link em parte dos aparelhos.

Como incluir mensagem automática

Acrescente o parâmetro ?text= com a mensagem codificada para URL (espaço vira %20):

https://wa.me/5544999999999?text=Ol%C3%A1%2C%20vim%20pelo%20site%20e%20quero%20um%20or%C3%A7amento

Use mensagens diferentes por página. Quem clica na página de orçamento não está no mesmo estágio de quem clica no artigo do blog — e a mensagem pré-escrita já entrega esse contexto para quem atende.

💡 Insight

A mensagem pré-escrita é um campo de rastreamento disfarçado: “vim pela página de landing page” diz de onde veio o lead sem depender de ferramenta nenhuma.

Como inserir o botão no site (HTML e botão flutuante)

Na sua forma mais simples, o botão do WhatsApp no site é um link com classe própria:

<a class="btn-whatsapp"
   href="https://wa.me/5544999999999?text=Ol%C3%A1%2C%20vim%20pelo%20site"
   target="_blank" rel="noopener">
  Falar no WhatsApp
</a>

Versão flutuante, fixa na tela

.btn-whatsapp-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  border-radius: 50%;
  padding: 14px;
  background: #25D366;
}
  • z-index alto para não ficar atrás de banner de cookies ou menu fixo.
  • Área de toque mínima de 44×44 px, recomendação de acessibilidade em mobile.
  • Distância do rodapé suficiente para não cobrir botão de envio de formulário.

Se o site for em WordPress, dá para resolver com bloco HTML no rodapé ou com plugin. Em criação de landing page focada em conversão, o botão normalmente é embutido direto no template para não depender de plugin extra.

Onde posicionar o botão

Botão do WhatsApp no site em destaque na página de contato
O botão do WhatsApp no site precisa estar visível sem cobrir o conteúdo principal.
LocalQuando usar
CabeçalhoSempre — é o contato de referência do site
Fim de cada seção de serviçoQuando a página explica uma oferta específica
FlutuanteMobile, em site com páginas longas
RodapéReforço, junto do endereço e telefone
Dentro do conteúdo do blogSó quando o artigo leva a uma decisão de contato

Botão demais cansa e reduz a taxa de clique. A lógica de hierarquia visual é a mesma discutida em princípios de design responsivo e em influência do UX no SEO.

🎯 Aplicação prática

Coloque três pontos de contato: cabeçalho, fim da página de serviço e botão flutuante no mobile. Use mensagem pré-escrita diferente em cada um e compare qual gera mais conversa em 30 dias.

Como testar e quais erros evitar

  1. Abra o site em um celular real, não só no emulador do navegador.
  2. Toque no botão e confirme que a conversa abre com o número certo e a mensagem preenchida.
  3. Repita em iOS e Android — o comportamento de abertura difere.
  4. Teste no desktop: deve abrir o WhatsApp Web.
  5. Marque o clique como evento de conversão no GA4 para medir de verdade.

Erros mais comuns

  • Número com +55 ou com parêntese no link.
  • Zero antes do DDD.
  • Mensagem sem codificação de URL, o que corta o texto no primeiro acento.
  • Usar o número pessoal do dono em vez de uma linha comercial.
  • Botão flutuante cobrindo o botão de enviar do formulário.
  • Ninguém responde. Botão rápido com atendimento lento é pior que não ter botão.

O último item é o mais caro e o menos técnico. Ter o canal exige rotina de atendimento — tema que tratamos na configuração do WhatsApp Business para empresa, com catálogo, respostas rápidas e mensagem de ausência. O passo seguinte costuma ser integrar o atendimento ao chat online no site.

Perguntas frequentes

Qual é a URL correta do botão do WhatsApp no site?

É https://wa.me/ seguido do número com código do país e DDD, só dígitos. Exemplo: https://wa.me/5544999999999. Não use sinal de mais, espaço, parêntese ou traço.

Preciso do WhatsApp Business para usar o botão?

Não é obrigatório, o link funciona com conta comum. Mas a versão Business entrega catálogo, respostas rápidas, etiquetas e horário de atendimento, que fazem diferença no volume.

Dá para colocar mais de um número no site?

Dá, separando por setor ou unidade, desde que fique claro qual é qual. Dois botões genéricos lado a lado só geram indecisão.

Como saber quantas pessoas clicaram no botão do WhatsApp no site?

Configure um evento de clique no Google Tag Manager e marque-o como evento-chave no GA4. Assim o clique entra nos relatórios de conversão junto com os outros canais.

Botão flutuante atrapalha a experiência no celular?

Só quando é grande demais ou cobre conteúdo. Ícone circular de 48 px no canto inferior direito, com margem do rodapé, resolve sem prejudicar a leitura.

Seu site recebe visita, mas o WhatsApp não toca?

A AZZ Agência estrutura os pontos de contato do site e a rotina de atendimento para transformar visita em conversa.

Quero atender melhor pelo WhatsApp →
Diego R. Lazzari Consultor e Estrategista Digital — AZZ Agência @diegorlazzari

Tem alguma dúvida?

Não hesite em entrar em contato conosco. Nos chame no whatsapp ou por email e nossa equipe irá te atender.

AZZ Agência de Marketing Digital - Logo branca

Buscando  soluções criativas para ajudar sua empresa expandir fronteiras de forma digital, seja criando um site, cuidando das suas midias sociais ou fazendo um marketing digital completo.

contatos

Desenvolvido por Azz Agência

Copyright © 2025. All rights reserved.