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">×</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:
- Substitua
SEUNUMEROAQUIpelo seu número de WhatsApp (apenas dígitos, sem espaços ou caracteres especiais). - Personalize a mensagem padrão alterando o texto após
?text=. - 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!