Quer colocar um botão do WhatsApp flutuante no Elementor grátis, sem instalar outro plugin? Dá para fazer com um recurso nativo do Elementor. Você escolhe um modelo de botão de contato, informa seu número e publica. O botão fica acessível enquanto o visitante rola a página, inclusive no celular.
Este tutorial mostra primeiro o caminho sem código. Depois, se você não encontrar a opção na sua instalação, há um exemplo simples de HTML e CSS para colocar apenas na página desejada. Também explico como configurar a mensagem pronta e resolver os erros mais comuns.
Resposta rápida: o Elementor Free já tem botão flutuante?
Sim. A partir do Elementor 3.23, a plataforma passou a oferecer modelos de botões flutuantes, inclusive para abrir conversas pelo WhatsApp. O anúncio oficial descreve três modelos na versão gratuita e mais opções na versão Pro. Na documentação atual, eles são criados no painel do WordPress como elementos flutuantes, não arrastando um botão comum para dentro da página.
Você precisa do WordPress com Elementor instalado. A expressão “sem plugin” significa aqui sem instalar plugin adicional só para o WhatsApp, não que o Elementor deixe de ser um plugin.
Como colocar um botão flutuante de WhatsApp no Elementor grátis, passo a passo
- Entre no painel do WordPress. No menu lateral, procure Elementor > Editor > Modelos > Elementos flutuantes. Em algumas instalações, a seção aparece em Modelos > Botões flutuantes. Ambas as nomenclaturas aparecem em materiais oficiais do Elementor.
- Clique em adicionar novo elemento flutuante. Abra a biblioteca de modelos e selecione um modelo de botão de contato. Não é necessário começar um layout do zero.
- Escolha a plataforma WhatsApp. Na área de configuração do botão de chat, selecione WhatsApp e informe o número com DDD e código do país quando o campo solicitar.
- Personalize apenas o necessário. Ajuste tamanho, posição, distância da borda e texto da área de contato. Para sites de serviço, um botão no canto inferior costuma ser mais fácil de localizar.
- Publique e teste. Abra a página em uma janela anônima, no computador e no celular. Clique e veja se uma conversa com o número correto é aberta.
Segundo a documentação oficial atualizada em outubro de 2026, as condições avançadas para escolher páginas específicas são um recurso reservado ao Pro. Na versão gratuita, o fluxo nativo tende a exibir o botão globalmente; se você precisa de um botão diferente em cada página, avalie uma implementação localizada.
Como criar o link oficial wa.me com o número correto
O link do WhatsApp não exige instalar API, configurar chatbot ou contratar uma assinatura. Ele apenas leva o visitante para uma conversa. A documentação oficial explica que o número deve estar em formato internacional, somente com dígitos, sem espaços, parênteses, hífen nem sinal de mais. Fonte: Central de Ajuda do WhatsApp.
Modelo de link:
https://wa.me/55DDDNUMERO
Exemplo ilustrativo: https://wa.me/5511999999999. Troque pelo número verdadeiro de WhatsApp da empresa.
Para abrir o chat com uma mensagem já preenchida, acrescente ?text= e o texto codificado para URL. Por exemplo: https://wa.me/5511999999999?text=Ol%C3%A1%2C%20quero%20um%20or%C3%A7amento.
Importante: o texto aparece no campo da conversa; o visitante ainda precisa confirmar o envio. Isso não é automação de mensagens nem disparo via API do WhatsApp Business.
Alternativa: colocar o botão com HTML e CSS, sem plugin extra
Essa opção é útil quando você quer o botão somente em uma página feita com Elementor Free ou quando a biblioteca de elementos flutuantes não está disponível. O próprio Elementor documenta o widget HTML, que permite incorporar HTML e CSS. Esse widget pode ter restrições por perfil de usuário; para adicionar código, use uma conta autorizada e faça backup da página.
No editor da página, pesquise o widget HTML, arraste-o para a página, cole o exemplo abaixo e substitua o número e a mensagem. Depois publique.
O exemplo usa um botão com texto, legível e acessível, para não depender de bibliotecas de ícones nem imagens externas. O CSS é isolado pela classe meu-wa, usa position:fixed, altura de toque de pelo menos 48 pixels e ajuste da margem inferior para dispositivos com área segura.
Se a página usa barra de cookies, banner fixo, botão de acessibilidade ou CTA flutuante, ajuste bottom e right para evitar sobreposição. O código foi construído como exemplo reutilizável; valide o comportamento no seu tema e nas telas do seu site antes de publicar para clientes.
O botão deve aparecer no site inteiro ou só na página de vendas?
Depende de como seu site recebe contatos. Em sites institucionais simples, o botão global facilita o acesso a qualquer momento. Em uma landing page, pode ser mais útil abrir o WhatsApp com uma mensagem específica sobre a oferta, como “Vim pela página do serviço de manutenção e quero um orçamento”. Essa mensagem evita que o vendedor precise perguntar de qual página veio o contato.
Não confunda identificar a página na própria mensagem com rastreamento completo. Se você quer descobrir quais páginas geram tentativas de contato, veja nosso tutorial sobre como rastrear cliques no botão do WhatsApp usando o Google Analytics 4. Ele ensina a aproveitar a medição otimizada e, quando necessário, criar um evento no Google Tag Manager. Um clique não garante que a mensagem foi enviada nem que houve venda.
Botão do WhatsApp não aparece no celular: 7 verificações
- Confirme que foi publicado. Sair do editor sem publicar pode deixar o elemento visível no preview, mas ausente para visitantes.
- Teste em janela anônima. Cache do navegador e do site pode manter a versão anterior.
- Veja se há configuração responsiva. Um componente pode estar escondido no mobile pelo painel de visibilidade.
- Procure outro botão na mesma posição. Barras de consentimento, menus e CTAs fixos podem cobrir o elemento.
- Confira o número. Remova o sinal de mais, símbolos e espaços e confirme se a conta está ativa no WhatsApp.
- Verifique restrições de usuário no widget HTML. Alguns perfis não podem inserir o código, conforme a configuração de permissões do Elementor.
- Inspecione o CSS do tema se estiver usando a alternativa manual. Um contêiner com transformações ou camadas sobrepostas pode afetar a posição fixa. Teste inicialmente numa página simples.
Se o botão aparece mas leva para o número errado, o problema geralmente é o link, não o posicionamento. Se abre o chat sem mensagem pronta, revise a codificação do parâmetro text.
Qual método escolher? Comparativo direto
| Critério | Botão nativo Elementor | Widget HTML |
|---|---|---|
| Código | Não precisa | Precisa colar HTML e CSS |
| Plugin extra de chat | Não | Não |
| Aparência | Modelos da biblioteca | Personalização por CSS |
| Exibição | Normalmente global na versão grátis | Na página em que o widget foi colocado |
| Melhor para | Site institucional | Landing page específica |
Comece pelo recurso nativo quando ele estiver disponível. O widget HTML faz sentido se você precisa controlar o código ou limitar a inserção a uma página sem contratar outro complemento.
Como usar o botão para receber contatos melhores
O botão sozinho não cria demanda. O visitante precisa entender o que acontece quando clicar. Em uma página de orçamento, prefira “Tirar dúvida sobre este serviço” a “Fale conosco” quando o contexto permitir. Defina um número com alguém responsável por responder e configure uma mensagem inicial específica.
Se você cria sites para clientes, mantenha uma checklist de entrega: número correto, link de teste, posicionamento no celular, acesso ao WhatsApp Web e horário de atendimento atualizado. Esse cuidado evita suporte desnecessário após a publicação.
Para quem está montando um site a partir de uma referência, também temos um guia sobre editar uma landing page no Elementor e outro sobre colocar um site no ar. Se você precisa trabalhar com a estrutura de sites como ponto de partida, conheça o SiteCloner Pro, ferramenta relacionada para captura e personalização de referências visuais. Use sempre imagens e elementos que você tem direito de reutilizar.
Perguntas frequentes
Preciso pagar o Elementor Pro para criar botão de WhatsApp flutuante?
Não necessariamente. O Elementor Free oferece modelos de botões flutuantes desde a versão 3.23, conforme o anúncio oficial. Algumas condições avançadas de exibição e modelos adicionais são exclusivos de planos pagos.
Tem como colocar o botão em todas as páginas sem instalar outro plugin?
Sim, pelo recurso nativo de elemento flutuante do Elementor, usando o fluxo de publicação do próprio editor. No método HTML mostrado aqui, o botão pertence à página em que você colou o código.
O botão do WhatsApp com wa.me é gratuito?
O link para iniciar conversa é gratuito. Isso é diferente da API do WhatsApp Business, usada para mensagens programáticas e automação de atendimento, que possui regras e condições próprias.
Como colocar uma mensagem automática no botão do WhatsApp?
Use o parâmetro ?text= com uma mensagem codificada para URL. O WhatsApp abre a conversa com o texto preenchido; o visitante ainda precisa tocar em enviar.
Posso deixar o botão apenas no celular?
O controle responsivo depende do método e da versão utilizada. No HTML, use CSS media queries para exibir somente em telas estreitas. Antes, confira se você não está ocultando um contato importante no desktop.
O botão melhora o SEO?
Não é um fator direto que garanta melhor posição no Google. Sua utilidade é facilitar o contato. Para SEO, concentre-se em conteúdo original, navegação clara, desempenho e links que o buscador consiga seguir, conforme o Google Search Essentials.
Fontes consultadas e atualização
Atualizado em 14 de novembro de 2026. Tutorial baseado em documentação do Elementor e do WhatsApp; o código alternativo é um exemplo técnico que deve ser conferido no seu tema. Não se trata de um teste documentado de todas as versões do Elementor.
