Page Comparison

...

Para adicionar o script do canal WebChat no site, clique na aba Tags e depois no botão “Nova”. Escolha o tipo de tag para HTML personalizado, em HTML insira o script fornecido para o Canal WebChat no Conecta e como Acionamento deve ser selecionado o Initialization - All Pages. Depois, clique em Salvar.

...

2. Abrir chat após navegação do usuário

Esse recurso permite a abertura do chatbot no site após determinado tempo de navegação do usuário no site. Para realizar a configuração, acesse primeiramente a aba Variáveis e clique no botão “Nova”, selecione o ícone de lápis superior e escolha Variável de camada de dados.

...

Após definição da variável, é necessário também criar um acionador por tempo. Selecione a aba referente, clique em “Novo” e na configuração do acionador escolha Timer. No campo intervalo, defina o tempo em milissegundos para a execução do componente. Em limite, determine quantas vezes o acionador deverá ser executado durante a navegação de um usuário e na etapa de condições, escolha conforme sua preferência.

...

Adicione uma nova tag e no campo HTML insira o código abaixo. Depois, na etapa de Acionadores, selecione o Timer criado.

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

...

Por fim, escolha a tag criada anteriormente com o script para ativação do WebChat e adicione o seguinte código, antes do fechamento do </script> e salve a modificação.

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

...

Se assim configurado para seu site, após 10s de navegação na página o usuário receberá o ChatBot para interação.

3. Enviar dados do site para o cadastro do contato

Aprenda a como configurar o uso e envio de dados para os campos adicionais do contato no Conecta Leucotron por meio do chat iniciado no canal WebChat.

Inicialmente, é necessário alterar o script de ativação do Webchat na aba de tags e inserir uma nova linha no código contendo o nome do campo adicional - campo deve ser criado antes. Exemplo:

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

...

Dessa forma ao enviar ou visualizar as modificações e o chat for iniciado, a informação da página será exibida no campo adicional do contato.

...

4. Encaminhar dados do fluxo para o Tag Manager por meio do Evento WebChat

Este recurso oferece a funcionalidade de enviar eventos configurados no fluxo, bem como eventos automáticos, diretamente para o Google Tag Manager.

Para adicionar o componente "Evento Webchat" ao seu fluxo, siga os seguintes passos:

1. Na aba fluxo de atendimento, navegue para a seção de edição.

2. Em seguida, selecione o componente "Evento Webchat" disponível na lista de componentes.

3. Insira as informações relevantes que você deseja que sejam enviadas para o Tag Manager na caixa de texto do componente.

4. Posicione o evento no local desejado dentro do fluxo para que ele seja acionado conforme sua preferência.

Após essa configuração inicial, no Google Tag Manager modifique o script de ativação para capturar os eventos enviados pelo componente Evento Webchat:

<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.sz.chat/webchat/v2/webchat.js'; 
        a.parentNode.insertBefore(t, a);
        s.webchat('cid', '615daaae7a90be00117c5930');
        s.webchat('host', h);
    })(window, document, 'script', 'https://domain.sz.chat');
    
    window.dataLayer = window.dataLayer || [];
    
    window.addEventListener("message", function(event) {
        if(event.origin !== 'https://domain.sz.chat') 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>

Detalhes do script

1. Obrigatório: declaração da lista de objetos, contendo variáveis e eventos do Tag Manager.

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

2. Capturar os eventos do fluxo e enviá-los para o Google Tag Manager.
   

   Code Block
   window.addEventListener("message", function(event) { if(event.origin !== 'https://hub.conecta.com.vc') return;//origem if(event.data.action === 'chat-event'){//ação do componente window.dataLayer.push({//envio dos eventos event: event.data.action, message: event.data.message }); } }, false);

Eventos automáticos

No exemplo abaixo, o script está definido para capturar quando o chat for aberto:

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

Eventos

Após o carregamento do script, alguns eventos ficarão disponíveis e para capturar os eventos é necessário acessar o método de instância:

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

Exemplo:

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

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

Parâmetros disponíveis antes do carregamento do chat via script

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