Como adicionar um botão do WhatsApp ao seu site (HTML e CSS)

Um botão do WhatsApp não precisa de um plugin nem de um script de terceiros. É um link comum com um pouco de estilo. Aqui estão duas versões prontas para copiar.

Publicado em 6 de outubro de 2026 · Pela equipe do QLinky

Versão 1: botão dentro do conteúdo

Substitua o número e a mensagem pelos seus (ou gere o link com o QLinky e cole a URL no href).

<a class="btn-whatsapp"
   href="https://wa.me/5511912345678?text=Ol%C3%A1%2C%20quero%20mais%20informa%C3%A7%C3%B5es"
   target="_blank" rel="noopener">
  Fale conosco pelo WhatsApp
</a>

.btn-whatsapp {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 8px;
  background: #128c7e;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.btn-whatsapp:hover { background: #0e6f64; }

Versão 2: botão flutuante em um canto

Fica fixo embaixo, à direita, enquanto a pessoa rola a página.

<a class="wa-flutuante"
   href="https://wa.me/5511912345678"
   target="_blank" rel="noopener"
   aria-label="Abrir conversa no WhatsApp">
  WhatsApp
</a>

.wa-flutuante {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  padding: 14px 18px;
  border-radius: 999px;
  background: #128c7e;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

Detalhes que fazem a diferença

• Texto visível ou aria-label. Se o botão mostra apenas um ícone, adicione aria-label para que os leitores de tela anunciem para onde ele leva.
• rel="noopener" quando usar target="_blank", para que a página que se abre não tenha acesso à sua.
• Contraste. O verde claro clássico com texto branco é difícil de ler. Um verde mais escuro, como o do exemplo, mantém o texto legível.
• Não cubra nada. Confira no celular se o botão flutuante não fica em cima do aviso de cookies, do carrinho ou do botão de enviar de um formulário.
• Uma mensagem diferente por página. Na página de um produto você pode deixar escrito “Olá, tenho interesse no modelo X”. Isso poupa a primeira pergunta.

Onde colar conforme sua plataforma

• WordPress: adicione um bloco “HTML personalizado” com o link, e o CSS em Aparência, Personalizar, CSS adicional.
• Construtores como Wix, Shopify ou Squarespace: quase todos permitem criar um botão e atribuir uma URL a ele. Cole ali o link wa.me e você não precisa de código.
• Site feito à mão: o HTML vai onde você quiser o botão e o CSS na sua folha de estilos.

Como saber se estão usando

Um clique no botão é um clique para outro domínio. O Google Analytics 4 registra esses cliques de saída automaticamente se a medição otimizada estiver ativada, e você pode filtrá-los pela URL de destino.