Ir para o conteúdo

Instalar o snippet

Como colar o snippet do Data Lead em HTML puro, Google Tag Manager, WordPress e outras plataformas, ajustar a CSP e conferir se a instalação funcionou.

Atualizado em

Tela: Instalação · Endereço: /instalacao · Menu: Conta → Instalação

Cole o snippet no seu site e o agente começa a atender. Cada site tem uma chave própria — o código muda de site para site, não de plataforma.

A tela mostra um cartão por site cadastrado, com o estado da instalação no topo e, abaixo, as abas por plataforma: HTML, Google Tag Manager, WordPress, Shopify e Webflow, Wix e Elementor.

Cartão do site com o estado da instalação e as abas por plataforma

O código é sempre o mesmo

O snippet não muda de plataforma para plataforma — o que muda é onde colar. Ele tem esta forma (a chave, em destaque, é a do seu site):

<script>
(function(w,d,k,s){w.DataStone=w.DataStone||function(){(w.DataStone.q=w.DataStone.q||[]).push(arguments)};
w.DataStone.k=k;var e=d.createElement('script');e.async=true;e.src=s;
(d.head||d.body).appendChild(e)})(window,document,'SUA_CHAVE_DO_SITE','https://cdn.datalead.datastone.com.br/v1/ds.js');
</script>

Não copie o exemplo acima: use o botão Copiar snippet da aba, que já traz a chave correta do seu site.

O script é assíncrono e só entra em ação depois que a página termina de carregar — e ainda espera um momento ocioso ou o primeiro gesto do visitante (rolar, mover o mouse, tocar na tela). Ele nunca disputa banda com o seu conteúdo, mas numa aba parada o balão pode levar alguns segundos para aparecer.

HTML puro

  1. Cole o código antes de </body> em todas as páginas do site.
  2. Publique e recarregue uma página para a verificação abaixo mudar para "instalado".

Google Tag Manager

  1. No GTM, crie uma tag do tipo HTML personalizado e cole o código.
  2. Acionador: All Pages (Todas as páginas).
  3. Publique o contêiner e recarregue o site.

WordPress

  1. Aparência → Editor de temas → header.php (ou o campo "Scripts no cabeçalho" do seu tema/plugin).
  2. Cole o código antes de </head> e salve.
  3. O plugin oficial chega na Fase 2 — por enquanto o snippet resolve.

Shopify

  1. Loja virtual → Temas → Ações → Editar código → layout/theme.liquid.
  2. Cole o código antes de </body> e salve.
  3. O app embed oficial chega na Fase 2.

Webflow, Wix e Elementor

  • Webflow: Project Settings → Custom Code → Footer Code.
  • Wix: Configurações → Código personalizado → Adicionar código a todas as páginas.
  • Elementor: Templates → Theme Builder ou o campo de scripts do tema.

Content Security Policy (CSP)

Se o seu site publica uma Content Security Policy, o widget precisa aparecer nela — senão o navegador bloqueia o Data Lead em silêncio. Estas são as diretivas envolvidas:

Diretiva O que precisa liberar Para quê
script-src O endereço de CDN do snippet Carregar o loader, o coletor e o widget. Obrigatória.
connect-src O endereço da aplicação Conversar com a API do widget (boot, turnos e eventos). Obrigatória.
img-src O domínio de armazenamento da Data Stone Mostrar o avatar do agente, quando você envia um.
style-src A própria página ('unsafe-inline' em políticas estritas) O chat injeta um <style> no Shadow DOM e um segundo no <head>.
script-src, connect-src, frame-src https://challenges.cloudflare.com O desafio invisível anti-bot, quando habilitado na sua conta.

Os endereços de CDN e de aplicação mudam em contas com domínio próprio: o endereço que aparece no snippet em Instalação é a fonte da verdade; a API fica no mesmo domínio, com cdn. trocado por app..

Como o snippet é um <script> embutido, uma CSP com script-src restrito também exige um nonce na tag do snippet (ou a instalação via GTM, que já resolve isso do seu lado).

A política de exemplo completa, linha a linha, está em CSP recomendada.

Conferir se funcionou

O cartão no topo de cada site mostra o estado da instalação:

Selo Detalhe O que fazer
Aguardando o primeiro acesso "Cole o snippet no site e recarregue uma página para começar a verificação." Publique o site e abra qualquer página.
Instalado e funcionando "Última vez visto há X minutos" + "Instalado em N páginas" (com a lista dos caminhos) Nada — está no ar.
Instalado, mas o agente só responde perguntas "Nenhum playbook ativo neste site: o agente conversa, e os visitantes não viram leads." + Ativar um playbook O snippet está certo; falta ativar um playbook em Agente. Veja abaixo.
Parece que parou de funcionar "Sem sinal desde … — confira se o snippet ainda está no site." Verifique se o código continua publicado e se a CSP não passou a bloqueá-lo.

Instalado não é o mesmo que capturando

O selo cruza duas coisas: o snippet ser visto e o site ter um playbook ativo. Sem playbook ativo o widget abre, o agente responde bem — e nada vira lead: não há slots para preencher, não há critério de qualificado e não há ações de saída (WhatsApp, agendamento, checkout). É uma falha silenciosa justamente porque a conversa parece boa.

Gerar o agente cria o playbook; ativar é um segundo passo, em Agente → Playbooks. Veja Playbooks e slots.

Verificar agora

O botão Verificar agora adianta a checagem, que também roda sozinha a cada 10 minutos pelo processamento em segundo plano do Data Lead. O clique dá retorno na hora, no texto ao lado do cartão:

O que aparece O que significa
"Verificando… a checagem começou e pode levar até 1 minuto." O pedido foi feito. A tela se atualiza sozinha, sem F5.
"Sinal novo recebido do seu site." Chegou um sinal mais recente que o anterior. O selo e a lista de páginas já refletem isso.
"Ainda sem sinal novo. A verificação também roda sozinha a cada 10 minutos — se o snippet acabou de entrar no site, volte daqui a pouco." Passou um minuto sem novidade. Publique a página, abra-a no navegador e espere o próximo ciclo.
"O processamento em segundo plano está indisponível agora. Tente de novo em alguns minutos." O pedido não foi feito. É uma indisponibilidade nossa, não um problema do seu site — o selo continua mostrando o que já se sabia, sem inventar um resultado.
"Não foi possível verificar agora. Tente novamente." A checagem foi pedida, mas não conseguimos reler o estado do site para lhe mostrar. O pedido segue de pé: recarregue a página em alguns instantes.

Enquanto está verificando, o botão fica travado — clicar de novo não adianta a fila.

Cartão de verificação no estado "Instalado e funcionando" com a lista de páginas

Se o widget não aparecer

Confira, nesta ordem:

  1. Você interagiu com a página? Role a tela e espere alguns segundos antes de concluir que não carregou: o widget espera um momento ocioso ou o primeiro gesto do visitante.
  2. O código está publicado? Abra o código-fonte da página e procure por ds.js.
  3. O domínio bate? O widget só conversa a partir das origens liberadas no cadastro do site (https://seudominio.com.br e https://www.seudominio.com.br). Um subdomínio precisa ser liberado pelo suporte.
  4. A CSP está liberando? O console do navegador mostra o bloqueio explicitamente.
  5. Há um playbook ativo? Sem playbook o agente não tem o que dizer. Confira em Agente → Playbooks.

Veja também

Precisa de ajuda?

Fale com o suporte da Data Stone pelo canal combinado no seu contrato. Para problemas de instalação, envie o endereço de uma página onde o widget deveria aparecer e o estado mostrado em Instalação.