Instalar o webchat SiteUp via Google Tag Manager

Se o seu site já é gerenciado pelo Google Tag Manager (GTM), publicar o widget de webchat por lá é mais limpo do que editar o HTML diretamente: você controla onde o chat aparece, quando dispara e quais dados de usuário são passados, tudo por uma interface visual e versionada.

Este guia assume que você já tem o GTM instalado no site e o snippet do webchat em mãos (disponível em Configurações → Caixas de entrada → [seu webchat] → Configuração). Para a instalação direta no HTML, veja Conectar webchat ao site.

Criando a tag no GTM

No painel do Google Tag Manager:

1. Vá em Tags → Nova
2. Clique em Configuração da tag e escolha HTML personalizado
3. Cole o snippet fornecido pelo SiteUp na caixa de HTML
4. Marque a opção "Suportar document.write" apenas se necessário (geralmente não é)

O snippet típico tem este formato:

<script>
  (function(d,t) {
    var BASE_URL = "https://app.siteup.com.br";
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = BASE_URL + "/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g, s);
    g.onload = function() {
      window.chatwootSDK.run({
        websiteToken: "SEU_TOKEN_AQUI",
        baseUrl: BASE_URL
      });
    };
  })(document, "script");
</script>

Substitua SEU_TOKEN_AQUI pelo token real do seu canal de webchat.

Definindo o gatilho de disparo

Em Acionamento, escolha o disparo desejado:

Para a maioria dos sites institucionais, o All Pages é a escolha correta. Em e-commerces, é comum excluir páginas de checkout para não distrair o usuário no momento da compra.

Identificando usuários logados via dataLayer

Se o seu site tem área logada e você quer que o atendente já veja quem está do outro lado, passe os dados via dataLayer antes da tag disparar. No backend do site, injete:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'user_loaded',
    'user_id': '12345',
    'user_email': 'fulano@empresa.com',
    'user_name': 'Fulano de Tal'
  });
</script>

No GTM, crie variáveis de Camada de dados apontando para user_id, user_email e user_name. Em seguida, ajuste o snippet da tag para chamar setUser após o SDK carregar:

g.onload = function() {
  window.chatwootSDK.run({
    websiteToken: "SEU_TOKEN_AQUI",
    baseUrl: BASE_URL
  });
  window.addEventListener("chatwoot:ready", function() {
    window.$chatwoot.setUser({{user_id}}, {
      email: {{user_email}},
      name: {{user_name}}
    });
  });
};

As chaves {{...}} são substituídas pelo GTM no momento do disparo. Os identificadores chatwootSDK, chatwoot:ready e $chatwoot são nomes internos da API JavaScript do widget (carregada por sdk.js) e devem ser mantidos exatamente como estão — eles funcionam como handles globais do SDK.

Publicando e validando

Antes de publicar:

1. Use o Modo de visualização do GTM (Preview)
2. Abra seu site na nova aba que o Tag Assistant abrir
3. Confirme que a tag aparece em Tags Fired após o carregamento
4. Verifique se o widget aparece no canto inferior do site
5. Inicie uma conversa de teste e confira no painel SiteUp se o usuário veio identificado

Se tudo estiver correto, clique em Submit no GTM e publique a versão.

Problemas comuns

• Widget não aparece: geralmente o token está errado ou a tag está bloqueada por adblocker. Teste em janela anônima sem extensões.
• Usuário aparece como anônimo: o setUser está disparando antes do chatwoot:ready. O addEventListener mostrado acima resolve.
• Tag dispara duas vezes: confira se você não tem outro gatilho duplicado ou se o snippet não está também no HTML do site.