Page Comparison

Com essa integração, você pode ter controle total sobre o chat do seu website através do Google Tag Manager, um gerenciador de códigos. Você será capaz de abrir, fechar ou esconder o chatChatBOT, tudo isso por meio de regras bem definidas. Além disso, com o componente "Evento Webchat", você poderá utilizar o Conecta Leucotron como um gatilho para ações dentro do Tag Manager.

Neste artigo, você aprenderá como inserir o script de ativação no seu site, bem como configurar o chat para abrir automaticamente após 30 10 segundos de navegação. Além disso, será mostrado como preencher campos adicionais com informações relevantes vindas do seu site.

Essas são apenas algumas das inúmeras possibilidades oferecidas por essa integração.

Google Tag Manager

Acesse Tag Manager e faça login com uma Conta Google. Para os próximos passos, é necessário já possuir uma conta no ambiente, pois a aba de Tags é liberadapara que as abas de configuração sejam liberadas.

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

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

...

Esse recurso permite a abertura do chatbot 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 Nova, depois escolha a opção Variável de camada de dados.

...

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

...

...

3. Enviar dados do site para o cadastro do contato

...

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

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

...

Para adicionar o componente "Evento WebchatWebChat" 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 WebchatWebChat" 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. Exemplo: variável {{PROTOCOL}}

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 WebchatWebChat:

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

...

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

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

...

↩ Voltar para Manual de Configuração do Conecta

↩ Voltar para Tela Administrativa

↩ Voltar para Fluxo