# Botão flutuante de WhatsApp no site: como colocar sem plugin

> **Resposta direta:** Para colocar um botão flutuante de WhatsApp no site sem plugin, crie um link wa.me com seu número (55, DDD e número, só dígitos) e uma mensagem pronta codificada, coloque esse link num ícone e fixe o ícone no canto da tela com position: fixed no CSS. Funciona em WordPress, Wix, loja virtual ou site feito por programador.

*Por Fábio Rosa · Categoria: WhatsApp Dicas · Publicado em 2026-10-26 · Atualizado em 2026-10-26 · Tags: atendimento por WhatsApp, link do WhatsApp, Link wame, Sites, WhatsApp Business*

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.](https://walink.page/uploads/161/2026/10/2d23b8fee65429064694070e/original.large.webp)

## 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.](https://walink.page/uploads/161/2026/10/9fb93eacd22bd35dde1e3817/original.large.webp)

## 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](https://walink.page/blog/link-do-whatsapp-nao-abre-causas-comuns-e-como-resolver). Para escrever uma mensagem inicial que já filtra o pedido, o [guia de link com mensagem personalizada](https://walink.page/blog/como-criar-link-direto-para-o-whatsapp-com-mensagem-personalizada-guia-pr-tico-2026) 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.

Fonte: https://walink.page/botao-flutuante-de-whatsapp-no-site-como-colocar-sem-plugin/