Gerador de botão flutuante de WhatsApp para site
Escolha número, mensagem, cor, lado da tela e texto opcional: a ferramenta gera um trecho de HTML e CSS que você cola no site para mostrar um botão de WhatsApp fixo no canto da página.
Código para colar no site
Copiado!
Prévia
Como é calculado
O que o código faz
O trecho gerado tem duas partes: um link comum (<a>) com o ícone do WhatsApp desenhado em SVG e um bloco <style> com o visual do botão. Não há JavaScript, biblioteca nem script carregado de outro servidor. Por isso o botão não deixa o site mais lento, não coloca cookies e não envia dados de visitantes a ninguém — é só um link estilizado.
O link por trás do botão
O endereço do botão é um link https://wa.me/, o mesmo do nosso gerador de link de WhatsApp. O número é convertido para o formato internacional só com dígitos: a ferramenta tira espaços, parênteses, traços e o sinal de +, e acrescenta o código do país 55 quando o número tem até 11 dígitos (DDD + número). A mensagem opcional é codificada com encodeURIComponent e vai depois de ?text=, para que a conversa já abra com o texto preenchido. O link abre em nova aba (target="_blank" com rel="noopener").
As opções
- Lado: canto inferior direito (padrão) ou esquerdo, sempre a 20 px da borda lateral.
- Cor: qualquer cor em hexadecimal (
#25d366é o padrão). Se o valor não for um hexadecimal válido, o código volta para o verde padrão. O ícone e o texto são brancos; escolha um fundo escuro o bastante para manter o contraste. - Texto: opcional. Sem texto, o botão é um círculo de 56 px só com o ícone; com texto (por exemplo “Fale conosco”), vira uma pílula com ícone e rótulo. O texto também vira o
aria-label, lido por leitores de tela; sem ele, o rótulo acessível é “WhatsApp”. - Distância do rodapé: de 0 a 200 px a partir da borda inferior (padrão 20 px). Aumente se o botão cobrir um aviso de cookies, um chat ou a barra de navegação do celular.
O botão fica por cima do conteúdo (z-index: 9999), ganha contorno visível ao receber foco pelo teclado e some na impressão (@media print), para não aparecer em páginas impressas ou salvas em PDF.
Onde colar
- HTML simples: cole o trecho logo antes de
</body>em cada página (ou no arquivo de rodapé compartilhado). - WordPress: use um bloco “HTML personalizado” numa área que aparece em todas as páginas, como o rodapé do tema, ou um plugin de inserção de código no rodapé. Alguns temas têm um campo próprio para scripts e código no rodapé.
- Wix: em Configurações do site → Avançado → Código personalizado, adicione o trecho em “Body – fim” para todas as páginas. O elemento “Incorporar HTML” roda dentro de uma moldura (iframe) e prenderia o botão dentro dela.
Se a sua página já tiver uma classe chamada wa-float, renomeie-a no trecho para evitar conflito. Depois de publicar, teste no celular: toque no botão e confira se a conversa abre no número certo.
Esta ferramenta não tem vínculo com o WhatsApp nem com a Meta. WhatsApp é marca registrada da WhatsApp LLC.
Exemplo resolvido
Uma confeitaria com o número fictício +55 41 99876-5432 quer o botão no canto esquerdo, porque o lado direito já tem o aviso de entrega. Digitando (41) 99876-5432 e a mensagem “Olá! Quero fazer um pedido.”, o link do botão vira https://wa.me/5541998765432?text=Ol%C3%A1!%20Quero%20fazer%20um%20pedido.. A cor escolhida foi #128c7e, um verde mais escuro que dá bom contraste com o texto branco; o rótulo é “Fale conosco” e a distância do rodapé, 90 px, para não cobrir a barra do celular. No CSS gerado aparecem left:20px;bottom:90px e background:#128c7e. O trecho inteiro tem pouco mais de 1 KB e vai colado antes do </body>.
Perguntas frequentes
O botão deixa o meu site mais lento?
Praticamente nada. O trecho tem pouco mais de 1 KB de HTML e CSS, com o ícone desenhado em SVG no próprio código, sem imagem para baixar, sem fonte externa e sem JavaScript. Muitos plugins de WhatsApp carregam scripts de terceiros que pesam bem mais e podem afetar o tempo de carregamento e a nota de desempenho. Aqui o navegador só desenha um link.
Preciso de conta no WhatsApp Business ou de API?
Não. O botão usa o link público wa.me, que funciona com qualquer número registrado no WhatsApp, seja conta pessoal ou do WhatsApp Business. Não há cadastro, chave de API nem custo. A API oficial só faz sentido para quem precisa de automação, atendimento com vários atendentes ou mensagens disparadas pelo sistema — não para um simples botão de contato.
O botão aparece em cima de outros elementos do site. Como resolvo?
Ajuste a distância do rodapé para subir o botão (até 200 px) ou troque o lado da tela. Se outro elemento continuar por cima, ele provavelmente tem z-index maior que 9999; nesse caso, altere o valor no CSS do trecho. Avisos de cookies e widgets de chat costumam ficar no canto inferior, então vale testar a página no celular e no computador depois de colar.
Posso mudar o tamanho, a fonte ou a sombra do botão?
Pode. O visual está todo no bloco <style>, na classe .wa-float: min-height e min-width controlam o tamanho, font controla o texto e box-shadow a sombra. Mantenha pelo menos 44 a 48 px de altura para o toque no celular ser confortável. Se editar, preserve a regra @media print, que esconde o botão ao imprimir.
O botão é acessível para leitores de tela?
O link tem um aria-label com o texto que você escolheu ou, se não houver texto, com “WhatsApp”, e o ícone é marcado como decorativo. Quem navega pelo teclado vê um contorno escuro quando o botão recebe foco. Para leitores de tela, um rótulo claro como “Fale conosco pelo WhatsApp” ajuda mais do que deixar o botão só com o ícone.
Vocês registram quem clica no botão?
Não. O código não tem rastreamento: o clique vai direto do navegador do visitante para o wa.me, sem passar por servidor nosso. O trecho também é gerado no seu navegador, e o número e a mensagem que você digita não são enviados para nós. Se quiser medir cliques, use a ferramenta de estatísticas que o seu site já usa, informando os visitantes conforme a LGPD.
Base legal
Simuladores relacionados
Atualizado em 13/11/2026 · por Juliana Costa