Como Adicionar Botão de WhatsApp no Site (3 Métodos Grátis)

Se você tem um site e seus clientes usam WhatsApp, precisa de um botão de WhatsApp visível. É a forma mais rápida de converter visitantes em conversas reais.

A maioria dos tutoriais pede para instalar plugins pesados ou pagar por widgets. A realidade é que você pode fazer isso grátis, em menos de 5 minutos, sem saber programar.

Por que você precisa de um botão de WhatsApp?

• WhatsApp tem mais de 2 bilhões de usuários ativos
• No Brasil, 99% dos smartphones têm WhatsApp instalado
• Mensagens de WhatsApp têm taxa de abertura de 98% (vs. 20% do email)
• Um botão de WhatsApp pode aumentar suas conversões entre 30% e 50%

Se seus clientes já estão no WhatsApp, obrigá-los a preencher um formulário é colocar uma barreira desnecessária.

Método 1: Link direto com mensagem pré-preenchida (mais fácil)

O método mais rápido. Crie um link de WhatsApp com uma mensagem pronta e coloque como botão no seu site.

Passo a passo:

1. Vá para mssg.to
2. Digite seu número de WhatsApp com código do país (+55)
3. Escreva a mensagem pré-preenchida
4. Clique em Gerar Link
5. Copie o link gerado

Como colocar no seu site:

<a href="https://mssg.to/SEU-SLUG"
   style="display:inline-block; background:#25D366; color:white;
          padding:12px 24px; border-radius:8px; text-decoration:none;
          font-weight:bold; font-size:16px;">
  💬 Fale conosco pelo WhatsApp
</a>

Ideal para: landing pages, páginas de produto, seções de contato.

Método 2: Botão flutuante com CSS puro

Quer um botão que apareça sempre no canto inferior do seu site? Não precisa de plugin.

<a href="https://mssg.to/SEU-SLUG"
   target="_blank"
   style="position:fixed; bottom:20px; right:20px; width:60px; height:60px;
          background:#25D366; border-radius:50%; display:flex;
          align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.15);
          z-index:9999; text-decoration:none; transition:transform 0.2s;"
   onmouseover="this.style.transform='scale(1.1)'"
   onmouseout="this.style.transform='scale(1)'">
  <svg width="28" height="28" viewBox="0 0 24 24" fill="white">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
    <path d="M12 0C5.373 0 0 5.373 0 12c0 2.625.846 5.059 2.284 7.034L.789 23.492a.5.5 0 00.612.638l4.694-1.416A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-2.24 0-4.317-.726-6.003-1.956l-.42-.312-2.834.854.897-2.747-.343-.544A9.953 9.953 0 012 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
  </svg>
</a>

Copie e cole antes do fechamento </body> no seu HTML.

Ideal para: lojas online, sites de serviços, qualquer site que precise de um canal de contato rápido.

Método 3: QR Code de WhatsApp

Para negócios que combinam o digital com o físico — restaurantes, lojas, eventos.

1. Crie seu link no mssg.to
2. Com uma conta Pro, baixe o QR code automático
3. Imprima no cardápio, cartão de visita ou banner

Ideal para: restaurantes, lojas físicas, eventos, cartões de visita.

Como adicionar no WordPress

Sem plugin necessário:

1. Crie seu link no mssg.to
2. No editor do WordPress, adicione um bloco "HTML personalizado"
3. Cole o código do botão flutuante (Método 2)
4. Publique a página

Para o botão em todo o site:

• Vá em Aparência → Editor de temas → footer.php
• Cole o código antes de </body>
• Salve

Como adicionar no Shopify

1. Crie seu link no mssg.to
2. Vá em Loja online → Temas → Editar código
3. Abra theme.liquid
4. Cole o código do botão flutuante antes de </body>
5. Salve

Dica pro: Crie links diferentes para cada produto com mensagens como "Olá, me interessa o [produto]. Está disponível?"

Como adicionar no Wix

1. No editor do Wix, adicione um elemento "HTML embed"
2. Cole o código do botão flutuante
3. Configure como "Fixo na posição" para aparecer em todas as páginas

O segredo: mensagens diferentes por página

Não use o mesmo link de WhatsApp em todo lugar. Crie links diferentes:

• Página inicial: "Olá, quero conhecer mais sobre seus serviços"
• Página de preços: "Olá, quero informações sobre o plano [nome]"
• Produto específico: "Olá, me interessa o [produto]. Está disponível?"

Com mssg.to você pode criar links ilimitados (Plano Pro) e ver quantos cliques cada um recebe.

Erros comuns

1. Usar wa.me sem mensagem — O cliente não sabe o que escrever
2. Não medir cliques — Sem dados, não dá para otimizar
3. Esconder o botão — Deve ser visível sem rolar
4. Um link para tudo — Não dá para medir o que funciona
5. Demorar para responder — Mais de 5 minutos e 50% dos leads esfria

Conclusão

Adicionar um botão de WhatsApp no seu site é uma das melhorias com maior impacto e menor esforço que você pode fazer hoje.

1. Crie seu link no mssg.to (grátis)
2. Copie o código do botão
3. Cole no seu site

Em 5 minutos você pode estar recebendo mensagens de clientes que antes abandonavam sua página.

Crie seu botão de WhatsApp grátis →

---

Artigos relacionados

• Gerador de Link de WhatsApp: Crie seu link grátis
• Como Criar Link do WhatsApp: Guia Completo
• Link Curto de WhatsApp: URLs personalizadas para seu negócio