Botão do WhatsApp no site: como instalar e saber de onde veio a conversa

Colocar um botão do WhatsApp no site leva dez minutos. O problema aparece no dia seguinte, quando as primeiras conversas chegam: “Oi, quero saber o preço”. Sem página, sem anúncio, sem campanha. O comercial atende, o marketing não sabe o que gerou o contato, e a verba do mês seguinte é decidida no chute.

Este guia faz as duas coisas. Primeiro, o que todo tutorial ensina: o formato oficial do link, o código do botão flutuante e a instalação em WordPress, Elementor, Wix e Google Sites. Depois, o que quase nenhum ensina: como fazer cada conversa chegar com um código de origem, como cruzar isso com o clique que o GA4 já registra sozinho e onde o botão, mal posicionado, rouba a conversão que deveria trazer.

O que é o botão do WhatsApp no site?

É um link que abre uma conversa com o número da empresa no WhatsApp, sem que o visitante precise salvar o contato. Pode aparecer como um botão comum no meio da página (“Falar no WhatsApp”, ao lado de um preço ou de um serviço) ou como o botão flutuante, aquele círculo fixo num canto da tela que acompanha a rolagem.

Por trás dos dois formatos existe a mesma peça: o link de conversa do WhatsApp, que a Meta chama de “clique para conversar”. Plugin, gerador e widget de plataforma são só maneiras diferentes de desenhar o botão em volta desse link. Entender o link é o que permite controlar o que chega do outro lado.

Vale separar de duas coisas parecidas. O anúncio de clique para o WhatsApp, que roda no Instagram e no Facebook, abre a conversa sem passar pelo site, e tem regras e janelas próprias, explicadas no nosso guia sobre os dois tipos de anúncio no WhatsApp. E a integração com CRM, que trata do que acontece com a conversa depois que ela começa. Aqui o assunto é o botão do site e o caminho entre o clique e a primeira mensagem.

Por que o WhatsApp virou o botão que o visitante procura?

Porque ele está, literalmente, na frente do usuário. No Brasil, o WhatsApp é o aplicativo que mais aparece na tela inicial do celular, e a presença cresceu de um ano para o outro.

Para quem vende, isso tem duas leituras. A boa: conversar pelo WhatsApp não exige esforço do visitante, e o botão tende a atrair quem ainda não quer preencher formulário. A ruim: como todo mundo tem o botão, ele virou ruído. O que diferencia uma empresa da outra não é ter o botão, é saber o que ele traz, e atender a conversa sabendo de onde ela veio.

Como criar o link do botão do WhatsApp com mensagem pronta?

O formato oficial está na Central de Ajuda do WhatsApp. São três regras, e a maioria dos botões quebrados quebra numa delas.

1. O número vai em formato internacional, só dígitos

O link base é https://wa.me/ seguido do número completo: código do país, DDD e telefone, sem zero na frente, sem parênteses, sem traço e sem espaço. Para um número de São Paulo, fica https://wa.me/5511900000000 (troque pelo seu). Escrever wa.me/+55-(11)... é o exemplo que a própria ajuda do WhatsApp marca como errado.

2. A mensagem pronta entra no parâmetro text, codificada

Para a conversa abrir com um texto já escrito, acrescente ?text= e a mensagem codificada para URL: espaço vira %20, “á” vira %C3%A1, dois-pontos vira %3A. A frase “Olá! Quero um orçamento. Código: gads-sp” fica assim:

https://wa.me/5511900000000?text=Ol%C3%A1!%20Quero%20um%20or%C3%A7amento.%20C%C3%B3digo%3A%20gads-sp

Não codifique à mão. Qualquer navegador faz isso: abra o console (F12), digite encodeURIComponent("sua mensagem") e copie o resultado. Acentos sem codificação são a causa mais comum de mensagem que chega com caracteres estranhos.

3. O texto é uma sugestão, não uma garantia

