Gerador de botão de WhatsApp para site
Escolha o texto, a posição e as cores. O código é HTML e CSS puro: não usa script nem carrega nada de fora.
Pode colar do jeito que estiver, com +, espaços ou parênteses.
Pode usar acentos, emojis e quebras de linha.
Digite o número para ver a prévia e o código.
Como instalar em um site HTML
- Copie o código gerado.
- Cole logo antes de
</body>. Se o site usa um arquivo de rodapé comum a todas as páginas, cole nele para o botão aparecer em todas. - Publique e abra o site no celular para conferir se o botão não cobre outro botão ou menu.
Como instalar no WordPress
Evite colar o código direto nos arquivos do tema (como footer.php): a próxima atualização do tema substitui esses arquivos e o botão some. Dois caminhos que sobrevivem às atualizações:
- Em todas as páginas: instale o plugin gratuito WPCode e cole o código na área de rodapé (footer) das configurações de cabeçalho e rodapé do plugin. Os nomes dos menus podem mudar entre versões do plugin.
- Em uma página só: no editor de blocos, adicione um bloco HTML personalizado e cole o código.
Outras plataformas (lojas virtuais e construtores de site) costumam ter um campo de “código personalizado” no rodapé. Consulte a ajuda da sua plataforma para saber onde fica.
Cuidados no celular
- Deixe o texto aparecer só no computador: no celular o botão vira um ícone redondo e ocupa menos espaço.
- Se o site tem barra fixa embaixo (cookies, carrinho, menu), aumente a distância da borda para o botão não ficar por cima dela.
- O botão não abre o WhatsApp sozinho: só quando a pessoa toca nele.
Quer saber quantas pessoas tocaram no botão?
Use no botão um link do ZapLink criado na conta grátis em vez do número. O painel conta as aberturas do link. Isso mede toques, não conversas: a pessoa ainda pode desistir antes de enviar a mensagem.
O ícone do botão é um balão de conversa genérico, não o logotipo oficial do WhatsApp. Se preferir o botão oficial, a Central de Ajuda do WhatsApp publica as versões e regras de uso.