Como instalar um chatbot no site: passo a passo em WordPress, Shopify, Wix, GTM e Next.js

A instalação é uma linha. O trabalho está no resto

Instalar um chatbot no site quase sempre significa colar uma linha de script antes do fechamento da tag </body>. O que muda de uma plataforma para outra é só o lugar onde essa linha entra. A parte que dá trabalho de verdade vem antes, com o catálogo e as políticas da loja, e depois, com os testes.

Neste guia a gente mostra o caminho em cada plataforma, na ordem em que os clientes da GUSTA mais perguntam, e fecha com uma lista do que testar antes de avisar o time que o chat está no ar.

Antes de colar qualquer código

Separe três coisas antes de abrir o painel do site:

1. O código de instalação. Toda ferramenta de chat gera um. Copie do painel, sem editar.
2. Acesso de administrador ao site, ao tema ou ao Google Tag Manager. Em loja grande, muitas vezes quem tem esse acesso é a agência, então vale combinar antes.
3. O conteúdo que o bot vai usar. Política de troca, prazo de entrega, formas de pagamento, perguntas frequentes. Chatbot de loja também precisa do catálogo conectado. Se o script entra antes disso, o chat abre mas não sabe responder preço nem estoque.

Como é o código de um chatbot

Este é o formato do script da Nola AI, o assistente de vendas que a GUSTA desenvolve. Outras ferramentas usam um formato parecido.

<script async src="https://chat.gusta.click/widget.js"
  data-bot-id="SEU_BOT_ID"
  data-token="SEU_TOKEN"></script>

O atributo async faz o navegador baixar o script sem travar o carregamento da página. Os atributos data-bot-id e data-token dizem qual assistente carregar e já vêm preenchidos no painel. Um cuidado simples evita metade dos chamados de suporte: cole o código uma vez só, num único lugar. Script no tema e no Tag Manager ao mesmo tempo é a causa mais comum de chat duplicado.

WordPress e WooCommerce

No WordPress existem três jeitos seguros de publicar o script. Escolha um.

Tema de blocos (Twenty Twenty-Four, Twenty Twenty-Five e parecidos). Vá em Aparência, Editor, abra a parte de modelo do rodapé e adicione um bloco HTML personalizado com o código. Salve. Como o rodapé aparece em todas as páginas, o chat também aparece.

Tema clássico. Use um tema filho e adicione o script no gancho wp_footer, dentro do functions.php:

add_action('wp_footer', function () {
  echo '<script async src="https://chat.gusta.click/widget.js" data-bot-id="SEU_BOT_ID" data-token="SEU_TOKEN"></script>';
});

Não edite o functions.php do tema principal. A próxima atualização do tema apaga a alteração e o chat some sem aviso.

Google Tag Manager. Se o site já tem GTM, prefira ele. O passo a passo está mais abaixo.

Um detalhe que pega muita loja WooCommerce: plugins de performance como WP Rocket, Autoptimize e LiteSpeed Cache podem atrasar o JavaScript até o primeiro clique ou rolagem. Na prática, o chat só aparece depois que o visitante interage. Coloque o domínio do script na lista de exclusão de atraso e de minificação.

Na Nola, a integração com o WooCommerce lê catálogo e estoque sem instalar plugin no WordPress. O que muda na conversa quando o assistente lê o catálogo do Woo está em chatbot para WooCommerce. Os detalhes estão na página da Nola AI para WooCommerce. Se a sua loja precisa de regra de negócio que nenhum plugin cobre, o caminho costuma ser um plugin WooCommerce personalizado.

Shopify

Na Shopify, chats entram de dois jeitos.

Pela app, com incorporação no tema. É o jeito recomendado. Depois de instalar a app, abra Loja virtual, Temas, Personalizar e ative o bloco da app na área de incorporações. Salve. Nada de código no tema, e se a app for desinstalada o bloco sai junto. É assim que a Nola AI para Shopify funciona.

Pelo código do tema. Se a ferramenta só oferece script, vá em Temas, Editar código, abra theme.liquid e cole a linha antes de </body>. Duplique o tema antes de editar. E lembre que esse código não acompanha a loja quando você troca de tema.

Para ver o que um chatbot precisa fazer dentro de uma loja Shopify além de aparecer na tela, leia o guia de chatbot para Shopify.

Wix

No painel do Wix, abra Configurações e procure Código personalizado, na área de configurações avançadas. Clique em adicionar, cole o script, escolha Body, fim como posição e aplique em todas as páginas. O recurso depende de plano pago com domínio conectado. Se a opção não aparece, é quase sempre esse o motivo.

