Um botão de WhatsApp no seu site elimina a etapa mais lenta entre um visitante e uma conversa: achar seu número, salvá-lo e digitar a primeira mensagem. Um toque e o WhatsApp abre com a conversa pronta. A boa notícia é que você não precisa de plugin, assinatura nem JavaScript, um botão de WhatsApp é só um link comum vestido com um pouco de estilo. Este guia mostra primeiro a versão em HTML puro e depois o caminho mais rápido no WordPress, no Shopify e nos grandes construtores de sites.
Passo 1: obtenha seu link click-to-chat
Todo botão de WhatsApp, em qualquer plataforma, aponta para a mesma coisa: um link click-to-chat wa.me. Ele contém seu número de telefone e, opcionalmente, uma mensagem pré-preenchida. O formato é assim:
https://wa.me/15551234567?text=Oi%21%20Tenho%20uma%20pergunta%20sobre%20seus%20servi%C3%A7os
O número precisa estar no formato internacional completo, só dígitos, código do país primeiro, sem sinal de mais, espaços ou hífens, e a mensagem precisa estar codificada como URL. O jeito mais fácil de acertar os dois é o Gerador de Link de WhatsApp gratuito: digite sua mensagem, veja a prévia ao vivo e copie o link pronto. Para a sintaxe completa, veja nosso guia completo do wa.me.
HTML puro: um botão para colar em qualquer site
Na forma mais simples, o botão é uma tag de link com a sua URL. Funciona em qualquer página HTML, gerador de site estático ou caixa de “HTML personalizado” de um construtor de sites:
<a href="https://wa.me/15551234567?text=Oi%21" target="_blank" rel="noopener">Converse conosco no WhatsApp</a>
Para que pareça um botão de WhatsApp de verdade e não um link de texto, adicione estilos inline, verde WhatsApp (#25D366), texto branco, cantos arredondados e um pouco de padding:
<a href="https://wa.me/15551234567?text=Oi%21" target="_blank" rel="noopener" style="display:inline-block;background:#25D366;color:#fff;padding:12px 24px;border-radius:50px;font-weight:600;text-decoration:none;">💬 Conversar no WhatsApp</a>
Para a famosa “bolha” flutuante no canto inferior, envolva o mesmo link em um estilo de posição fixa: position:fixed, deslocamentos bottom e right de uns 20px, e um fundo circular em volta do ícone do WhatsApp. Continua sendo só um link, sem script, nada para deixar a página lenta.
WordPress: sem plugin
- No editor de blocos, adicione um bloco de HTML personalizado (ou um bloco de Botões) onde você quer o botão.
- Cole a tag de link estilizada acima, com o seu próprio link wa.me.
- Para um botão no site inteiro, adicione o mesmo HTML a uma área de widgets (Aparência → Widgets) ou ao template do rodapé do seu tema.
Plugins como o “Click to Chat” acrescentam botões flutuantes, regras de horário comercial e seleção de atendente. São ótimos se você quer esses extras, mas se tudo o que você precisa é do botão, o bloco de HTML faz o mesmo trabalho com zero scripts adicionais e nada novo para manter atualizado.
Shopify
- Vá em Loja virtual → Temas → Personalizar.
- Adicione uma seção de Liquid personalizado ou HTML personalizado (a maioria dos temas modernos tem uma) e cole o código do botão.
- Para exibi-lo em todas as páginas, edite a seção de rodapé do tema, ou adicione o trecho ao theme.liquid logo antes da tag de fechamento do body.
Wix, Squarespace e outros construtores
Todo grande construtor tem um elemento de “incorporar HTML” ou “código”, cole ali a mesma tag de link. Muitos também têm um botão nativo de WhatsApp nos elementos sociais ou de contato; esses pedem só o número de telefone, então se você quer uma mensagem pré-preenchida, use a incorporação de HTML com o seu link gerado.
Quer que os visitantes compartilhem sua página, em vez de falar com você?
Um botão de conversa inicia um papo com você. Se o que você quer mesmo é que os visitantes enviem sua página para os contatos deles (uma petição, um produto, um artigo) use o Widget de Compartilhamento de WhatsApp gratuito. Ele busca o título, a descrição e a miniatura da sua página e produz um cartão de compartilhamento pronto para incorporar com um botão “Compartilhar no WhatsApp”, em uma versão para sites e outra que sobrevive ao Gmail e ao Outlook para campanhas de e-mail. Se o cartão chegar ao chat com o título errado ou sem imagem, veja por que a prévia de links no WhatsApp falha.
Acompanhe os cliques
Um clique de WhatsApp sai do seu site, então sua análise não verá a conversa, mas você pode contar os cliques. Adicione uma tag UTM à URL da página que você menciona na mensagem, ou registre o clique do botão como um evento no Google Analytics / Tag Manager (um gatilho simples de clique em links contendo wa.me). Se o botão aparece em vários lugares, dê a cada um uma mensagem pré-preenchida diferente para saber de onde veio cada conversa só de ler a primeira linha.
Perguntas frequentes
Preciso do WhatsApp Business para um botão no site?
Não. Um link wa.me funciona tanto com o WhatsApp pessoal quanto com o WhatsApp Business. Uma conta gratuita do WhatsApp Business acrescenta extras úteis por trás do mesmo botão, um perfil comercial, mensagens de ausência e respostas rápidas.
O botão funciona no computador?
Sim. No celular, o link abre o aplicativo do WhatsApp; no computador, abre o WhatsApp Web ou o aplicativo para desktop se o visitante estiver conectado. O mesmo link atende os dois.
Posso usar o logotipo oficial do WhatsApp no botão?
A Meta publica diretrizes de marca com arquivos de logotipo aprovados exatamente para esse uso. Use o símbolo oficial, não o distorça nem mude sua cor, e não dê a entender que o WhatsApp endossa o seu negócio.