Botão de WhatsApp para site
Botão de WhatsApp para site
Coloque no canto do seu site um botão que abre a conversa com a sua empresa, com uma mensagem pronta. Veja a prévia, escolha o lado da tela e copie o código para colar no site.
- Sem cadastro
- Funciona no seu navegador
- O código não carrega nada da XBASE
Monte o seu botão
Só o DDD e o número, sem o +55 e sem o 0 antes do DDD.
Escreva como o seu cliente escreveria.
Prévia
HTML simples, sem script e sem rastreamento.
Tudo acontece no seu navegador. Nada do que você digita é enviado para a XBASE.
Por dentro do botão
Como o botão de WhatsApp funciona
É um link do WhatsApp em forma de botão, preso num canto da página. Quem clica sai do site e cai na conversa com a sua empresa, no aplicativo do celular ou no WhatsApp Web, com a mensagem pronta no campo de digitação.
<a href="https://wa.me/55119XXXXXXXX?text=Ol%C3%A1%2C%20vim%20pelo%20site" aria-label="Conversar pelo WhatsApp">…</a>O botão leva a conversa para o WhatsApp; ela não acontece dentro da página. Para atender dentro do site, existe o chat no site da XBASE.
Menos atrito
Por que colocar o botão no site
Contato sempre à vista
Quem quer falar com você acha o caminho em qualquer página, sem copiar número.
A dúvida no momento em que ela aparece
Quem está vendo um produto pergunta ali mesmo, sobre preço, prazo ou tamanho.
No aplicativo que ele já usa
No celular, a conversa abre direto no WhatsApp.
A conversa chega com contexto
A mensagem pronta pode dizer de qual página a pessoa veio.
O botão facilita o primeiro contato. Ele não responde, não garante venda e não substitui quem atende.
Passo a passo
Como colocar o botão no site
- 01
Digite o número
Com DDD, do jeito que ele está no WhatsApp.
- 02
Escreva a mensagem pronta
Por exemplo: "Olá, vim pelo site e queria entender como funciona o serviço de vocês."
- 03
Veja a prévia
Confira no celular e no computador.
- 04
Copie o código
O gerador escreve o HTML para você.
- 05
Cole no site e teste
Num lugar do site que rode HTML. Publique e abra a página no celular e no computador.
Se outra pessoa cuida do seu site, mande o código para ela.
Modelos
Mensagens prontas para quem vem do site
Página de produto
Oi, tenho uma dúvida sobre o [produto] desta página.
Página de serviço
Olá, quero entender como funciona o [serviço].
Página de preços
Olá, estou comparando as opções e quero ajuda para escolher.
Agendamento
Olá, quero marcar um horário. Quais opções vocês têm?
Pós-venda
Olá, comprei pelo site e quero saber do pedido [número].
A mensagem fica dentro do código da página, e qualquer visitante pode ver. Nada de senha, cartão ou dado de saúde.
Instalação
Onde colar o código
- 01
Site em HTML
O código vai no arquivo que todas as páginas usam, antes de fechar o <body>. Publique primeiro numa página só.
- 02
WordPress
Use um bloco de HTML personalizado ou a área de código do tema. Alguns planos e hospedagens limitam onde o código pode entrar.
- 03
Loja virtual
Faça uma cópia do tema antes. Cole o código no layout do tema e confira se o botão não cobre o carrinho nem o pagamento.
- 04
Criadores de site
Use o recurso de código personalizado ou de HTML da sua plataforma. Alguns planos não liberam código.
Posição
Onde colocar o botão
É comum o botão ficar embaixo, à direita. Use o lado esquerdo se o direito já tiver carrinho, aviso de cookies ou outro botão. Mantenha o mesmo lugar em todas as páginas e confira estas:
| Página | Para quê |
|---|---|
| Produto | Dúvidas de preço, estoque, prazo e tamanho |
| Serviço | Quem precisa explicar o caso antes de pedir orçamento |
| Preços | A última dúvida antes de escolher |
| Agendamento | Horário, local e o que levar |
| Ajuda | Junto com e-mail e telefone, se houver |
Produto
- Para quê
- Dúvidas de preço, estoque, prazo e tamanho
Serviço
- Para quê
- Quem precisa explicar o caso antes de pedir orçamento
Preços
- Para quê
- A última dúvida antes de escolher
Agendamento
- Para quê
- Horário, local e o que levar
Ajuda
- Para quê
- Junto com e-mail e telefone, se houver
O botão não pode cobrir formulário, botão de compra, menu do celular nem aviso de privacidade.
Problemas comuns
O botão não aparece ou não abre?
| O que acontece | Causa provável | O que conferir |
|---|---|---|
| O código aparece como texto | Foi colado num bloco de texto | Use uma área que execute HTML |
| O botão não aparece | A plataforma removeu o código ou ele está no modelo errado | Veja as regras de código da plataforma e o lugar onde colou |
| Abre o número errado | Número ou país digitado errado | Corrija e gere o código de novo |
| A mensagem chega cortada | O link foi editado à mão | Gere o código de novo |
| O botão cobre outro elemento | Dois elementos no mesmo canto | Troque o lado ou ajuste o layout |
| Aparece no computador, não no celular | Um estilo do site esconde ou cobre o botão | Teste a página no celular |
| Abre, mas nada é enviado | A mensagem pronta espera o cliente tocar em enviar | É assim que o WhatsApp funciona |
O código aparece como texto
- Causa provável
- Foi colado num bloco de texto
- O que conferir
- Use uma área que execute HTML
O botão não aparece
- Causa provável
- A plataforma removeu o código ou ele está no modelo errado
- O que conferir
- Veja as regras de código da plataforma e o lugar onde colou
Abre o número errado
- Causa provável
- Número ou país digitado errado
- O que conferir
- Corrija e gere o código de novo
A mensagem chega cortada
- Causa provável
- O link foi editado à mão
- O que conferir
- Gere o código de novo
O botão cobre outro elemento
- Causa provável
- Dois elementos no mesmo canto
- O que conferir
- Troque o lado ou ajuste o layout
Aparece no computador, não no celular
- Causa provável
- Um estilo do site esconde ou cobre o botão
- O que conferir
- Teste a página no celular
Abre, mas nada é enviado
- Causa provável
- A mensagem pronta espera o cliente tocar em enviar
- O que conferir
- É assim que o WhatsApp funciona
Trocou o código e o botão antigo continua lá? Limpe o cache do site antes de testar de novo.
Checklist
Confira antes de publicar
- Abre a conversa com o número certo.
- A mensagem pronta aparece inteira.
- Quem decide enviar é o visitante.
- Não cobre formulário, botão de compra nem aviso de privacidade.
- Tem contraste com o fundo da página e margem até a borda da tela.
- É fácil de tocar no celular.
- Não tem animação que distraia.
Formatos
Botão, link ou QR code
| Formato | Onde colocar | Como o cliente chega à conversa |
|---|---|---|
| Link | Bio e Stories do Instagram, orçamento enviado por e-mail, assinatura de quem vende, anúncio | Abre direto, no celular ou no computador |
| QR code | Etiqueta de preço, caixa do pedido, recepção, mural da escola, estande de feira | Lê com a câmera, sem digitar nada |
| Botão no site | Páginas de produto, serviço, preços e contato | Clica no canto da página que está lendo |
Link
- Onde colocar
- Bio e Stories do Instagram, orçamento enviado por e-mail, assinatura de quem vende, anúncio
- Como o cliente chega à conversa
- Abre direto, no celular ou no computador
QR code
- Onde colocar
- Etiqueta de preço, caixa do pedido, recepção, mural da escola, estande de feira
- Como o cliente chega à conversa
- Lê com a câmera, sem digitar nada
Botão no site
- Onde colocar
- Páginas de produto, serviço, preços e contato
- Como o cliente chega à conversa
- Clica no canto da página que está lendo
No site, o botão fica sempre à vista. Para compartilhar em outros lugares, use o link; no papel, o QR code.
Botão ou chat no site
O botão leva ao WhatsApp. O chat no site atende na própria página.
São duas coisas diferentes. O botão manda o visitante para o WhatsApp da empresa: se o número estiver conectado à XBASE, a conversa chega na caixa de entrada, com um responsável e um card no funil. Já o chat no site da XBASE fica dentro da página: o agente de IA atende quem está visitando, com o que você ensinou. Para instalar, você copia o código e cola no site.
No chat no site, quem atende é o agente de IA; a equipe não responde por ali.
Perguntas frequentes
Dúvidas sobre o botão de WhatsApp
Não. Serve para qualquer número ativo no WhatsApp: é só um link em forma de botão.
Da primeira mensagem à venda
Cada conversa com um responsável e uma etapa no funil, até a proposta.
A XBASE é um CRM conversacional com IA. O WhatsApp oficial, o Direct do Instagram e o e-mail chegam na mesma caixa de entrada, cada conversa vira um card no funil, e o nosso time especialista monta com você as automações e os agentes de IA.
Criar conta- Sem instalar nada
- WhatsApp pela API oficial da Meta
- Implantação com especialista