Nesta página
Um site com o contato escondido na última página perde quem estava pronto para perguntar. O botão de WhatsApp resolve isso, mas mal implementado ele cobre conteúdo, deixa a página lenta ou não funciona para quem usa leitor de tela. Aqui você vê onde colocar o link, como montá-lo e os cuidados técnicos que costumam ser esquecidos.
Onde o link de contato rende mais no site
Pense nos momentos em que o visitante tem uma dúvida que a página não responde:
- Página de produto ou serviço, perto do preço ou do botão de compra: "Dúvidas sobre este produto? Fale no WhatsApp".
- Página de preços ou planos, para quem quer negociar ou 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, presente em todas as páginas, para quem decide falar a qualquer momento.
Em cada lugar, use uma mensagem pronta que diga de onde a pessoa veio. Na página de um serviço de pintura, por exemplo: "Oi, vi no site o serviço de pintura de fachada e quero um orçamento". Quem atende já sabe o assunto.
Montando o link
O formato do WhatsApp é https://wa.me/5511987654321?text=..., com código do país (55), DDD e número, sem espaços, traços ou o zero do DDD. A mensagem precisa estar codificada para URL.
Você pode montar à mão ou usar o gerador de link de WhatsApp do CriarMeuLink, que faz a codificação e entrega um link curto como criarmeulink.com.br/u/pinturas-silva. Para o site, o link curto tem duas vantagens:
- Troca de número sem mexer no site. Com conta gratuita, você edita o destino no CriarMeuLink. Útil quando o site foi feito por uma agência e cada alteração vira um chamado.
- Medição. O relatório mostra os cliques por dia, horário, cidade e aparelho. Acrescente
?src=para separar as páginas:?src=site-produto,?src=site-rodape,?src=site-flutuante.
No código do site, o link entra como um link comum:
<a href="https://criarmeulink.com.br/u/pinturas-silva?src=site-flutuante">
Falar no WhatsApp
</a>
Não abra em nova aba com target="_blank" sem necessidade: no celular, o WhatsApp abre como aplicativo e a aba extra fica sobrando no navegador.
Botão flutuante sem atrapalhar
O botão fixo no canto inferior direito virou padrão, e é por isso que funciona: as pessoas sabem onde procurar. Alguns cuidados:
- Não cubra conteúdo importante. No celular, ele pode tapar o botão de compra, o aviso de cookies ou a barra de navegação. Teste em telas pequenas.
- Respeite a área segura do iPhone. Em aparelhos com barra inferior, deixe espaço para que o botão não fique colado na borda.
- Tamanho de toque adequado. Pelo menos 44 por 44 pixels, para ser tocado sem erro.
- Sem animações insistentes. Botão que pula, vibra ou abre balão a cada página incomoda e pode levar o visitante a sair.
Se o seu site já tem um chat de atendimento, escolha um. Dois botões flutuantes disputando o mesmo canto confundem.
Telefone no celular, cartão no computador
Links de telefone usam o formato tel:+5511987654321. No celular, eles abrem o discador com o número preenchido. No computador, o resultado varia: às vezes abrem um aplicativo de chamadas que a pessoa não usa, às vezes não fazem nada.
Há duas formas de lidar com isso:
- Mostre o número em texto ao lado do link, para quem está no computador anotar.
- Use um link de telefone do CriarMeuLink. No celular, ele abre o discador. No computador, mostra um cartão com o número, que a pessoa pode copiar ou usar para ligar de outro aparelho.
O mesmo vale para SMS. O WhatsApp é diferente: no computador, ele abre o WhatsApp Web ou o aplicativo de desktop, se estiver instalado.
Acessibilidade do botão de contato
Um botão só com o ícone do WhatsApp é invisível para quem usa leitor de tela. Alguns ajustes simples:
- Nome acessível. Se o botão tem só o ícone, inclua um texto alternativo como "Falar no WhatsApp". Evite "clique aqui".
- Contraste. O verde do WhatsApp sobre fundo branco pode ter contraste baixo para ícones pequenos. Confira se o ícone ou o texto se destaca.
- Foco visível. Quem navega pelo teclado precisa ver quando o botão está selecionado. Não remova o contorno de foco.
- Alternativas. Nem todo mundo usa WhatsApp. Na página de contato, ofereça também e-mail e telefone.
Carregamento: leve é melhor
Muitos plugins de WhatsApp para sites carregam scripts externos, fontes e imagens só para desenhar um botão. Isso pesa no carregamento e pode piorar as métricas de desempenho que o Google considera.
Um link simples com um ícone em SVG resolve o mesmo problema sem custo. Também não vale carregar uma biblioteca inteira de ícones só para usar o do WhatsApp, nem usar uma imagem grande redimensionada para um ícone pequeno. Se você usa WordPress ou outro construtor, prefira um bloco de botão nativo com o link, em vez de um plugin dedicado. Se precisar do plugin, verifique se ele carrega scripts só depois que a página termina de abrir.
Para mais ideias de como o site pode gerar conversas, veja como o link de WhatsApp aumenta a conversão no site.
Um bom primeiro passo: crie um link com src para o botão flutuante e outro para a página de produto mais visitada. Depois de algumas semanas, o relatório mostra qual dos dois traz mais conversas e em que horário, e você ajusta o resto do site a partir disso.
