Botão flutuante do WhatsApp
Por que usar um Botão do WhatsApp no seu Blog?
Blogueiros que oferecem suporte ou vendem produtos digitais precisam de agilidade. Um botão flutuante:
- Aumenta a Confiança: Mostra que existe uma pessoa real por trás do conteúdo.
- Melhora a Experiência (UX): O leitor não precisa procurar a página de contato.
- Design Profissional: Mantém a estética limpa, flutuando discretamente no canto da tela.
Código HTML e CSS para Copiar
Aqui está o código básico para você adicionar ao seu template:
<link rel="stylesheet" href="https://cdn.positus.global/production/resources/robbu/whatsapp-button/whatsapp-button.css">
<a id="robbu-whatsapp-button" target="_blank" href="https://api.whatsapp.com/send?phone=55AQUI O NUMERO DO SEU TELEFONECOM O CODIGO DDD">
<div class="rwb-tooltip">Fale conosco</div>
<img src="https://cdn.positus.global/production/resources/robbu/whatsapp-button/whatsapp-icon.svg">
</a>
Modelo 2
<div style="position: fixed; bottom: 20px; right: 20px; z-index: 999;">
<a href="https://wa.me/55AQUI O NUMERO DE SEU TELEFONE COM DDD?text=Contact" target="_blank" style="display: inline-block; padding: 12px 20px; background-color: #25D366; color: white; border-radius: 5px; text-decoration: none; font-family: sans-serif; font-size: 16px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/2044px-WhatsApp.svg.png" alt="WhatsApp" style="height: 24px; vertical-align: middle; margin-right: 8px;">
WhatsApp
</a>
</div>
Modelo 3
<link rel="stylesheet" href="https://cdn.positus.global/production/resources/robbu/whatsapp-button/whatsapp-button.css">
<a id="robbu-whatsapp-button" target="_blank" href="https://api.whatsapp.com/send?phone=55SEUTELEFONEAQUI&text=SEU TEXTO AQUI">
<div class="rwb-tooltip">Fale conosco</div>
<img src="https://cdn.positus.global/production/resources/robbu/whatsapp-button/whatsapp-icon.svg">
</a>
Deixe um comentário