Como Adicionar um Chat de WhatsApp ao Seu Site

Quer melhorar o atendimento ao cliente e aumentar as conversões no seu site? Um botão flutuante de WhatsApp pode ser a solução perfeita! Com ele, seus visitantes podem entrar em contato com você em apenas um clique, diretamente pelo WhatsApp.

Por que usar um chat de WhatsApp no seu site?

✅ Atendimento rápido e pessoal – Os clientes adoram resolver dúvidas por mensagem.
✅ Aumento nas vendas – Facilita o contato e reduz a taxa de abandono.
✅ Simples e eficiente – Sem necessidade de cadastro ou formulários complicados.

Como implementar?

Basta adicionar este código ao seu site (HTML + CSS + JavaScript):

<!-- WhatsApp Atendente Online -->
<div id="whatsapp-chat" class="hide">
  <div class="chat-box">
    <div class="chat-header">
      <strong>Atendimento</strong>
      <span onclick="toggleChat()" style="cursor:pointer">&times;</span>
    </div>
    <div class="chat-body">
      <p>Olá! Posso te ajudar? 😊</p>
      <a href="https://wa.me/55SEUNUMEROAQUI?text=Ol%C3%A1%2C+vi+seu+site+e+gostaria+de+mais+informa%C3%A7%C3%B5es." target="_blank">
        <button>Conversar no WhatsApp</button>
      </a>
    </div>
  </div>
</div>

<!-- Botão WhatsApp Flutuante -->
<div id="whatsapp-button" onclick="toggleChat()">
  <i class="fab fa-whatsapp"></i>
</div>

<!-- FontAwesome para o ícone -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<style>
/* Estilos do botão e chat (copie o CSS completo do código original) */
</style>

<script>
function toggleChat() {
  const chat = document.getElementById('whatsapp-chat');
  chat.classList.toggle('hide');
}
</script>

Passo a passo:

1. Substitua SEUNUMEROAQUI pelo seu número de WhatsApp (apenas dígitos, sem espaços ou caracteres especiais).
2. Personalize a mensagem padrão alterando o texto após ?text=.
3. Copie e cole o código no final do <body> do seu site.

Pronto! Agora seus clientes podem te chamar no WhatsApp com facilidade. 🚀

💡 Dica: Use mensagens personalizadas para direcionar o atendimento (ex.: “Quero comprar!” ou “Preciso de suporte”).

Gostou? Teste no seu site e veja os resultados!