Como colocar um botão do WhatsApp no seu site
Um botão simples não precisa de plugin: um link do WhatsApp e um pouco de CSS resolvem. A seguir, você encontra dois trechos de código prontos, um botão comum e outro flutuante, além de uma forma de medir cliques sem confundi-los com conversas.
5 min de leituraAtualizado em
Nesta página
Um link em HTML com CSS costuma bastar quando o objetivo é abrir uma conversa. Um widget pode fazer sentido para exibir horários, pedir consentimento, encaminhar atendimentos ou integrar um CRM. Escolha pela função e meça o impacto, não só porque a ferramenta é vendida como plugin.
Primeiro, gere seu link
Crie aqui o link com seu número e uma mensagem curta. Depois, substitua SEU-LINK em um dos exemplos.
Opção 1: botão no conteúdo
Este link já funciona como um botão de texto. target="_blank" é opcional: use-o se quiser abrir o WhatsApp em outra aba e mantenha rel="noopener".
<a href="SEU-LINK" target="_blank" rel="noopener">Fale conosco pelo WhatsApp</a>
O texto visível explica o destino para todas as pessoas, inclusive quem usa leitor de tela. Se deixar apenas um ícone, adicione aria-label="Fale conosco pelo WhatsApp" e mantenha um indicador de foco visível.
Opção 2: botão flutuante com HTML e CSS
Cole o HTML no corpo da página e o CSS na folha de estilos ou no bloco de CSS personalizado. O exemplo fica no canto inferior direito, respeita a área segura do iPhone e mostra o foco do teclado:
<a class="wa-float" href="SEU-LINK" target="_blank" rel="noopener">WhatsApp</a> .wa-float { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 1000; padding: .8rem 1rem; border-radius: 999px; color: #fff; background: #087f5b; font-weight: 700; text-decoration: none; box-shadow: 0 4px 16px #0003; } .wa-float:focus-visible { outline: 3px solid #111; outline-offset: 3px; } @media (max-width: 480px) { .wa-float { right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); } }
Teste onde os conflitos realmente aparecem
Confira no celular e no computador com o banner de cookies, o carrinho e o teclado abertos. Troque right por left se o botão cobrir uma ação principal. Um z-index alto não justifica esconder o checkout, recursos de acessibilidade ou um canal de suporte já existente.
Onde instalar
| Ambiente | Implementação | Verificação |
|---|---|---|
| HTML próprio | Cole o link e o CSS no seu template. | Teste o foco, o layout no celular e o destino. |
| WordPress | Use um bloco HTML e o CSS adicional do tema. | Confira se o editor não remove os atributos. |
| Criador de sites | Use o botão nativo da ferramenta com SEU-LINK. | Não é preciso código se ele aceitar URL e posição. |
| GTM | Reserve para equipes que já administram mudanças por tags. | Revise permissões, CSP e manutenção. |
O que escrever no botão
- "Fale conosco pelo WhatsApp" descreve melhor o destino do que "Contato".
- Se houver horário de atendimento, coloque essa informação ao lado para alinhar expectativas.
- Não abra um balão automaticamente sem testar: ele pode competir com a tarefa principal ou cobrir conteúdo.
- Em uma página de preços, compare um texto específico, como "Consultar planos", com a versão genérica.
Como medir cliques, conversas e vendas
A medição otimizada do GA4 pode registrar o evento click de um link externo para wa.me. Um link curto diferente por posição também fornece aberturas, país e dispositivo, inclusive fora do site. Nos dois casos, você mede a ida para o WhatsApp, e não o envio da mensagem.
- 1
Separe as posições
Use um link ou identificador diferente para o botão flutuante, o bloco de contato e o rodapé.
- 2
Conte a abertura
Meça pelo clique externo do GA4 ou pelo link curto. Escolha uma fonte principal para não duplicar os dados.
- 3
Registre a conversa e a venda
Use uma mensagem pronta diferente em cada posição e depois marque o atendimento com uma etiqueta ou no CRM.
- 4
Teste uma variável por vez
Teste posição, texto ou horário, com período e critério de sucesso definidos antes de consultar os resultados.
Limites do link rastreado no plano Free
O Free mostra sete dias de métricas e permite 100 cliques por mês. Depois disso, aparece uma página intermediária com publicidade. A edição do destino está disponível nos planos Basic e Premium.
Perguntas frequentes
Preciso de um plugin para colocar o WhatsApp no site?
Não para um botão simples: um link e CSS são suficientes. Um widget pode ajudar com horário, consentimento, encaminhamento ou integração com CRM. Antes de decidir, meça o peso e a utilidade dele no seu site.
Funciona no computador?
Sim. Se a pessoa tiver o aplicativo do WhatsApp para computador, o link pode abri-lo; caso contrário, será usado o WhatsApp Web. A mensagem pronta é mantida.
Posso colocar vários números?
Um link wa.me abre apenas um número. Para distribuir o tráfego entre vários números, crie um link geral com destinos ponderados. O gerador específico do WhatsApp não monta essa distribuição diretamente.
O botão flutuante deixa o site mais lento?
Um link com CSS pode ser leve, mas ícones, fontes e estilos também têm peso. Um widget adiciona recursos e scripts. Compare o Lighthouse e os Core Web Vitals antes e depois, em vez de presumir o efeito.
Como saber qual botão do site gera mais contatos?
Use um identificador ou link diferente por posição para contar aberturas e uma mensagem, etiqueta ou CRM para confirmar a conversa e a venda. Um clique isolado não prova que houve contato.
Faça o link ser seu e meça cada clique
Crie uma conta grátis para seus links não expirarem e medir país, dispositivo e origem.