Com essa integração é possível abrir, fechar ou esconder o chat, por meio de regras definidas dentro do Google Tag Manager. E com o componente "Evento Webchat" você pode realizar o processo inverso, utilizando o Wide Chat como gatilho para ações dentro do Tag Manager.

Nesse artigo você aprenderá a inserir o script de ativação no site, a abrir o chat automaticamente após 30 segundos de navegação em seu website e como preencher campos adicionais com informações vindas do site. 

Essas são apenas algumas das diversas possibilidades trazidas por esta integração.

1 - Adicionar o script de ativação no site

• Acessar a aba de Tags;
• Clicar em novo;

• Na configuração de Tag, escolha a opção HTML Personalizado; 
  

• No campo HTML cole o script de ativação gerado pelo Wide Chat;
• No acionamento, escolha a opção que mais lhe atenda (Nesse exemplo usaremos a opção: Initialization - All Pages);

• Atribua um nome para a Tag e clique em Salvar.

2 - Abrir o chat automaticamente após certo tempo do usuário navegando pelo website.

Criar uma variável para controlar a abertura do chat

• Acessar a aba de Variáveis;
• No card "Variáveis" definidas pelo usuário, clique em Novo;

• Na configuração da variável, escolha a opção Variável da camada de dados;
• No campo ‘Nome da variável da camada de dados’, escolha o nome da variável que será usada pelo Webchat. (Nesse exemplo usaremos o nome webchatHasOpen);
• Defina o nome (Nesse exemplo usaremos o nome Chat Foi Aberto);
• Clique em salvar.

Criar um acionador por tempo

• Acessar a aba Acionadores;
• Clique em novo;
• Na configuração do acionador, escolha a opção Timer;
• No campo intervalo, defina o tempo para que o acionador seja executado. (Valor em milissegundos);
• No campo limite, escolha quantas vezes o acionador será executado;
• Na etapa de condições, escolha a que mais lhe atenda (Nesse exemplo usaremos o filtro de Page Path, ou seja, o acionador será executado em todas a páginas do site);
• Defina um nome e clique em salvar.

Criar uma tag para abrir o chat

• Acessar a aba de Tags;
• Clicar em novo;
• Na configuração de Tag, escolha a opção HTML Personalizado;
• No campo HTML adicione o seguinte código:

<script>
  if ({{Chat Foi Aberto}} !== 'true') {
    window.webchat.chatOpen(); 
  }
</script>

Na etapa de acionadores, escolha o acionador de tempo criado anteriormente;

Escolha o nome da Tag e clique em salvar.

Modificar script de ativação para preencher a variável

• Edite a Tag criada com o script de ativação do Webchat;
• Adicione o seguinte código, antes do fechamento do script </script>:
  

window.webchat('afterOpen', function() {
    window.dataLayer.push({ webchatHasOpen: 'true' });
});

s.webchat('szf_pagina_atual', {{Page Path}});

<script type="text/javascript">
    (function(s, z, c, h, a, t) {
        s.webchat = s.webchat || function() {
            (s.webchat.q = s.webchat.q || []).push(arguments);
        };
        t = z.createElement(c),
        a = z.getElementsByTagName(c)[0]; t.async = 1;
        t.src = 'https://domain.widechat.com.br/webchat/v2/webchat.js'; 
        a.parentNode.insertBefore(t, a);
        s.webchat('cid', '615daaae7a90be00117c5930');
        s.webchat('host', h);
    })(window, document, 'script', 'https://domain.widechat.com.br');
    
    window.dataLayer = window.dataLayer || [];
    
    window.addEventListener("message", function(event) {
        if(event.origin !== 'https://domain.widechat.com.br') return;
        
        if(event.data.action === 'chat-event'){
            window.dataLayer.push({
                event: event.data.action,
                message: event.data.message
            });
        }
    }, false);
    
    window.webchat('afterOpen', function(event) {
        window.dataLayer.push({ chat_status: 'aberto' });
    });
</script>

window.dataLayer = window.dataLayer || [];

window.addEventListener("message", function(event) {
    if(event.origin !== 'https://domain.widechat.com.br') return;

    if(event.data.action === 'chat-event'){
        window.dataLayer.push({
            event: event.data.action,
            message: event.data.message
        });
    }
}, false);

window.webchat('afterOpen', function(event) {
    window.dataLayer.push({ chat_status: 'aberto' });
});

window.webchat('nome-do-evento')

<script>
    window.webchat('onReady', function(event) {
      console.log('O chat está pronto');
    })

    window.webchat('afterClose', function(event) {
      console.log('O chat fechou');
    })
</script>

s.webchat('host', h);
s.webchat('szf_custom_var', 'custom value');