...
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 para que as abas de configuração sejam liberadas.
...
Code Block |
---|
window.webchat('afterOpen', function() { window.dataLayer.push({ webchatHasOpen: 'true' }); }); |
...
Tip |
---|
Se assim configurado para seu site, após 10s de navegação na página o usuário receberá o Chatbot para interação. |
Enviar dados do site para o cadastro do contato
...
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 na plataforma. Exemplo:
Code Block |
---|
s.webchat('szf_pagina_atual', {{Page Path}}); |
...
Na aba fluxo de atendimento, navegue para a seção de edição.
Em seguida, selecione o componente "Evento WebChat" disponível na lista de componentes.
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}}
Posicione o evento no local desejado dentro do fluxo para que ele seja acionado conforme sua preferência.
...
Code Block | ||
---|---|---|
| ||
<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://hub.conecta.com.vc/webchat/v2/webchat.js'; a.parentNode.insertBefore(t, a); s.webchat('cid', '615daaae7a90be00117c5930'); s.webchat('host', h); })(window, document, 'script', 'https://hub.conecta.com.vc'); window.dataLayer = window.dataLayer || []; window.addEventListener("message", function(event) { if(event.origin !== 'https://hub.conecta.com.vc') 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
Obrigatório: declaração da lista de objetos, contendo variáveis e eventos do Tag Manager.
Code Block window.dataLayer = window.dataLayer || [];
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; if(event.data.action === 'chat-event'){ 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:
Code Block |
---|
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:
...
Nome do evento | Acionador |
onReady | Quando o chat é carregado |
beforeOpen | Antes de abrir o chat |
onOpen | Ao abrir o chat |
afterOpen | Após abrir o chat |
beforeClose | Antes de fechar o chat |
onClose | Ao fechar o chat |
afterClose | Após fechar o chat |
Parâmetros disponíveis antes do carregamento do chat via script
Code Block |
---|
s.webchat('host', h); s.webchat('szf_custom_var', 'custom value'); |
Option | Type | Default | Description |
debug | Boolean | false | Exibe informações de debug no console. |
locale | String | pt-BR | Linguagem de exibição. |
cid | String | null | ID do canal. Obrigatório por script ou por URL. |
button_label | String | null | Texto que vai aparecer no balão do lado do botão do chat e que tem prioridade em relação a configuração do texto no canal (Disponível apenas no modo janela). |
fid | String | null | ID do fluxo que o chat será iniciado, se vazio inicia no fluxo padrão. |
z-index | Integer | 2147483640 | Altera a ordem de exibição do elemento na página. |
szf_name | String | null | Definir nome do usuário do chat. |
szf_email | String | null | Definir e-mail do usuário do chat. |
szf_{CAMPO} | String | null | É possível definir qualquer campo adicional usando o prefixo |
...
↩ Voltar para Manual de Configuração do Conecta
↩ Voltar para Tela Administrativa
↩ Voltar para Fluxo