prumo

Ferramenta 07

Botão de WhatsApp

Link wa.me com mensagem pronta, botão flutuante para colar no site e QR code para o cartão ou a vitrine.

Posição
Cor do botão
Texto do botão

Link do WhatsApp

Testar

Prévia no site

Botão flutuante: cole antes do </body>

<a class="wa-float" href="https://wa.me/5511999990000?text=Ol%C3%A1!%20Vim%20pelo%20site%20e%20quero%20um%20or%C3%A7amento." target="_blank" rel="noopener" aria-label="Conversar no WhatsApp">
  <svg viewBox="0 0 32 32" width="28" height="28" aria-hidden="true"><path d="M16 3.5a12.5 12.5 0 0 0-10.8 18.8L3.6 28.4l6.3-1.6A12.5 12.5 0 1 0 16 3.5z" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linejoin="round"/><path d="M11.9 9.6c-.4 0-.9.1-1.3.6-.5.5-1.3 1.3-1.3 3.1s1.3 3.6 1.5 3.9c.2.3 2.6 4.2 6.5 5.7 3.1 1.2 3.8 1 4.5.9.7-.1 2.2-.9 2.5-1.8.3-.9.3-1.6.2-1.8-.1-.2-.4-.3-.8-.5l-2.6-1.2c-.4-.2-.6-.2-.9.2l-1.1 1.4c-.2.3-.4.3-.8.1-.4-.2-1.5-.6-2.9-1.8-1.1-1-1.8-2.1-2-2.5-.2-.4 0-.6.2-.8l.6-.7c.2-.2.3-.4.4-.7.1-.3.1-.5 0-.7l-1.1-2.7c-.3-.7-.6-.7-.9-.7h-.7z" fill="currentColor"/></svg>
  <span class="wa-float__label">Fale conosco</span>
</a>
<style>
.wa-float{position:fixed;right:24px;bottom:24px;z-index:9999;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:60px;min-width:60px;padding:0 18px;border-radius:999px;background:#25D366;color:#FFFFFF;font:600 15px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.2);transition:transform .2s ease,box-shadow .2s ease}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.26)}
.wa-float:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
.wa-float svg{width:29px;height:29px;flex:none}
@media (max-width:480px){.wa-float{padding:0}.wa-float__label{display:none}}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#25D366;z-index:-1;animation:wa-pulse 2.2s ease-out infinite}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.wa-float::before{animation:none}}
</style>

QR code do atendimento

Para cartão de visita, cardápio, vitrine ou rodapé do site. Mantenha a cor escura sobre fundo claro para ler em qualquer câmera.

Módulos
Fundo