Atalho circular fixo no canto inferior direito, na cor de marca, com o ícone do canal. Cresce levemente no hover. Sem JavaScript — é um link de verdade.
Quando usar
- Site de serviço onde o WhatsApp é canal real de atendimento. No Brasil, em página de alto ticket, ele costuma converter melhor que o formulário.
- Como reforço do CTA principal, nunca no lugar dele.
Quando não usar
- Se ninguém atende o número. Botão que leva a silêncio custa mais caro que botão nenhum.
- Em página que já tem chat widget — dois botões flutuantes no mesmo canto brigam.
- Em site cujo público não usa o canal (institucional B2B internacional, por exemplo).
Padrão editorial
O único texto é o aria-label: verbo mais canal, "Falar no WhatsApp". O ícone carrega o resto.
Se a variação com rótulo for usada, o texto tem 2 a 3 palavras: "Fale conosco", "Chamar no WhatsApp".
Como usar
<link rel="stylesheet" href="componentes/navegacao/botao-flutuante/estilo.css">
Cole antes do </body>. Troque o número no href — formato wa.me/55 + DDD + número, só dígitos.
Variações
- Com rótulo — pílula com ícone e texto:
width:auto,border-radius:var(--radius-pill), padding lateral. Ocupa mais tela; teste no mobile antes. Ainda não rodou em produção. - Canto esquerdo — troque
rightporleft. Útil quando um chat widget já ocupa a direita.
Gotchas
z-index:90é deliberado: abaixo do menu fixo (100) e do drawer (200). Com o drawer aberto, o botão não pode flutuar por cima dele.- É
<a>, não<button>. Precisa abrir em aba nova, ser copiável e funcionar com JS desligado. rel="noopener"junto comtarget="_blank"— sem isso a página de destino recebe referência à sua janela.- No mobile ele encolhe e encosta mais na borda. 52px no canto de um celular cobre conteúdo real, sobretudo o fim de um formulário.
- Não coloque dois. Se aparecer pedido de "um do WhatsApp e um do topo", a resposta é um botão de voltar-ao-topo em outro canto, não dois círculos empilhados.
Histórico
| Projeto | Onde | Data | Diferenças |
|---|---|---|---|
| Liberta Wealth | index.html e quem-somos.html, antes do </body> |
2026-08 | Origem. Classe .wa (nome do canal, não da função), cores --sage/#0a0a0a/--cream cruas, sem breakpoint mobile, sem tratamento de movimento reduzido. |
Normalizações aplicadas na extração: .wa → .fab (a função é "botão flutuante"; o canal é conteúdo, não estrutura); cores → --accent / --dark / --light-2; adicionado breakpoint mobile e prefers-reduced-motion; aria-hidden no SVG, que já tem aria-label no link.