Guia · Nuvemshop · BR + LATAM
Como adicionar botão WhatsApp na Nuvemshop em 2 minutos (guia 2026)
O jeito mais rápido de instalar um botão flutuante de WhatsApp na sua Nuvemshop — copia, cola no editor de HTML personalizado e publica. Sem app pago, sem plugin externo.
Por que colocar um botão WhatsApp no Nuvemshop
Se você vende na Nuvemshop, 90% dos seus compradores preferem tirar dúvida antes de finalizar o carrinho — e WhatsApp é o canal número um pra isso no Brasil. A ausência de um botão visível no site empurra o cliente pra buscar o número em outras páginas (sobre, rodapé, contato), adicionando fricção que custa conversão.
Um botão flutuante resolve isso colocando o atalho a 1 toque de distância em todas as páginas da loja — home, produto, categoria, carrinho. Sem app pago, sem plugin externo, sem dependência de tema: é um snippet de 8 linhas que você cola uma vez no editor de HTML da sua Nuvemshop e pronto.
A Nuvemshop permite isso nativamente via o campo 'Código HTML personalizado' (também chamado de 'HTML externo' ou 'Código externo' dependendo do idioma do admin). Esse campo aceita qualquer HTML/JS válido, e é carregado no final do <body> de todas as páginas da loja. Exatamente onde um botão flutuante precisa viver.
Passo a passo (5 etapas)
- 1
Gera o código no Chatsac Tools
Abre tools.chatsac.com/pt-BR/botao-whatsapp-site, cola seu número WhatsApp (com DDI +55), ajusta a mensagem que o cliente envia ao clicar, escolhe cor (verde padrão #25D366 funciona pra maioria das lojas), posição (inferior direita é convenção universal), tamanho (médio pra desktop, pequeno pra mobile-heavy). Clica em 'Copiar' na aba HTML.
- 2
Entra no admin da Nuvemshop
Loga em lojavirtualnuvem.com.br/admin (ou seu domínio custom). No menu lateral vai em 'Minha Loja' → 'Layout' → 'Editar código HTML personalizado'. Se não encontrar, procura por 'HTML externo' ou 'Código HTML'. Algumas versões do admin chamam isso de 'Scripts e códigos externos'.
- 3
Cola o snippet antes de </body>
No editor de código HTML, cola o snippet exatamente como copiou do Chatsac Tools. A ordem importa: o script precisa vir DEPOIS de qualquer conteúdo e ANTES do fechamento de </body>. Se o editor da Nuvemshop já tem outros scripts (Google Tag Manager, Meta Pixel), cola o do WhatsApp por último.
- 4
Salva e visualiza
Clica em 'Salvar' no admin. Abre sua loja numa aba anônima (importante: cache do browser pode mascarar mudanças recentes). O botão aparece no canto inferior direito em ~2 segundos após o carregamento da página. Clique pra testar — deve abrir o WhatsApp com a mensagem pré-preenchida que você configurou.
- 5
Testa no mobile
Abre a loja no celular. O botão precisa estar visível em todas as páginas (home, categoria, produto, carrinho) e clicável sem cobrir o botão 'Comprar'. Se estiver sobrepondo alguma coisa, volta no gerador e diminui o tamanho pra 'Pequeno' (48px). Em 99% dos casos o tamanho 'Médio' (60px) funciona bem tanto desktop quanto mobile.
Erros comuns e como evitar
⚠ O botão não aparece após salvar
Causa #1: cache do navegador. Solução: Cmd+Shift+R (Mac) ou Ctrl+F5 (Windows) forçando refresh. Causa #2: você colou o snippet num campo errado (tema ao invés de HTML personalizado). Causa #3: tem outro plugin de chat instalado que está conflitando — desativa temporariamente pra isolar.
⚠ O botão aparece mas não abre o WhatsApp
Normalmente é número mal-formatado. Formato correto: DDI + DDD + número sem espaços, pontos ou travessões. Ex.: 5511999999999 (não +55 (11) 99999-9999). O gerador já normaliza pra você, mas se editou o snippet manualmente, confere.
⚠ Carrega devagar e afeta performance
Nossa runtime usa iframe about:blank com atributo 'defer' — não bloqueia o render da sua loja. Se o PageSpeed do Google está reclamando, é outra coisa (provavelmente imagens pesadas ou apps de tracking). O botão em si adiciona ~2KB gzipped e carrega depois do conteúdo.
⚠ O tema custom da minha loja quebra o layout
Alguns temas customizados da Nuvemshop (feitos por agências) injetam CSS global com !important em position:fixed, o que pode afetar nosso iframe. Se acontecer, abre ticket com sua agência pedindo pra remover !important dos elementos com z-index > 2000000000.
E se eu sou de um vertical específico?
- Moda e calçados: cor do botão pode acompanhar a paleta da loja (hex customizado no gerador), mas mantenha contraste AA mínimo pra acessibilidade.
- Alimentação e delivery: mensagem pré-preenchida ideal é 'Olá! Quero fazer um pedido' — converte 2-3x mais que saudação genérica.
- Eletrônicos e alto ticket: considere colocar o número do vendedor sênior (não do SAC geral) — cliente de R$2k+ quer falar com quem fecha, não com atendente script.
- B2B e atacado: use mensagem 'Olá! Quero uma cotação para [produto]' e direciona pro comercial, não pro SAC.
Perguntas frequentes
Preciso de plano pago da Nuvemshop pra instalar o botão?
Não. O editor de HTML personalizado está disponível em todos os planos da Nuvemshop (inclusive o gratuito). O gerador da Chatsac Tools também é 100% grátis e não exige cadastro nem cartão.
O botão funciona no app mobile da minha loja (PWA)?
Sim. O snippet é HTML/JS puro e funciona em qualquer navegador moderno, incluindo PWAs instaladas. Em iOS, o clique abre diretamente o WhatsApp se instalado; caso contrário, abre a versão web (web.whatsapp.com).
Posso esconder o botão em algumas páginas (checkout, por exemplo)?
Sim. Você pode envolver o snippet num bloco condicional Liquid (se o tema suportar) ou usar CSS pra esconder em páginas específicas. Ex.: na página de checkout muita gente esconde pra não distrair. Adicione no CSS do tema: body.checkout iframe[title='WhatsApp'] { display: none !important; }.
O que acontece se meu número muda?
Você precisa atualizar o snippet. Abre o gerador, cola o novo número, copia novamente e substitui no editor HTML da Nuvemshop. Por isso recomendamos salvar o install_id (último campo do snippet) — futuramente vamos oferecer update remoto sem precisar editar o código.
O botão contabiliza cliques em algum lugar?
Sim. A runtime da Chatsac Tools registra anonimamente cada carregamento (install) e cada clique (click) associados ao install_id único do seu botão. Se você opt-in no email no gerador, recebe um relatório semanal por email com a contagem de cliques e dicas de automação.
Tem app oficial na Loja de Apps da Nuvemshop?
Não precisa — o snippet HTML é mais leve e performático do que a maioria dos apps de chat da Loja. Zero dependências de terceiros, zero scripts externos além do nosso runtime de 2KB, funciona offline (salvo o wa.me que abre fora).
Posso customizar o ícone do botão?
Na versão gratuita, não — o ícone é o logo oficial do WhatsApp (que é o que os usuários reconhecem e clicam). Customização de ícone vem na versão com conta Chatsac que integra o botão direto ao CRM de atendimento.
E se eu não souber onde fica o editor de HTML personalizado no admin da minha Nuvemshop?
Depende do tema. No tema 'base' e na maioria dos custom: Admin → Minha Loja → Layout → Design → Editar código. Se não encontrar, o suporte da Nuvemshop te ajuda em 1h pelo chat do próprio admin (botão 'Ajuda' no canto inferior). É o mesmo lugar onde você coloca o Google Analytics ou Meta Pixel.
Pronto pra colocar o botão no ar?
Gera o código em 30 segundos, cola no seu Nuvemshop, e começa a converter o tráfego do seu site em conversas no WhatsApp.
Abrir gerador grátis →