Como colocar um botão de WhatsApp no site

Um botão de WhatsApp bem colocado resolve a dúvida que faria o visitante fechar a aba. Mal implementado, ele cobre o botão de compra no celular, deixa a página lenta e não funciona para quem usa leitor de tela. Este guia mostra onde colocar o link, o código de um botão simples, os cuidados de acessibilidade e desempenho e o que muda numa loja virtual.

Onde o botão rende mais

Pense nos momentos em que o visitante tem uma pergunta que a página não responde:

• Página de produto ou serviço, logo abaixo do preço ou do botão de compra. É ali que surgem dúvidas sobre tamanho, prazo, compatibilidade e frete. Se for escolher um lugar só, comece por este.
• Página de preços ou planos, para quem quer entender diferenças.
• Cabeçalho ou rodapé, para quem procura o contato de propósito.
• Página de contato, com todos os canais lado a lado.
• Botão flutuante, em todas as páginas, para quem decide falar a qualquer momento.

Nem toda página precisa dele. Num texto longo, um botão flutuante pode cobrir o conteúdo; num checkout já preenchido, um botão grande tira a pessoa do pagamento.

Uma mensagem pronta por página

O link de WhatsApp pode abrir a conversa com um texto já digitado. Use uma mensagem diferente em cada página, para saber o assunto antes de ler a segunda linha:

• Produto: "Oi, vi no site o tênis de corrida modelo X e queria saber se tem no 42."
• Serviço: "Oi, vi no site o serviço de pintura de fachada e quero um orçamento."
• Contato: "Oi, gostaria de um orçamento."

O formato do link (wa.me, código do país, DDD e mensagem codificada) está no guia do link de WhatsApp. Gerar o link evita erro de codificação em acentos e espaços.

Um link curto do CriarMeuLink tem uma vantagem para sites: com conta, você troca o número de destino no painel sem mexer no código. Útil quando o site foi feito por uma agência e cada alteração vira um chamado.

Quem toca no link curto vê primeiro uma página de contato com o número, a mensagem e o botão "Abrir no WhatsApp". No computador, essa página também mostra um QR code para abrir a conversa no celular, para quem não usa o WhatsApp Web.

O código de um botão leve

Um botão de WhatsApp é um link comum. Não precisa de plugin nem de biblioteca:

<a class="wa-float" href="https://criarmeulink.com.br/u/pinturas-silva" aria-label="Falar no WhatsApp">
  <svg aria-hidden="true" width="28" height="28" viewBox="0 0 24 24"><!-- ícone do WhatsApp --></svg>
</a>

.wa-float {
  position: fixed;
  inset-inline-end: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1f7a4d;
  color: #fff;
}

O que esse trecho resolve:

• Nome acessível. O aria-label diz "Falar no WhatsApp" para leitores de tela, e o ícone fica escondido deles com aria-hidden. Se o botão tiver texto visível, o aria-label é dispensável.
• Área segura do iPhone. O env(safe-area-inset-bottom) afasta o botão da barra inferior em aparelhos sem botão físico.
• Tamanho de toque. 56 pixels, acima do mínimo de 44 recomendado para toque no celular.
• Contraste. Um verde escuro com ícone branco é mais legível do que o verde claro do WhatsApp com ícone branco.

Não remova o contorno de foco do link: quem navega pelo teclado precisa ver quando o botão está selecionado.

Mesma aba, sem target="_blank"

Abra o link na mesma aba, sem target="_blank". No celular, o botão leva ao aplicativo do WhatsApp e uma aba extra ficaria sobrando no navegador. No computador, a página de contato abre no lugar do site, e o botão voltar do navegador traz a pessoa de volta; as lojas virtuais em geral guardam o carrinho.

Se o seu construtor de sites força links externos em nova aba, tudo bem, mas nunca acrescente rel="noreferrer": ele esconde de onde veio o clique, e o relatório passa a mostrar a visita como acesso direto em vez de mostrar o seu site.

Desempenho: sem plugin pesado