A mensagem aparece escrita no campo de digitação, mas o visitante pode apagar, editar ou trocar tudo antes de enviar. Isso importa para o que vem depois: o código de origem que você colocar no texto vai chegar na maioria das conversas, não em todas. Planeje a medição contando com essa perda.

Como fazer um botão flutuante do WhatsApp em HTML?

Em site próprio, o botão é um link comum com posição fixa. Não precisa de plugin, biblioteca nem script de terceiros, o que também poupa a página de carregar código que só serve para desenhar um círculo. O essencial cabe em duas peças.

O link, colado antes do fechamento do </body>: <a class="whats" href="https://wa.me/5511900000000?text=Ol%C3%A1!" target="_blank" rel="noopener" aria-label="Falar no WhatsApp">WhatsApp</a>

E o estilo que o prende ao canto: .whats{position:fixed;right:16px;bottom:96px;z-index:50;min-width:56px;min-height:56px;border-radius:28px;display:flex;align-items:center;justify-content:center}. O bottom alto é de propósito: ele deixa o botão acima de uma eventual barra fixa de CTA no celular, assunto da seção sobre posição, mais adiante.

Dois detalhes fazem diferença. O aria-label dá nome ao botão para leitor de tela quando ele só mostra o ícone. E o target="_blank" faz o link abrir em outra aba no computador, para o visitante não perder a página em que estava; no celular, o link de conversa costuma abrir direto o aplicativo.

Como colocar o botão no WordPress, no Elementor, no Wix e no Google Sites?

Em toda plataforma, o caminho é o mesmo: conseguir um lugar onde colar o link wa.me (num botão) ou o trecho de HTML (no flutuante). O que muda é quanto controle cada uma dá sobre o link, e é esse controle que decide se a origem vai chegar na conversa.

Comparativo elaborado pela Alliance Comunicação. Nomes de menus mudam com as atualizações de cada plataforma.

No WordPress, o plugin resolve rápido, mas confira duas coisas antes de instalar: se ele permite mensagem diferente por página e se carrega script pesado em todas as páginas. Plugin que fixa uma única mensagem para o site inteiro é exatamente o que produz a conversa sem origem. No Elementor, o widget de botão aceita qualquer link no campo de URL, então dá para usar mensagens diferentes em cada modelo de página.

No Google Sites, o limite é técnico: o código incorporado roda dentro de um quadro isolado, e por isso um botão que flutua sobre a página inteira não funciona como num site próprio. A saída prática é um botão comum, no topo e no fim de cada página, cada um com a mensagem daquela página.

Por que a conversa chega no WhatsApp sem dizer de onde veio?

Porque o WhatsApp não recebe nada do site além do texto. O visitante pode ter chegado por um anúncio de Google Ads, com UTM caprichada, navegado por três páginas e clicado no botão do serviço mais caro: do lado de lá aparece só um número e “Olá”. A campanha, a página e o anúncio ficaram no navegador.

Os parâmetros UTM, que funcionam tão bem para o GA4 (e que explicamos no guia de utm_source e as campanhas que viram Não atribuído), não atravessam para a conversa. O link wa.me não tem campo para eles. E a maioria dos plugins usa uma mensagem fixa para o site todo, de modo que a pergunta sobre o preço do serviço A e a dúvida sobre o serviço B chegam com a mesma frase.

O resultado é um buraco no meio do funil. O GA4 mostra que alguém clicou; o atendimento mostra que alguém escreveu; nada liga uma coisa à outra. Quando o comercial pergunta “como você nos conheceu?”, a resposta vem tarde, vem vaga (“pelo Google”) e raramente é registrada.

O site sabe de onde o visitante veio. A conversa, não. O código na mensagem é a ponte entre os dois.

Como fazer a conversa chegar com a página e a campanha de origem?

A solução é carregar a origem no único lugar que atravessa para o WhatsApp: o texto da mensagem. Funciona em quatro passos.

1. Defina uma tabela curta de códigos