Webflow e Squarespace

Webflow: em Site settings, aba Custom code, cole o script no campo Footer code e publique o site. Enquanto você não publica, o chat não aparece no domínio. Código personalizado no Webflow depende de plano pago.

Squarespace: use a Injeção de código (Code Injection) e cole no campo Footer. A opção fica disponível nos planos que liberam injeção de código.

VTEX

Na VTEX, o caminho mais simples costuma ser o Google Tag Manager, que a plataforma integra por app. Assim o script entra sem mexer em componente do Store Framework. A página da Nola AI para VTEX explica o que o conector nativo lê, e o artigo de chatbot para VTEX cobre frete e status de pedido dentro da conversa.

Google Tag Manager

O GTM serve para qualquer plataforma que já tenha o contêiner instalado:

1. Em Tags, clique em Nova.
2. Em Configuração da tag, escolha HTML personalizado e cole o script.
3. Em Acionamento, escolha All Pages (todas as páginas).
4. Salve e use Visualizar para conferir se a tag dispara.
5. Clique em Enviar e publique a versão.

Esquecer o passo 5 é o erro mais comum. A tag salva e não publicada só existe dentro do GTM. Outro ponto: se o site usa banner de consentimento integrado ao GTM, veja em qual categoria a tag ficou, para ela não ser bloqueada sem você perceber.

React e Next.js

React com Vite ou Create React App: cole o script no index.html, antes de </body>.

Next.js com App Router: use o componente Script no layout raiz. Assim o chat carrega uma vez e não recarrega a cada troca de rota.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR">
      <body>
        {children}
        <Script
          src="https://chat.gusta.click/widget.js"
          data-bot-id="SEU_BOT_ID"
          data-token="SEU_TOKEN"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

A estratégia lazyOnload deixa o chat para depois que a página terminou de carregar. Para um assistente que aparece no canto da tela, é o melhor equilíbrio entre velocidade e disponibilidade.

Depois de instalar: o que testar

Colar o código leva dois minutos. Testar direito leva uns quinze, e é isso que evita descobrir um problema pela reclamação de um cliente.

1. Abra o site numa janela anônima. Cache e login de administrador escondem erro.
2. Teste no celular de verdade. O botão do chat não pode cobrir o botão do WhatsApp, o banner de cookies ou a barra de compra fixa.
3. Faça três perguntas que clientes fazem: uma de preço, uma de política (troca, por exemplo) e uma que o bot não deveria saber responder. A terceira mostra se ele admite que não sabe ou se inventa.
4. Confira se a conversa apareceu no painel da ferramenta, com o histórico completo.
5. Rode o PageSpeed Insights antes e depois. Script com async não deveria piorar o carregamento. Se piorou, algo está sendo carregado de forma bloqueante.

Quando o chat não aparece

Não aparece em lugar nenhum. Abra o console do navegador (F12). Se aparecer um erro dizendo que o script foi bloqueado, o site provavelmente tem uma política de segurança de conteúdo (CSP). Libere o domínio do script em script-src e o domínio da API em connect-src. No caso da Nola, a mensagem data-bot-id/data-token ausentes no <script> indica que algum editor removeu os atributos do código. Cole de novo, sem passar por editor de texto rico.

Aparece duplicado. O script está em dois lugares. Procure no tema, no GTM e em plugins de cabeçalho e rodapé.

Aparece só depois de rolar a página. Plugin de performance atrasando o JavaScript. Veja a dica na seção de WordPress.

Aparece, mas não sabe preço nem estoque. O problema não é a instalação. O catálogo não foi conectado ou a primeira sincronização ainda não terminou.

Instalar é rápido. Treinar é o que faz diferença

Um chatbot instalado e mal treinado responde "não entendi" com muita educação. Depois do script, reserve tempo para cadastrar as políticas da loja, as perguntas que o time de atendimento mais recebe e o tom de voz da marca. Se você ainda está decidindo o tipo de ferramenta, vale ler a comparação entre chatbot com IA e agente de IA e o guia de quanto custa um chatbot com IA.

Perguntas frequentes

CTA

Se a sua loja roda em VTEX, Shopify, WooCommerce ou Magento, dá para testar a Nola AI por 14 dias sem cartão e seguir este passo a passo com o seu próprio catálogo. Se o site tem uma integração fora do padrão, fale com a GUSTA.