Muitos plugins de WhatsApp carregam scripts, fontes e imagens só para desenhar um botão, e isso pesa nas métricas de desempenho que o Google considera. Um link com um ícone em SVG embutido resolve o mesmo problema sem custo.

• Não carregue uma biblioteca inteira de ícones para usar um.
• Não use uma imagem grande redimensionada para um ícone pequeno.
• No WordPress ou em outros construtores, prefira um bloco de botão nativo com o link. Se precisar de plugin, confira se ele carrega scripts só depois que a página termina de abrir.

Botão flutuante sem atrapalhar

O botão no canto inferior funciona porque as pessoas sabem onde procurar. Alguns cuidados:

• Teste em telas pequenas. Ele não pode tapar o botão de compra, o aviso de cookies ou a barra de navegação.
• Sem animação insistente. Botão que pula, vibra ou abre balão a cada página incomoda.
• Um só. Se o site já tem um chat de atendimento, escolha um dos dois para o canto da tela.
• Horário à vista. "Respondemos das 9h às 18h" perto do link evita a frustração de quem escreve às 23h.

Na loja virtual: produto, carrinho e checkout

Numa loja virtual, boa parte das vendas perdidas é dúvida: o tamanho, o frete que apareceu mais caro, o cupom que não funcionou, o Pix que não carregou. Três pontos merecem um link:

Página do produto. A mensagem deve citar o produto: "Olá, tenho uma dúvida sobre o Tênis Corrida Leve, tamanho:". Muitas plataformas permitem montar o link com o nome do produto por um aplicativo ou trecho de código; se a sua não permite, crie links fixos para os produtos mais vendidos e cole cada um na descrição.

Carrinho e checkout. Uma linha discreta, como "Problema para finalizar? Chame no WhatsApp", com a mensagem "Olá, estou tentando finalizar uma compra e tive um problema". Um link de texto basta; um banner tira o foco do pagamento. Se a plataforma não deixa editar o checkout, coloque o link no carrinho.

E-mail de carrinho abandonado. Ao lado do botão para voltar ao carrinho, um segundo link, "Ficou com alguma dúvida? Fale com a gente", com a mensagem "Olá, recebi o e-mail sobre meu carrinho e tenho uma dúvida". O mesmo vale para lembretes de Pix ou boleto não pagos.

Mensagens ativas pelo WhatsApp para quem não pediu contato esbarram nas regras da plataforma e na LGPD. O link deixa a iniciativa com o cliente.

Do lado do atendimento, tenha respostas prontas para cartão recusado, cupom, CEP e parcelamento, e ofereça fechar pelo WhatsApp com link de pagamento quando o checkout falha. Leve as dúvidas mais frequentes para a descrição dos produtos: a melhor dúvida é a que não precisa ser feita.

Telefone e e-mail ao lado

Nem todo mundo usa WhatsApp, e em sites com muito tráfego de computador vale oferecer outra saída. Um link de telefone abre o discador no celular; no computador, mostra o número para a pessoa anotar ou ligar de outro aparelho. Um link de e-mail com assunto preenchido serve para orçamentos e documentos.

Saber quantas pessoas tocaram

Com uma conta, o relatório do link mostra o domínio do seu site como origem das visitas, sem configurar nada. Para separar páginas, acrescente uma marcação ao link de cada lugar: ?src=site-produto, ?src=site-flutuante, ?src=carrinho-email. O valor aceita letras minúsculas, números e hífen.

O relatório separa quem abriu a página de contato (visitas) de quem tocou em "Abrir no WhatsApp" (contatos). Depois de algumas semanas dá para responder perguntas práticas: o botão flutuante recebe toque ou só ocupa espaço? As dúvidas do checkout chegam mais à noite? Veja como saber quantas pessoas clicaram no seu link.

Se uma página recebe muitos contatos e vende pouco, leia as conversas que chegam dali. Talvez falte na própria página uma tabela de medidas ou o prazo de entrega.

Por onde começar

Coloque um link na página de produto mais visitada, com uma mensagem que cite o produto. Depois de algumas semanas, decida se vale acrescentar o botão flutuante e a linha no checkout. O link pode ser criado no gerador de link de WhatsApp do CriarMeuLink.