Como Adicionar Botão do WhatsApp no Site [Sem Programação]

Adicionar um botão de WhatsApp no site é uma das formas mais simples de aumentar o número de clientes que entram em contato. Em vez de procurar o número no site, copiar e abrir o WhatsApp manualmente, o visitante chega ao chat com um único clique.

Neste guia você aprende como fazer isso em qualquer plataforma, com e sem código.

Por que ter um botão de WhatsApp no site

• Clientes preferem o WhatsApp ao formulário de contato
• A taxa de resposta pelo WhatsApp é muito maior do que por e-mail
• O botão flutuante aparece em todas as páginas sem interromper o conteúdo
• Aumenta as conversões de visitantes em contatos

Método 1 — Usando nosso gerador (mais fácil)

A forma mais rápida é usar nossa ferramenta gratuita. Ela gera o código HTML completo com estilos inclusos — só copiar e colar.

O que você pode personalizar:

• Tipo: botão inline (dentro do conteúdo) ou flutuante (fixo no canto)
• Texto do botão
• Cor
• Formato (arredondado, pílula ou quadrado)
• Posição do botão flutuante (direito ou esquerdo)

Após personalizar, copie o código e siga as instruções abaixo para sua plataforma.

Método 2 — Código HTML manual

Se preferir criar manualmente, aqui estão os dois modelos:

Botão inline

<a href="https://wa.me/5511999999999?text=Olá!%20Vim%20pelo%20site."
   target="_blank"
   rel="noopener noreferrer"
   style="display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:12px 22px;border-radius:8px;text-decoration:none;font-family:sans-serif;font-size:15px;font-weight:600;">
  Falar no WhatsApp
</a>

Botão flutuante (aparece em todas as páginas)

<a href="https://wa.me/5511999999999"
   target="_blank"
   rel="noopener noreferrer"
   style="position:fixed;bottom:20px;right:20px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.25);z-index:9999;">
  <!-- ícone SVG do WhatsApp aqui -->
</a>

Substitua 5511999999999 pelo seu número com código do país (55) e DDD, sem espaços ou traços.

Como adicionar no WordPress

Usando o editor de blocos (Gutenberg):

1. Clique em + para adicionar um bloco
2. Busque por HTML personalizado
3. Cole o código do botão
4. Clique em Publicar ou Atualizar

Para o botão flutuante aparecer em todas as páginas:

1. Vá em Aparência → Editor de tema (ou use um plugin como Insert Headers and Footers)
2. Cole o código antes do </body> no arquivo footer.php
3. Salve as alterações

Dica: Use o plugin "Insert Headers and Footers" para adicionar o código sem editar arquivos do tema diretamente.

Como adicionar no Webflow

1. Arraste um elemento Embed para a página
2. Cole o código HTML no campo de código
3. Para o botão flutuante: coloque o elemento Embed dentro do elemento Body e use as configurações de posição fixed
4. Publique o site

Como adicionar no Wix

1. Vá em Adicionar → Mais → HTML iFrame
2. Cole o código do botão e clique em Atualizar
3. Posicione o elemento onde desejar

Limitação: O Wix não permite código CSS com position:fixed de forma nativa. Para o botão flutuante, use o botão de WhatsApp nativo do Wix ou um widget de terceiros.

Como adicionar no Shopify

1. No admin da loja, vá em Loja virtual → Temas
2. Clique em Ações → Editar código
3. Abra o arquivo theme.liquid
4. Cole o código antes de </body>
5. Salve

Como adicionar no Squarespace

1. Edite a página e clique em + para adicionar um bloco
2. Escolha Código
3. Cole o código HTML
4. Aplique e publique

Boas práticas para o botão de WhatsApp

Inclua uma mensagem pré-preenchida com o contexto de onde o cliente veio. Exemplo: "Olá! Vim pelo site e gostaria de mais informações." Isso acelera o atendimento.

Use o botão flutuante com moderação — em sites muito carregados, um botão flutuante pode distrair. Avalie se faz sentido para o seu negócio.

Posicione no canto inferior direito — é onde os usuários esperam encontrar botões de chat, por convenção do mercado.

Adicione em páginas estratégicas — página de produto, página de preços e landing pages têm maior impacto do que a homepage.

Perguntas frequentes

O botão funciona no celular e no computador? Sim. No celular abre o app do WhatsApp. No computador abre o WhatsApp Web.

Precisa de WhatsApp Business? Não. O link funciona com qualquer conta WhatsApp. O WhatsApp Business oferece recursos extras como catálogo e respostas automáticas, mas não é obrigatório.

Como rastrear cliques no botão? Adicione parâmetros UTM ao link e acompanhe no Google Analytics. Nossa ferramenta de Link API gera links com UTM automaticamente.