Um botão flutuante de "Conversar no WhatsApp" transforma visitantes do site em conversas. A boa notícia: você pode adicionar um a quase qualquer site sem escrever código de verdade. Aqui estão três abordagens, do jeito mais simples até um trecho leve para copiar e colar.
Primeiro: tenha o seu link do WhatsApp pronto
Todos os métodos abaixo precisam de um link wa.me. Se você ainda não tem um, crie seu link do WhatsApp gratuito — informe seu país, número e uma mensagem pré-preenchida como "Olá! Estou no seu site e tenho uma dúvida." Copie a URL pronta; você vai colá-la no método que escolher.
Método 1: um simples botão de link (o mais "sem código")
Se o seu construtor de sites permite adicionar um botão ou link (todos permitem), você nem precisa de widget:
- Adicione um elemento de botão em qualquer lugar — cabeçalho, rodapé ou uma barra fixa.
- Defina o link/URL dele para o seu link
wa.me. - Configure para abrir em uma nova aba.
- Rotule como "Conversar no WhatsApp" e, se puder, adicione o ícone verde do WhatsApp.
Isso funciona no Wix, Squarespace, Webflow, WordPress, Shopify, Carrd — qualquer um. Não é uma bolha flutuante, mas é sem risco e leva 60 segundos.
Método 2: um serviço de widget sem código
Serviços como WATI, Chaty, Chaport ou Tidio oferecem uma bolha flutuante hospedada que você ativa por um painel:
- Cadastre-se e informe seu número do WhatsApp e a mensagem pré-preenchida.
- Personalize a cor da bolha, a posição e a saudação.
- Copie o
<script>de uma linha que eles fornecem. - Cole na área de "código personalizado / rodapé" do seu site (todo construtor tem uma).
Prós: uma bolha polida e animada, com texto de saudação e horários. Contras: é uma dependência de terceiros, pode carregar JavaScript extra e alguns planos custam dinheiro. Para a maioria dos sites pequenos, o plano gratuito é mais que suficiente.
Método 3: um botão flutuante para copiar e colar (sem serviço, sem plugin)
Quer um botão flutuante sem se cadastrar em nada? Cole isto na área de HTML personalizado/rodapé do seu site e troque o número:
<a href="https://wa.me/15551234567?text=Ol%C3%A1!%20Tenho%20uma%20d%C3%BAvida."
target="_blank" rel="noopener"
style="position:fixed;bottom:20px;right:20px;z-index:9999;
background:#25D366;color:#fff;padding:14px 18px;border-radius:50px;
font-family:sans-serif;text-decoration:none;
box-shadow:0 4px 12px rgba(0,0,0,.15);">
💬 Conversar no WhatsApp
</a>
Isso é um link simples estilizado para flutuar no canto inferior direito. Sem JavaScript, nada para quebrar, sem mensalidade. Troque 15551234567 pelo seu número e ajuste a mensagem.
Onde posicionar o botão
- O canto inferior direito é a convenção universal — os usuários esperam o chat ali.
- Uma barra fixa no rodapé no celular funciona bem para lojas.
- Dentro da seção de contato como um grande botão principal.
Evite cobrir conteúdo importante ou empilhá-lo em cima de um banner de cookies.
Dicas de design que aumentam os cliques
- Use o verde oficial (
#25D366) e o ícone do WhatsApp para que seja reconhecido na hora. - Mantenha o rótulo orientado à ação: "Fale conosco" ou "Conversar no WhatsApp" funciona melhor que "Contato".
- Adicione uma bolha de saudação sutil ("Dúvidas? Fale com a gente!") que aparece após alguns segundos — a maioria dos serviços de widget faz isso automaticamente.
- Mostre o horário de atendimento se você não puder responder na hora, para alinhar as expectativas.
Sempre pré-preencha uma mensagem
Qualquer que seja o método, inclua uma mensagem pré-preenchida com ?text=. Um chat vazio faz o visitante hesitar; uma primeira linha pronta ("Olá! Estou no seu site…") faz ele começar a falar. Saiba mais em como adicionar uma mensagem pré-preenchida.
Teste em dispositivos reais
Antes de dar como concluído:
- No celular: toque no botão — o app do WhatsApp deve abrir com a sua mensagem pronta.
- No desktop: deve abrir o WhatsApp Web (os usuários precisam estar logados).
- Verifique o posicionamento tanto no celular quanto no desktop; um botão perfeito no desktop pode cobrir o seu menu no celular.
Número Business vs. pessoal
Aponte o botão para um número do WhatsApp Business, não o seu pessoal. O Business te dá um perfil profissional, uma mensagem de saudação e respostas rápidas — tudo valioso quando as conversas do site começam a chegar. Veja WhatsApp Business vs. pessoal.
Resumo
O caminho mais rápido: crie seu link do WhatsApp gratuito e então adicione-o como um botão comum (Método 1) ou cole o trecho do botão flutuante (Método 3). Sem plugins, sem código além de copiar e colar, e sem mensalidade.