Skip to content
▸ Chatsac Tools

Guia · WordPress · wordpress.org + .com

Widget WhatsApp no WordPress: 3 formas (header, footer, Elementor) — guia 2026

Cole um snippet, instale um plugin leve ou use o HTML do Elementor. Três caminhos testados pra colocar o botão WhatsApp flutuante no seu WordPress.

Gerar meu código agora →Automatizar respostas com Chatsac

Por que colocar um botão WhatsApp no WordPress

WordPress roda 43% da web. Pra pequenos negócios BR, é quase sempre a escolha default (via Hostgator, Hostinger, WPEngine ou self-hosted). E quando o site é o canal principal de aquisição, ter um botão WhatsApp visível é diferença entre 'site bonito que ninguém converte' e 'site que vira atendimento'.

O WordPress oferece 3 caminhos realistas pra injetar um snippet de script: editar o tema direto (footer.php), usar um plugin especializado tipo 'Insert Headers and Footers' (WPCode), ou dropar um bloco HTML dentro do Elementor. Os três funcionam com o snippet do Chatsac Tools — escolha o que menos te dá dor de cabeça.

Plugins dedicados de 'botão WhatsApp' existem (Click to Chat, Join.chat, WhatsApp Business Button) mas cobram pra recursos básicos como customizar cor ou esconder em páginas, e adicionam dezenas de KB de JS desnecessário. Nosso snippet faz o mesmo, grátis, sem plugin de terceiros.

Passo a passo (5 etapas)

  1. 1

    Gera o snippet e decide o método

    Abre tools.chatsac.com/pt-BR/botao-whatsapp-site, preenche os campos (número com DDI, mensagem padrão, cor, posição), copia o snippet da aba 'WordPress'. Escolhe UM dos 3 métodos abaixo — NÃO faz os três (duplica o botão).

  2. 2

    Método 1 — Editar footer.php (direto, requer cuidado)

    Admin WordPress → Aparência → Editor de Arquivos do Tema → Rodapé (footer.php). Adiciona o snippet IMEDIATAMENTE ANTES do </body>. Salvar Arquivo. Se o tema atualizar, você perde a edição — por isso use tema-filho (child theme) se vai atualizar o tema. Esse é o método mais 'limpo' se você tem child theme ativo.

  3. 3

    Método 2 — Plugin WPCode (Insert Headers and Footers, recomendado)

    Admin → Plugins → Adicionar Novo → busca 'WPCode' (ou 'Insert Headers and Footers Code' da WPBeginner). Instala, ativa. Vai em Code Snippets → + Add Snippet → Add Your Custom Code (New Snippet) → HTML Snippet → cola o snippet. Em 'Insertion' escolhe 'Site Wide Footer'. Salva + ativa. Esse método sobrevive a updates de tema.

  4. 4

    Método 3 — Elementor HTML Widget

    Se você editou a página com Elementor, abre o editor → arrasta um widget 'HTML' pra qualquer lugar (vai ser removido visualmente pela runtime mesmo) → cola o snippet → Atualiza. Use esse método só se NÃO quer o botão em todas as páginas — só nas páginas específicas que tem o widget Elementor. Pra site-wide, prefira Método 2.

  5. 5

    Verifica e testa

    Abre o site numa aba anônima. Botão verde aparece no canto inferior direito em ~2s. Clique pra testar — abre WhatsApp com mensagem pré-preenchida. Se não aparecer: confere F12 → Console por erros de JS. Se tiver erro de CSP (Content Security Policy), adiciona tools.chatsac.com ao script-src do seu header CSP.

Erros comuns e como evitar

⚠ LiteSpeed Cache ou WP Rocket adiando JavaScript

Plugins de cache agressivo (LiteSpeed, WP Rocket, Swift Performance) às vezes adiam ou combinam JS inline, quebrando o snippet. Solução: adiciona tools.chatsac.com na lista de exclusão do JS defer no plugin de cache. Procure por 'JS Excludes' ou 'Defer JS Exclusions' nas opções do plugin.

⚠ Tema desatualizado com jQuery antigo

Nosso snippet é vanilla JS (zero jQuery). Mas se o seu tema tem jQuery 1.x carregado antes e ele quebra o navigator.sendBeacon, o tracking de clicks pode falhar silenciosamente. O botão continua funcionando — só não conta o click. Solução: atualize o tema ou force jQuery 3.x no functions.php.

⚠ WP Multisite com subdomínios

Se você roda WordPress Multisite, cada site tem seu próprio admin. Instale o snippet em cada subsite separadamente. Para install_id único por loja, regenere o snippet no nosso gerador pra cada site antes de colar.

Perguntas frequentes

Tenho Elementor Pro — tem jeito mais fácil?

Sim. Elementor Pro tem um recurso 'Custom Code' (Elementor → Custom Code) que permite adicionar scripts globais com priority. Adiciona o snippet lá com Location 'Body — End' e Priority 10. Funciona site-wide sem tocar theme files.

Preciso desativar plugins de chat atuais?

Recomendado. Se você tinha 'Click to Chat', 'Join.chat', 'WhatsApp Chat Button' ou similar instalado, desative/desinstale ANTES de colar nosso snippet. Caso contrário, vão aparecer dois botões no site e o usuário fica confuso. Nosso snippet substitui esses plugins.

Funciona com WooCommerce?

100%. O botão é independente da plataforma de e-commerce que roda sobre WordPress. Clientes WooCommerce conseguem tirar dúvidas de produto via WhatsApp antes de bater 'Finalizar compra'.

Qual é o impacto no Core Web Vitals (LCP/INP/CLS)?

Zero LCP (não bloqueia render, carrega com defer). Zero CLS (position:fixed, não empurra conteúdo). INP <10ms ao clicar (abre wa.me em nova aba). Runtime adiciona ~2KB gzipped ao bundle total.

E se eu tenho CSP estrito (banks, saúde, governo)?

Adicione tools.chatsac.com no script-src do seu CSP header. Exemplo: Content-Security-Policy: script-src 'self' https://tools.chatsac.com; Sem isso, o navegador bloqueia o load da runtime e o botão não renderiza.

Tem integração nativa com Contact Form 7 ou WPForms?

Não diretamente, porque o botão abre WhatsApp como destino final — não submete form. Mas você pode combinar: use Contact Form 7 como backup (formulário formal) e o botão como canal rápido em paralelo. 90% dos visitantes preferem o botão.

Pronto pra colocar o botão no ar?

Gera o código em 30 segundos, cola no seu WordPress, e começa a converter o tráfego do seu site em conversas no WhatsApp.

Abrir gerador grátis →