Skip to content
▸ Chatsac Tools

Guia · HTML puro · qualquer site estático

Código HTML pra botão WhatsApp (qualquer site, sem plataforma)

Pra quem tem site estático, landing page one-off, ou plataforma exótica (Wix, Webflow, Framer, Carrd, SquareSpace, site-próprio). Um snippet, zero dependências.

Gerar meu código agora →Automatizar respostas com Chatsac

Por que colocar um botão WhatsApp no HTML puro

Nem todo site vive em Nuvemshop, Shopify ou WordPress. Existe um universo de landing pages em Webflow, portfolios em Framer, páginas no Carrd, institucionais no SquareSpace, sites feitos à mão com HTML/CSS. Pra todos esses, o mesmo snippet funciona — porque é HTML/JS puro, sem dependência de plataforma.

O princípio é simples: todo site, no final das contas, serve HTML pro browser. Se você consegue colar um script antes da tag </body>, o botão aparece. A maioria dos construtores de sites modernos (Webflow, Framer, Wix, SquareSpace) oferece um campo 'Custom Code' ou 'Embed HTML' exatamente pra esse tipo de coisa.

Se o seu construtor não oferece esse campo (raro — apenas em planos muito restritos), você tem duas saídas: upgrade pra um tier que libere custom code (normalmente +US$10-20/mês), ou migre pra uma plataforma que aceite. Vale a pena pelo ROI — um botão WhatsApp visível paga o upgrade em 1-2 vendas.

Passo a passo (5 etapas)

  1. 1

    Gera o snippet

    Abre tools.chatsac.com/pt-BR/botao-whatsapp-site, preenche os campos (número com DDI, mensagem, cor, posição, tamanho), copia o snippet da aba 'HTML puro'. É o formato mais universal — funciona em qualquer lugar que aceite HTML custom.

  2. 2

    Encontra onde colar no seu construtor/editor

    Webflow: Projeto → Settings → Custom Code → Footer Code. Framer: Site Settings → Custom Code → End of <body> tag. Wix: Settings → Custom Code → Add Custom Code → body - end. SquareSpace: Settings → Advanced → Code Injection → Footer. Carrd: plano Pro → Site → Embed → HTML. HTML próprio (FTP/Git): arquivo HTML, cola antes de </body>.

  3. 3

    Cola o snippet exatamente como copiou

    Cola o bloco completo (comentário + <script>) no campo de custom code. Não modifique o src do script, os data-attributes, nem remova o atributo 'defer'. Se o construtor tem limite de caracteres no campo, o snippet tem ~350 caracteres — entra em qualquer lugar.

  4. 4

    Publica e testa

    Clica em 'Publicar' ou 'Publish' no construtor. Abre o site numa aba anônima do browser (pra driblar cache). Botão verde aparece no canto inferior direito em ~2s após carregamento. Clique pra testar — deve abrir WhatsApp com mensagem pré-preenchida.

  5. 5

    Se o botão não aparecer (debug rápido)

    F12 → Console. Se tem erro 'Refused to load script' ou 'CSP': seu construtor tem CSP bloqueando. Procure nas configs por 'Content Security Policy' e adicione tools.chatsac.com na lista de origens permitidas pra script-src. Se não tem erro no console e o botão ainda não aparece: confere se o snippet foi mesmo publicado (não ficou só salvo em rascunho).

Erros comuns e como evitar

⚠ SquareSpace no plano Personal (não Business)

Code Injection só está disponível no plano Business ou superior. No plano Personal, não dá pra instalar. Upgrade ou migre pra Webflow/Carrd/Wix.

⚠ Wix site blocos antigo (não Editor X / Wix Studio)

O Wix antigo tem HTML Embed como widget (arrastável em página). Se usar esse, o botão fica restrito à página onde colocou. Pra site-wide: Wix antigo não suporta — use Wix Editor X (nova versão) ou migre.

⚠ Framer com animações de página pesadas

Em sites Framer com muitas animações de scroll/transition, o iframe do botão às vezes tenta renderizar durante a transição e pisca. Solução: adicione CSS customizado com transition:opacity 300ms no iframe[title='WhatsApp'].

⚠ Webflow com Lightbox ou Modal customizado

Se o site tem lightbox/modal customizado que usa z-index muito alto (>2000000000), pode sobrepor o botão. Solução: no snippet, o iframe usa z-index: 2147483646 (quase o max). Garanta que nenhum outro elemento no site use z-index maior.

Perguntas frequentes

Funciona em sites servidos por CDN estática (Vercel, Netlify, Cloudflare Pages)?

100%. Nosso snippet não precisa de backend, cookies, ou estado. Basta que o HTML sirva a tag <script> — o resto rola client-side.

Funciona em AMP pages?

Não. AMP tem restrições rigorosas sobre JS custom — só permite scripts hospedados no CDN do AMP. Nosso script não está na whitelist AMP e não pode ser. Se o site é AMP, use amp-social-share ou um redirect direto pro wa.me via <a href>.

E em Next.js / Gatsby / Astro / Nuxt?

Perfeito. Adicione o snippet no _document.tsx (Next), gatsby-ssr.js (Gatsby), no <Head> (Astro) ou app.vue (Nuxt). O atributo defer garante que não quebre SSR/hydration.

Posso ter o snippet em vários sites ao mesmo tempo?

Pode. Mas cada instalação conta como 'install' separada (com install_id único do snippet gerado). Recomendado: gerar um snippet NOVO pra cada site pra ter analytics separados por install.

O script expira? Preciso trocar em algum momento?

Não expira. O script /b/v1.js está versionado (v1) — futuras versões (v2, v3) serão releases separadas. O v1 continua funcionando indefinidamente. Quando quisermos forçar upgrade, anunciaremos com antecedência.

E acessibilidade (aria-label, screen reader)?

O iframe tem title='WhatsApp' e aria-label='Abrir conversa no WhatsApp'. O link interno tem aria-label também. Passa em WAVE e axe com zero violations. Contraste do ícone branco sobre fundo verde #25D366 é AAA.

Pronto pra colocar o botão no ar?

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

Abrir gerador grátis →