Um código por campanha e um por página de serviço, curto e legível para quem atende: gads-sp, meta-reels, pag-precos. Evite o endereço inteiro da página: ele polui a mensagem e assusta quem vai enviar. A tabela fica numa planilha que o comercial também consulta.

2. Faça o botão montar a mensagem com o código

Em site próprio, um script de poucas linhas lê a campanha do endereço de entrada e reescreve o link de todos os botões. A lógica: guardar o utm_campaign da primeira página (porque ele some quando o visitante navega), usar o caminho da página quando não houver campanha e montar o link com encodeURIComponent:

1. var q = new URLSearchParams(location.search);
2. try { if (q.get("utm_campaign")) sessionStorage.setItem("origem", q.get("utm_campaign")); } catch (e) {}
3. var origem = (function(){ try { return sessionStorage.getItem("origem"); } catch (e) { return null; } })() || location.pathname;
4. var msg = "Olá! Quero um orçamento. Código: " + origem;
5. document.querySelectorAll("a[href*='wa.me']").forEach(function(a){ a.href = "https://wa.me/5511900000000?text=" + encodeURIComponent(msg); });

O try existe porque o navegador pode bloquear o armazenamento da sessão (aba anônima, cookies bloqueados); sem ele, o script quebraria e o botão ficaria sem link. Em plataforma sem acesso a script, a versão manual é escrever uma mensagem diferente em cada página: Código: pag-precos na página de preços, Código: pag-servico-x na do serviço X.

3. Treine quem atende a registrar o código

O código só vira informação quando alguém o copia para o contato: num campo do CRM, numa etiqueta do WhatsApp Business ou, no mínimo, numa planilha. Se a empresa já integra o WhatsApp ao CRM, o campo de origem entra no roteiro descrito no guia de CRM com WhatsApp. Sem esse passo, o código chega e se perde no histórico.

4. Seja transparente com o visitante

Um código curto e legível no fim da mensagem não engana ninguém: o visitante vê o que vai enviar. Evite esconder dados pessoais ou identificadores longos no texto. A função do código é dizer de onde veio a visita, não quem é a pessoa.

O que o GA4 já registra quando alguém clica no botão do WhatsApp?

Mais do que muita gente imagina, e sem tag nenhuma. Se a medição otimizada estiver ativa no fluxo de dados do site, o clique num link wa.me já entra como clique de saída.

Na prática: filtrando o evento click por link_domain igual a wa.me, você tem a contagem de cliques no botão, com a página em que aconteceram. E, como o script do passo anterior reescreve o link antes do clique, o link_url registrado já contém a mensagem com o código. Isso não exige Tag Manager; quando exigiria, explicamos no guia sobre quando a tag do Google basta.

O que o GA4 não vê é se a mensagem foi enviada. O clique abre o WhatsApp; daí em diante, o site está fora da conversa. Por que isso impede de tratar o clique como lead, e o que fazer com o sinal que vem do CRM, está no nosso guia de eventos do GA4 que levam o lead até a venda. Aqui, o clique serve para outra coisa: ser o denominador da conta da próxima seção.

Como cruzar o clique do GA4 com a conversa que chegou?

Com o código de origem nas duas pontas, a conta é simples: conversas recebidas com o código ÷ cliques registrados no GA4 com o mesmo código, no mesmo período. O resultado é a taxa de envio, a parte dos cliques que virou mensagem de verdade.

1. No GA4, monte uma exploração com o evento click filtrado por link_domain igual a wa.me, separado por página ou por campanha da sessão. Anote os cliques da semana por código.
2. No CRM ou na planilha do atendimento, conte as conversas da mesma semana por código, e quantas chegaram sem código nenhum.
3. Divida um pelo outro, código a código. Taxa baixa numa página específica aponta atrito ali: mensagem pronta estranha, botão clicado sem querer, promessa da página que não bate com a conversa.
4. Leve o código até a venda. Quantas conversas de gads-sp viraram proposta e cliente? É essa linha que decide verba, e é ela que o retorno ao Google Ads pode aproveitar, como mostra o guia de conversões offline no Google Ads.

