O botão do WhatsApp é a conversão mais importante de um site de serviço no Brasil, e um dos elementos mais mal colocados: número errado, sem mensagem, só no rodapé, abrindo na mesma aba, sem medição. Colocar o botão leva dez minutos; colocar do jeito que converte e mede leva uma hora e muda o resultado do site.
Este tutorial mostra o link certo, o código pronto do botão flutuante, como instalar em cada plataforma, como fazer uma mensagem por página, quando usar pré-qualificação antes do WhatsApp, as boas práticas e os erros, e como medir cada clique no Google Analytics e no Google Ads.
O link do WhatsApp: formato e mensagem pré-preenchida
O WhatsApp abre a partir de um link universal. O formato recomendado é o wa.me, que funciona em celular (abre o aplicativo) e em computador (abre o WhatsApp Web).
| Elemento | Formato | Exemplo |
|---|---|---|
| Base | https://wa.me/ | — |
| Número | Código do país + DDD + número, só dígitos | 5511934250444 |
| Mensagem | ?text= seguido do texto codificado para URL | ?text=Ol%C3%A1!%20Vim%20da%20p%C3%A1gina%20de%20implante |
| Link completo | https://wa.me/55DDDNÚMERO?text=mensagem | https://wa.me/5511934250444?text=Ol%C3%A1%21%20Vim%20da%20p%C3%A1gina%20de%20implante%20e%20quero%20agendar. |
Como codificar a mensagem
Espaços viram %20, acentos e símbolos viram códigos. Qualquer gerador de link de WhatsApp ou a função de "codificar URL" de um assistente de IA faz isso; em HTML, o atributo href aceita o texto codificado. O formato antigo api.whatsapp.com/send?phone=… também funciona, mas o wa.me é mais curto e padrão.
Mensagem que funciona
Curta, com a página de origem e a intenção: "Olá! Vim da página de implante dentário do site e quero agendar uma avaliação." A pessoa só precisa enviar; a equipe já sabe de onde veio e o que quer.
Código pronto do botão flutuante do WhatsApp em HTML e CSS
Para sites em HTML (feitos à mão, exportados ou gerados por assistente), o botão flutuante é um link posicionado de forma fixa, com o ícone do WhatsApp em SVG. Descrição do código para pedir ao assistente ou escrever:
- Um elemento a com href do link wa.me, target _blank, rel noopener, aria-label "Falar no WhatsApp" e classe wa-float.
- Dentro, um SVG do ícone do WhatsApp (ou uma imagem leve) com cerca de 28 px.
- CSS: position fixed; bottom 20px; right 20px; width e height 56px; border-radius 50%; background #25D366; display flex; align-items e justify-content center; box-shadow suave; z-index alto; transition de transform para o hover.
- Hover: transform scale(1.06).
- Em telas pequenas, manter 56 px e garantir que não cubra o botão de enviar de formulários (ajustar bottom quando houver barra fixa).
Pedido ao assistente
"Crie um botão flutuante de WhatsApp em HTML e CSS puro: link https://wa.me/55…?text=…, abrindo em nova aba, fixo no canto inferior direito, círculo verde #25D366 de 56 px com o ícone do WhatsApp em SVG branco, sombra leve, leve aumento no hover, acessível com aria-label. Sem JavaScript e sem bibliotecas externas."
Como colocar o botão do WhatsApp em cada plataforma
| Plataforma | Como | Observação |
|---|---|---|
| HTML próprio | Colar o código do botão antes do fechamento do body em todas as páginas | Mensagem por página alterando o href |
| WordPress | Plugin de botão de WhatsApp (há vários) ou código no rodapé pelo tema/plugin de código | Preferir plugins leves; conferir que não carrega scripts pesados |
| Wix | Elemento "Botão do WhatsApp" nativo (Adicionar › Contato) ou botão comum com o link wa.me | Fixar na página para flutuar |
| Hostinger Website Builder | Elemento de WhatsApp nas integrações/elementos; ou botão com link | Configurar número e mensagem |
| Framer | Botão com link wa.me; fixar com position fixed nas propriedades | — |
| Lovable | Pedir no chat: "adicione botão flutuante de WhatsApp com link … e dataLayer.push no clique" | Pedir também a mensagem por rota |
| Canva Sites | Botão com link wa.me repetido nas seções (não há flutuante) | Topo, meio e fim |
| Duda, Webflow, Squarespace | Botão com link ou código personalizado no rodapé | — |
O tutorial de cada construtor está em como fazer um site com IA na Hostinger, como fazer um site no Lovable e como fazer um site com IA no Canva.
Mensagem por página: o detalhe que organiza o atendimento
Um único botão com "Olá, quero mais informações" em todo o site faz a equipe começar cada conversa perguntando "sobre o quê?". Um botão por página, com a mensagem da página, entrega o contexto pronto.
| Página | Mensagem pré-preenchida |
|---|---|
| Home | Olá! Vim do site da [empresa] e quero falar sobre [serviço principal]. |
| Implante dentário | Olá! Vim da página de implante dentário e quero agendar uma avaliação. |
| Clareamento | Olá! Vim da página de clareamento e quero saber como funciona. |
| Blog (artigo X) | Olá! Li o artigo "[título]" no site e tenho uma dúvida. |
| Landing de campanha | Olá! Vi o anúncio de [oferta] e quero [ação]. |
| Contato | Olá! Quero falar com a [empresa]. |
Como fazer sem editar cada página
Em sites HTML, um pequeno script pode montar a mensagem a partir do título da página (document.title) e inserir no href do botão flutuante. Em construtores, costuma ser preciso editar o botão por página. Em Lovable, pedir que a mensagem use a rota atual.
Vários atendentes, horários e número comercial: como organizar o WhatsApp do site
Colocar o botão é a parte fácil; decidir para qual número ele leva, quem responde e o que acontece fora do horário é o que define se os contatos viram clientes.
| Situação | Solução | Como fica o link |
|---|---|---|
| Um atendente | WhatsApp Business no número comercial | Um link wa.me em todo o site |
| Vários atendentes, mesmo número | WhatsApp Business com dispositivos vinculados (até 4 aparelhos) ou API oficial com plataforma de atendimento | Um link; a distribuição acontece na plataforma |
| Vários atendentes, números diferentes | Botão por unidade/área ou rodízio por script (cada clique alterna o número) | Links diferentes por página, ou um script que escolhe |
| Unidades em cidades diferentes | Botão por página de unidade com o número local | Mensagem inclui a unidade |
| Fora do horário | Resposta automática do WhatsApp Business com previsão de retorno e pergunta de qualificação | Mesmo link |
| Volume alto | Pré-qualificação antes do WhatsApp + plataforma com filas | Link montado a partir das respostas |
Número comercial, não pessoal
- Chip da empresa, no nome da empresa; nunca o celular pessoal de um funcionário que pode sair.
- WhatsApp Business com perfil completo: nome, foto (logo), descrição, endereço, horário, site.
- Catálogo quando houver serviços com valores que podem ser divulgados.
- Etiquetas para organizar (novo, qualificado, agendado, cliente).
- Respostas rápidas para as perguntas mais comuns (como chegar, convênios, documentos).
Mensagem automática fora do horário
"Olá! Obrigado pelo contato com a [empresa]. Nosso horário é de segunda a sexta, das 8h às 18h. Responderemos assim que voltarmos. Para adiantar, pode nos dizer qual serviço procura e o melhor horário para falarmos?" A pergunta final mantém a conversa viva e já qualifica.
Script da primeira resposta
- Cumprimento com nome: "Olá, Mariana!"
- Confirmação do contexto que a mensagem trouxe: "Vi que você veio da página de implante."
- Uma pergunta de qualificação: "Já fez alguma avaliação ou seria a primeira?"
- Próximo passo: "Posso agendar uma avaliação sem custo; temos horários amanhã às 10h e quinta às 15h."
- Registro: planilha ou CRM com origem (página), situação e desfecho.
Botão do WhatsApp e LGPD
O clique no botão não coleta dados; a conversa acontece no WhatsApp, fora do site. Ainda assim, a política de privacidade do site deve mencionar o WhatsApp como canal de atendimento e o uso dos dados da conversa. Em pré-qualificações que pedem nome e telefone antes de abrir o WhatsApp, incluir a finalidade em uma linha e nunca pedir dados sensíveis.
Como testar o botão depois de instalar
- No celular, com o WhatsApp instalado: o link abre o aplicativo com a mensagem preenchida.
- No computador: abre o WhatsApp Web (ou o aplicativo de desktop) com a mensagem.
- Em cada página: a mensagem corresponde à página.
- No GTM, modo de visualização: o evento whatsapp_click dispara com page_path e posição.
- No GA4, Tempo real: o evento aparece.
- Fora do horário: a resposta automática chega.
Botão do WhatsApp em landing pages de anúncio
Em páginas de campanha, o botão do WhatsApp é a conversão que o Google Ads otimiza. Três regras extras: a mensagem pré-preenchida inclui a oferta do anúncio ("Vi o anúncio de avaliação sem custo"); o evento whatsapp_click é importado como conversão no Ads com o Conversion Linker ativo; e a página não oferece outra ação concorrente. O passo a passo da conversão está em como configurar a tag de conversão do Google Ads.
Resumo das variações do link
| Objetivo | Link |
|---|---|
| Abrir conversa sem mensagem | https://wa.me/5511999999999 |
| Abrir com mensagem | https://wa.me/5511999999999?text=Ol%C3%A1%21%20Quero%20agendar. |
| Formato antigo (ainda funciona) | https://api.whatsapp.com/send?phone=5511999999999&text=… |
| Link curto do WhatsApp Business | Gerado no app (Ferramentas comerciais › Link curto), com mensagem padrão |
| Grupo | Link de convite do grupo (não recomendado para captação) |
Checklist final do botão do WhatsApp
- Link wa.me com 55 + DDD + número, sem símbolos.
- Mensagem pré-preenchida com página e intenção.
- Botão flutuante 56 px, verde, canto inferior direito, nova aba.
- Botões com texto no primeiro terço e no fim de cada página de serviço.
- WhatsApp Business com perfil completo e resposta automática fora do horário.
- Evento whatsapp_click no GTM com página e posição; evento-chave no GA4; conversão no Ads.
- Testado no celular, no computador e no modo de visualização do GTM.
- Quem responde e em quanto tempo definidos; registro de origem e desfecho.
Botão direto ou pré-qualificação antes do WhatsApp
| Situação | Recomendação |
|---|---|
| Pouco volume, serviço simples | Botão direto com mensagem por página |
| Volume alto, muitos curiosos | Pré-qualificação de 3 perguntas antes do WhatsApp |
| Serviço com variações (área jurídica, procedimento, tipo de obra) | Pré-qualificação que monta a mensagem com as respostas |
| Campanha de anúncios | Pré-qualificação; filtra e melhora o custo por lead qualificado |
| Saúde e direito | Pré-qualificação sem dados sensíveis; nunca valores onde é vedado |
A pré-qualificação é o pop-up ou a Jornada que abre antes do WhatsApp, com três perguntas em botões, e termina enviando a mensagem montada. Como desenhá-la está em como fazer um site que converte.
Boas práticas do botão do WhatsApp
- Abrir em nova aba (target _blank) para a pessoa não perder o site.
- Número com código do país (55), sem espaços, traços ou parênteses.
- Número de um WhatsApp Business, com perfil preenchido (nome, foto, horário, catálogo quando fizer sentido).
- Botão flutuante no canto inferior direito, 56 px, verde do WhatsApp, visível sem cobrir conteúdo ou formulários.
- Botões dentro da página, no primeiro terço e no fim, com texto ("Agendar pelo WhatsApp"), além do flutuante.
- Mensagem curta com página e intenção.
- Resposta automática fora do horário com previsão de retorno.
- Quem responde definido, em até 15 minutos no horário comercial.
- Medição de cada clique com a página de origem.
- Teste no celular (abre o app) e no computador (abre o WhatsApp Web).
Como medir os cliques no botão do WhatsApp
Sem medição, o botão é uma aposta. Com o Google Tag Manager, cada clique vira um evento no GA4 e uma conversão no Google Ads.
- No GTM, acionador de clique em link com Click URL contendo wa.me.
- Tag de evento do GA4 whatsapp_click com page_path e link_text (ou data-pos para a posição do botão).
- Para botões que abrem o WhatsApp por JavaScript (pop-up, Jornada), dataLayer.push({event: "whatsapp_click", source: "jornada"}).
- Marcar whatsapp_click como evento-chave; importar no Google Ads.
- Ler no GA4: cliques por página, por canal e por botão (hero, fim, flutuante).
O passo a passo completo está em como rastrear cliques no WhatsApp no Google Analytics; a taxa, em como calcular a taxa de conversão do site.
Exemplo: o que mudou com botão certo e mensagem por página
| Antes | Depois |
|---|---|
| Um botão no rodapé: "Fale conosco" | Flutuante + botão no topo e no fim de cada página de serviço |
| Sem mensagem; equipe perguntava "sobre o quê?" | Mensagem por página; equipe já responde no contexto |
| Número pessoal, sem perfil | WhatsApp Business com perfil e resposta automática |
| Abria na mesma aba; pessoa perdia o site | Nova aba |
| Sem medição | whatsapp_click por página e botão; conversão no Ads |
| Cliques/mês (estimados) | 28 medidos → 94 medidos no segundo mês |
| Tempo médio de primeira resposta | 2 h 40 min → 11 min |
O site e o tráfego eram os mesmos. A diferença veio do botão, da mensagem, do atendimento e da medição.
Erros comuns com o botão do WhatsApp no site
- Número sem o 55 ou com formatação: o link não abre.
- Sem mensagem pré-preenchida.
- Botão só no rodapé.
- Mesma aba: a pessoa sai do site.
- Flutuante cobrindo o botão "Enviar" de formulários no celular.
- Plugin pesado com chat falso, animações e scripts externos.
- Número pessoal de um funcionário.
- Sem medição; sem saber de qual página veio.
- Resposta lenta ou genérica.
- Vários números espalhados pelo site sem critério.
Perguntas sobre botão do WhatsApp no site
Como colocar botão do WhatsApp no site
Criando o link https://wa.me/55DDDNÚMERO?text=mensagem, colocando-o em um botão flutuante fixo e em botões dentro de cada página com mensagem própria, e medindo os cliques como evento no GA4.
Qual o formato do link do WhatsApp
https://wa.me/ seguido do número com código do país e DDD, só dígitos, e ?text= com a mensagem codificada para URL.
Como colocar mensagem automática no link
Adicionando ?text= ao link, com a mensagem codificada (espaços como %20, acentos como códigos); geradores de link fazem isso.
Como fazer o botão flutuante
Um link com o ícone do WhatsApp, position fixed no canto inferior direito, 56 px, verde #25D366, abrindo em nova aba; em construtores, pelo elemento nativo ou botão fixado.
Como colocar o botão no WordPress, Wix ou Hostinger
WordPress por plugin leve ou código no rodapé; Wix e Hostinger pelo elemento nativo de WhatsApp ou botão com link.
Devo usar pré-qualificação antes do WhatsApp
Quando há volume de curiosos ou variações de serviço; três perguntas em botões que montam a mensagem.
Como medir os cliques no WhatsApp
Com acionador de clique em link wa.me no GTM, evento whatsapp_click no GA4 marcado como chave e importado no Google Ads.
O botão do WhatsApp atrapalha o SEO
Não. Um link leve não afeta o posicionamento; plugins pesados com scripts externos podem afetar a velocidade.
Resumo · como colocar botão do WhatsApp no site
- Link: https://wa.me/55DDDNÚMERO?text=mensagem codificada.
- Flutuante: link fixo, 56 px, verde, nova aba, sem JavaScript.
- Por plataforma: HTML (código), WordPress (plugin leve), Wix/Hostinger (elemento), Lovable (pedir), Canva (repetir).
- Mensagem por página com origem e intenção.
- Pré-qualificação quando há volume ou variações.
- Boas práticas: 55, Business, botões no topo e fim, resposta em 15 min.
- Medir: whatsapp_click por página e botão; conversão no Ads.
O botão do WhatsApp certo é link, posição, mensagem, atendimento e medição, e cada um desses itens muda a quantidade e a qualidade das conversas. O Grupo KOP entrega o WhatsApp como sistema em cada site, como mostra a página de criação de site profissional. O próximo passo é a base de qualquer site: o que é hospedagem de site.
