Para colocar um botão flutuante de WhatsApp no site sem plugin, basta criar um link wa.me com seu número e uma mensagem pronta, colocar esse link num ícone e fixar o ícone no canto da tela com poucas linhas de CSS. Funciona em WordPress, Wix, loja virtual ou site feito por programador.

Por que fazer o botão sem plugin?

Plugin resolve rápido, mas cobra um preço. Cada plugin a mais carrega arquivos extras, precisa de atualização e pode entrar em conflito com o tema ou com outros plugins. Alguns liberam o básico e cobram para tirar a marca deles do botão. Outros fazem o clique passar pelo servidor deles antes de chegar ao seu WhatsApp.

O botão feito à mão é só um link com uma imagem. Ele é leve, não depende de ninguém e você sabe exatamente para onde o cliente vai quando clica.

Plugin ou botão feito à mão? (Com plugin x À mão). Peso: Arquivos extras no site x Só link e imagem; Manutenção: Atualiza e conflita x Não depende de ninguém; Clique: Pode passar por servidor x Vai direto ao WhatsApp; Marca no botão: Básico grátis, marca paga x Sem marca de terceiro.

O que eu preciso ter em mãos antes de começar?

São três coisas:

  • Seu número no formato certo: 55, depois o DDD, depois o número. Só dígitos, sem espaço, traço, parênteses ou zero na frente do DDD.
  • A mensagem inicial: o texto que já aparece digitado quando o cliente abre a conversa. Algo como "Olá, vim pelo site e quero saber sobre o orçamento".
  • O ícone: uma imagem do símbolo do WhatsApp, de preferência em SVG ou PNG com fundo transparente.

O link fica assim: wa.me/55DDDNÚMERO?text= seguido da mensagem. Atenção a um detalhe que derruba muita gente: a mensagem precisa ir codificada. Espaço vira %20, acento vira outro código. Se você digitar o texto cru no link, ele pode chegar cortado ou com caracteres estranhos. Um gerador de link faz essa conversão sozinho.

Como montar o botão, passo a passo?

  1. Gere o link com seu número e a mensagem já codificada. Teste no celular antes de seguir.
  2. Crie um bloco de HTML no editor do site e coloque ali um link com esse endereço, com a imagem do ícone dentro. Marque para abrir em nova aba e escreva no texto alternativo da imagem algo como "Falar no WhatsApp". Isso ajuda quem usa leitor de tela.
  3. Dê um nome a esse link, por exemplo botao-whats, para poder estilizar só ele.
  4. No campo de CSS do site, aplique a esse nome as regras position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; z-index: 9999. É o position: fixed que deixa o botão parado no canto enquanto a página rola.
  5. Teste no celular e no computador. Clique, veja se a conversa abre com a mensagem certa e se o botão não cobre nada importante.

Do link ao botão fixo no canto: 1. Gere link codificado e teste; 2. HTML: link, ícone, nova aba; 3. Nome no link + CSS fixed; 4. Teste no celular e no PC.

Onde colo isso no meu tipo de site?

Depende da plataforma, mas a lógica é sempre a mesma: o link vai num lugar que aparece em todas as páginas, como o rodapé, e as regras vão no campo de CSS personalizado.

  • WordPress: o link entra num bloco de HTML personalizado no rodapé. O CSS vai em "CSS adicional", que fica no Personalizar ou no editor do site, conforme o tema.
  • Wix e plataformas de loja virtual: procure opções como "código personalizado" ou "editar rodapé". Em algumas plataformas esse recurso depende do plano contratado.
  • Site feito por programador: mande o link pronto e peça o botão fixo no canto. É serviço de poucos minutos.

O botão está no site, mas ninguém chama. Onde costuma estar o erro?

Na maioria das vezes, o problema não é o botão. É o link dentro dele. Os erros mais comuns:

  • Número sem o 55, com zero antes do DDD ou com traço.
  • Mensagem colada sem codificação, que chega quebrada.
  • Mensagem genérica demais, só "Olá", que obriga você a perguntar tudo de novo.
  • No celular, o botão fica em cima do botão de comprar ou do aviso de cookies e atrapalha mais do que ajuda.

Se o seu caso é o link, vale gerar de novo do zero. O WaLink.Page cria o link wa.me com a mensagem já codificada e o QR Code do mesmo contato, de graça e sem cadastro. Você testa antes de colar no site. Se o clique abre e não chega ao WhatsApp, veja as causas em Link do WhatsApp não abre: causas comuns e como resolver. Para escrever uma mensagem inicial que já filtra o pedido, o guia de link com mensagem personalizada tem exemplos prontos.

Perguntas frequentes

O botão feito à mão deixa o site mais lento?

Quase nada. É uma imagem pequena e poucas linhas de CSS, bem mais leve que a maioria dos plugins.

Funciona com WhatsApp Business?

Sim. O link wa.me é o mesmo para o WhatsApp comum e para o Business. Basta usar o número da conta que atende.

Dá para mostrar o botão só no celular?

Dá. No CSS, use uma regra que esconda o botão em telas largas. Mas pense bem: muita gente pede orçamento pelo computador e abre no WhatsApp Web.