As conversas que chegam sem código também contam a história: visitante que apagou o texto, que salvou o número e escreveu depois, que veio de outro canal. Se essa fatia for grande, a mensagem pronta está pedindo para ser editada, e vale encurtar.

Onde o botão flutuante do WhatsApp rouba conversão?

O botão flutuante é desenhado para estar sempre visível, e esse é o problema quando há outra coisa que precisa estar visível no mesmo canto. No celular, o canto inferior direito é disputado: barra fixa de “Pedir orçamento”, botão de finalizar compra, aviso de cookies, widget de chat do próprio site.

• Sobre a barra de CTA: o círculo tampa parte do botão principal, e o toque que ia para o orçamento vai para o WhatsApp, ou para lugar nenhum.
• Sobre o checkout: na hora de pagar, um convite para conversar é um convite para sair. Esconda o botão nas páginas de carrinho e pagamento; o motivo de abandono que o pagamento resolve está no guia de checkout transparente.
• Sobre o formulário: se a página existe para o formulário, o botão flutuante compete com ele. Ofereça o WhatsApp como alternativa ao lado do formulário, não por cima.
• Sobre outro chat: dois círculos no mesmo canto confundem e se sobrepõem. Escolha um.

O tamanho também conta. O critério 2.5.8 da WCAG 2.2, de nível AA, pede alvo de toque de pelo menos 24 por 24 pixels CSS, e um botão que vai ser tocado com o polegar, em movimento, merece folga além do mínimo. Por que o tamanho e a cara de botão pesam tanto está no guia de call to action.

O botão do WhatsApp substitui o formulário de contato?

Na maioria dos negócios, não. Os dois atendem pessoas diferentes: quem quer resposta rápida e quem quer mandar o pedido e seguir o dia. Tirar o formulário empurra para o WhatsApp quem não queria conversar agora, e tirar o botão perde quem não preencheria formulário nenhum.

Comparativo elaborado pela Alliance Comunicação.

Em B2B, o formulário costuma trazer o contexto que o comercial precisa para qualificar, desde que peça pouco, como mostramos no guia sobre o formulário de contato e o campo que ninguém usa. A combinação que funciona é o WhatsApp como porta rápida e o formulário como porta completa, os dois medidos com a mesma régua de origem.

Quais os erros mais comuns com o botão do WhatsApp no site?

• Número em formato errado: com zero, parênteses ou traço no link, a conversa não abre no número certo.
• Mensagem sem codificação: acento e espaço crus quebram o texto ou o link.
• Mensagem única para o site inteiro: é a origem do problema deste artigo.
• Código longo ou estranho: visitante que não entende o texto apaga, e a origem vai junto.
• Ninguém registra o código: a mensagem chega certa e se perde no histórico do celular.
• Botão sobre o CTA ou o checkout: troca a conversão principal por uma conversa incerta.
• Plugin pesado: script de terceiro carregado em todas as páginas para desenhar um círculo.
• Contar clique como venda: o clique é o começo da conta, não o resultado.

Por onde começar hoje

Comece pelo teste do celular: veja que mensagem o seu botão envia a partir de duas páginas diferentes. Depois, monte a tabela de códigos com as três campanhas e as três páginas que mais trazem visita, ajuste o link dos botões e combine com o atendimento onde o código vai ser anotado. Em uma semana, já dá para fazer a primeira divisão entre conversas e cliques.

Medir a origem da conversa é trabalho de CRO, a otimização da taxa de conversão: ligar o que acontece no site ao que acontece no atendimento e mexer onde há perda. Se você quer saber onde o seu funil vaza antes de mexer no botão, o diagnóstico de marketing gratuito da Alliance avalia os canais de conversão e a mensuração e devolve as prioridades por etapa.