LogoLogo
Zenvia Docs
  • Zenvia NLU
  • Boas Práticas
    • Eventos
      • Dicas para criar eventos
      • Eventos Personalizados
        • menu_principal
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
        • Autosservico
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de eventos
        • sucess_no_friccion
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
        • horario_atendimento
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de eventos
        • transbordo
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de eventos
        • pesquisa_satisfacao
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de eventos
        • conseguiu_ajudar
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de eventos
        • nivel_confianca
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de eventos
        • chamada_api
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
        • falha_api
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
        • primeiro_acesso
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
        • encerramento
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
        • estouro_tentativas_else
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
        • intents
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
        • rechamada
          • Dashboard
          • Fluxograma
          • Builder
          • Lista de Eventos
    • Gestão de NLU
      • Dicas de gestão de NLU
    • Personalizar widget
  • Monitor
    • Dashboard
      • Métricas e indicadores
      • Gráficos
    • Atendimentos
    • Eventos
    • Volumetria
    • Issues
    • Monitoramento de APIs
    • Métricas de avaliação
  • Build
    • Assistentes
      • Edição do Assistente
      • Builder
        • Configurações do nó
        • Componentes
          • Output
            • Texto
            • Texto randômico
            • Texto sequencial
            • Base de conhecimento
            • LivePerson - Conteúdo Estruturado
            • Arquivo
          • Input
            • Pergunta aberta
            • Autocomplete
            • Data
            • Feedback NPS
            • Feedback Custom
            • Lista inline
            • Lista modal
            • Quick Replies
            • Upload de arquivo
            • Upload de arquivo LP
            • Carrossel de Opções
            • Desambiguação
          • Fluxo de Inatividade
          • Variáveis
          • Ações
            • HTTP Request
            • Satisfaction
            • Validar celular
            • Validar CEP
            • Validar CPF
            • Validar CPF/CNPJ
            • Validar CNPJ
            • Validar nome completo
            • Validar e-mail
            • Procurar atendimento
            • Transferência entre skills Liveperson
            • Setar contexto LivePerson
            • Encerrar Atendimento LivePerson
            • Encerrar chat
            • Socket Event
            • Facebook Profile
            • Facebook Transbordo
            • Workplace Profile
            • Iniciar LiveChat
            • Functions
            • Setar NLU
            • Transferência entre assistentes
            • Contact Return
            • Intent Feedback
          • Eventos
    • Functions
    • Atributos
  • CONNECT
    • APIs
      • Agent connector API
      • Outbound
        • Outbound WhatsApp
        • Outbound Zenvia
        • Outbound Wavy
        • Outbound LivePerson
        • Outbound Infobip
        • Outbound RCS
      • Eventos
      • Atendimentos
      • LGPD
    • Canais
      • Capabilities
      • Instagram
      • Google Business Messages
      • Bot API
      • Facebook
        • Integração Messenger via Zenvia NLU
        • Integração Messenger via Liveperson
      • Google RCS
      • Microsoft Teams
      • Whatsapp
        • Zenvia
        • Blip
        • Wavy
        • Infobip
        • Liveperson
      • Widget
      • Workplace
    • Telegram
    • Contingência
    • LiveChat
      • Transbordo ALTU Connector API
        • Transbordo Tech4Humans
      • Transbordo LivePerson
      • Transbordo Zendesk Ticket
      • Transbordo Zendesk Chat
      • Transbordo Salesforce
  • TRAIN
    • Primeiros passos
    • Visão Geral
    • Configuração do NLU
    • Avaliação de Mensagens
    • Análise e ajustes
  • Mais
    • Release
      • Controle de Versão
      • 27/10/2021
      • 06/10/2021
      • 22/09/2021
      • 09/09/2021
      • 11/08/2021
      • 28/07/2021
      • 14/07/2021
      • 30/06/2021
      • 16/06/2021
      • 01/06/2021
      • 18/05/2021
      • 04/05/2021
      • 20/04/2021
      • 06/04/2021
      • 23/03/2021
      • 09/03/2021
      • 23/02/2021
      • 09/02/2021
      • 26/01/2021
      • 12/01/2021
      • 22/12/2020
      • 08/12/2020
      • 24/11/2020
      • 10/11/2020
      • 27/10/2020
      • 13/10/2020
      • 29/09/2020
      • 15/09/2020
      • 01/09/2020
      • 18/08/2020
      • 03/08/2020
      • 21/07/2020
      • 08/07/2020
      • 30/06/2020
      • 04/06/2020
      • 22/05/2020
      • 14/05/2020
      • 29/04/2020
      • 01/04/2020
      • 24/03/2020
      • 16/03/2020
    • Glossário
Powered by GitBook
On this page
  • Visão Geral
  • Compatibilidade
  • Adicionar Widget
  • Configurações
  • Aparência e Comportamento
  • Tag
  • Publicar Widget
  • Publicar Tag
  • Instalação
  • Utilização manual da TAG
  • Editar Widget
  • Editar Tag
  • Coletar IP e user agent em acessos
  • Baixar conversa
  • Como usar?
  • PDF
  • Cabeçalho
  • Corpo

Was this helpful?

  1. CONNECT
  2. Canais

Widget

Nesta página você irá encontrar todas as informações necessárias para conectar seu assistente do Zenvia NLU ao Widget

Visão Geral

O widget é um dos meios de comunicação que o Zenvia NLU disponibiliza. Ao optar por esse canal, o assistente fica disponível diretamente no site do cliente.

Uma de suas vantagens é a possibilidade de configurar a interação do usuário utilizando diversos componentes: botões de resposta rápida, máscara para preenchimento de campos, autocomplete entre outros.

Compatibilidade

É possível receber mensagens como:

  • Texto

  • Arquivos

É possível enviar mensagens como:

  • Pergunta aberta

  • Autocomplete

  • Data

  • Encerrar Chat

  • Feedback NPS

  • Feedback Emoji

  • Lista de opções: Modal e Inline

  • Quick Replies

  • Upload de arquivo

  • Carrossel de Opções

Adicionar Widget

Para começar, vamos criar a integração do seu assistente com o canal. Acesse Connect > Canais > Widget.

Na página que se abrirá, você encontra todos os Widgets publicados ou em configuração da sua conta.

Clique em “+ Adicionar widget” no canto superior direito da página.

Configurações

Nessa aba adicione as informações solicitadas:

  • Título da Página: nome que será informado na aba do navegador

  • Nome do Widget: nome que deseja dar ao canal Squad: selecione o nome da squad se estiver disponível na lista, caso contrário mantenha como “geral”

  • Digitando: escolha de que modo a mensagem deve aparecer para o usuário

    • Dinâmica: apresenta uma imagem de “digitando” durante o tempo definido até o envio da mensagem

    • Estático: envia a mensagem após o tempo de espera definido, sem indicação de carregamento

Opcionais:

  • Inatividade: um novo atendimento será iniciado automaticamente após o usuário ficar inativo pelo tempo configurado (mínimo de 10 minutos e máximo de 1440 minutos).

  • Esperar por dados: configuração específica para assistentes que são exibidos via Tag. Com essa opção selecionada, a conversa só se inicia após o envio de dados através do método altubots.sendDataToContext({ })

  • Continuidade da conversa: ao final de uma interação, as mensagens serão salvas no histórico do navegador e o usuário poderá dar continuidade a conversa futuramente

  • Ativar avisos sonoros em Live Chat: ao selecionar essa funcionalidade o cliente será notificado, por meio de um aviso sonoro, quando um agente enviar uma mensagem durante o atendimento. O aviso pode ser customizado ao adicionar o endereço web onde está hospedado o arquivo de áudio

Para garantir o funcionamento da notificação sonora, é recomendado que o áudio seja verificado no campo “Validar”. Em seguida, se estiver tudo certo, o som será processado e executado, certificando sua performance no Live Chat

Validação de avisos sonoros

Para uma validação bem sucedida, o link informado deve conter um áudio com, no máximo, 5 segundos de duração. Exemplo de URL (nosso áudio padrão):

Durante a conversa com o agente, o cliente pode desativar ou ativar essa notificação. Por padrão, o Live Chat deixa o áudio ativado. O botão para realizar essa ação estará disponível no topo do chat, juntamente com os botões para "Sair do chat" e "Sair do live chat".

Confira nosso vídeo com a demonstração da funcionalidade:

Aparência e Comportamento

É necessário escolher um template para conseguir salvar o Widget.

Tag

Na aba Tag você configura a exibição do Widget no seu site. Essa funcionalidade opera por meio de uma função javascript, que deve ser adicionada no HTML do site, antes de fechar o bloco <head>

Há duas configurações básicas a serem feitas:

Botão Flutuante

Para que o site exiba um botão, que ao ser clicado mostre o chat, você deve deixar a opção "Exibir Botão flutuante" ativa.

Selecione a opção “Padrão” para utilizar o botão Padrão da ZENVIA NLU, onde a única customização possível é a cor.

Para alterar a cor, você pode inserir o hexadecimal da cor, como #11ff1a para verde, ou utilizar o picker, uma caixa de seleção manual de cores.

Caso você queira usar um botão personalizado, selecione a opção “Customizado”.

Preencha o campo URL com o link do arquivo que será usado como botão, podendo ser uma imagem ou um HTML. Esse arquivo deve estar hospedado em um site com acesso público.

Também é necessário incluir a largura e altura do botão, em pixels.

Dimensões do Widget

Logo abaixo do campo de botão flutuante, você deve inserir as dimensões que o Widget terá quando aparecer no seu site ou aplicativo.

As dimensões padrões são:

  • Largura: 450px

  • Altura: 600px

  • Espaçamento margem inferior: 10px

  • Espaçamento margem direita: 10px

Mas você pode alterar essas dimensões livremente, utilizando a formatação em pixels ou em porcentagem ao clicar no botão do campo dimensão.

Após fazer todas as configurações anteriores, clique em “Criar widget”

Publicar Widget

Após a criação do Widget você verá uma aba chamada “Utilização”.

Nela você acompanha os status das alterações do Widget e também da Tag, com informações sobre a última publicação.

Nessa aba você também copia as URL's de homologação e publicação.

Para que seja possível utilizar o canal em produção, é necessário clicar em “Publicar Widget”.

Publicar Tag

Na aba “Utilização”, logo abaixo das informações sobre a publicação do Widget, você verá as informações da Tag.

Clique em “Publicar Tag” para acessar o script necessário para a configuração do seu assistente no seu site.

Instalação

Para o chat aparecer no seu site, insira o script que você encontra na página "Utilização"

Utilização manual da TAG

Uma vez que a TAG está inserida no site, a exibição do chat ou botão pode ser controlada a partir dos seguintes eventos javascript:

  • altubots.openChat( ) - Usado para exibir o chat já expandido, independente da opção "Exibir botão flutuante" estar desativada ou ativa;

  • altubots.closeChat() - Fechar o chat que estava em andamento, independente da opção "Exibir botão flutuante" estar desativada ou ativa;

  • altubots.sendDataToContext({ }) - Quando a opção "Esperar por dados" estiver ativa no widget, esse evento serve para enviar os dados para o contexto da conversa na abertura do chat.

Exemplo:

<script type="text/javascript">
    altubots.sendDataToContext({
        "nome": "José da Silva",
        "email": "jose@email.com"
    });
</script>
  • altubots.showButton() - Utilizado para exibir o botão flutuante manualmente na página, quando a opção "Exibir botão flutuante" estiver desativada;

  • altubots.hideButton() - Utilizado para ocultar o botão flutuante manualmente na página onde a TAG está instalada.

Caso um dos eventos acima seja chamado antes do script da TAG ser carregado na página, a referida ação não será executada.

Editar Widget

Para editar, acesse Connect > Canais > Widget e escolha na lista o Widget para edição.

Após qualquer alteração feita nas abas de Configuração e Aparência e Comportamento, como uma mudança no nome do Widget ou no CSS, será necessário salvar, clicando em “Salvar alterações” no canto superior direito da página.

Editar Tag

Coletar IP e user agent em acessos

O IP do usuário e User Agent serão coletados quando o usuário acessar o Widget. As informações serão direcionadas para a variável url_params do context.

Com as informações do user_agent é possível identificar:

  • Aplicação

  • Sistema operacional

  • Fornecedor

  • Navegador de internet

Exemplo de como fica estruturado o IP e user agent no url_params:

{
    "url_params": {
        "ip": "127.0.0.1",
        "user_agent": {
            "os": {
                "name": "Linux",
                "version": "x86_64"
            },
            "ua": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36",
            "cpu": {
                "architecture": "amd64"
            },
            "device": {},
            "engine": {
                "name": "Blink",
                "version": "89.0.4389.90"
            },
            "browser": {
                "name": "Chrome",
                "major": "89",
                "version": "89.0.4389.90"
            }
        }
    }
}

Baixar conversa

Durante todo o atendimento, o usuário poderá realizar o download da conversa. Isso é realizado através da chamada de uma função: download_chat_history ().

Como usar?

<script type="text/javascript">
    $(document).ready(function() {
        if(socket)
        {
            socket.on('exportPDF', function(payload) {
                download_chat_history(payload.chat_name)
            });
        }
    });
</script>

Pode-se perguntar se o usuário deseja exportar a conversa, tal qual um protocolo. Se a resposta for positiva, em seguida, chamaria um Socket Event, como o que está abaixo:

[
    {
        "name": "socket_event",
        "parameters": {
            "event": "exportPDF",
            "payload": {
                "chat_name": "ALTU"
            }
        },
        "result_variable": "event_response"
    }
]

Exemplo de um atendimento com download de PDF:

PDF

Cabeçalho

O cabeçalho do PDF irá conter três informações:

  • O título: "Histórico do Atendimento".

  • O subtítulo: será opcional e é o único que pode ser passado por parâmetro na função. A imagem acima é resultante da chamada: download_chat_history ("ALTU"). Se não não for houver parâmetro passado, o cabeçalho será o seguinte:

  • A data da exportação

Corpo

O corpo do PDF é composto pelo conteúdo do atendimento, ou seja, a troca de mensagens. É compatível com pré-visualização de imagens. Nele, também exibimos o momento (data e hora) em que ocorreu a troca de mensagens de cada bloco. Links no atendimento, que possibilitam download do arquivo pré-visualizado, não estarão acessíveis dentro do PDF.

PreviousLivepersonNextWorkplace

Last updated 2 years ago

Was this helpful?

Assistente: selecione o

Essa é a área de personalização da aparência do assistente. Temos dois temas padrões, o “ALTU” e o "basic", mas o CSS pode ser editado livremente para atender ao guia de estilo da empresa, . Também é possível adicionar um logo e avatar de até 1MB nos formatos: png, jpeg, jpg, svg e gif.

Só será possível publicar a Tag após a

Orientações de instalação de Tag

Será necessário refazer o processo , para que as mudanças sejam efetivas na URL do assistente.

Ao editar as configurações de uma Tag, será necessário clicar em “Salvar alterações” no canto superior direito da página e também refazer o processo de .

O PDF pode ser gerado por meio de um , que chama a função. Você deve incluir na configuração do Widget, no bloco body, o seguinte código:

Exemplo de download de conversa
assistente
https://altu-assets.s3-sa-east-1.amazonaws.com/sounds/notification-livechat.mp3
clique aqui para algumas dicas
Socket Event
publicação do Widget
publicação do canal
publicação da tag
Adicionar novo widget
Página de Configurações do Widget
Escolha de template em Aparência e Comportamento
Demonstração das duas opções da aba Tag - Botão Flutuante e Dimensões do Widget
Ativar e desativar o botão flutuante
Demonstração da configuração de Botão Flutuante customizado
Demonstração da alteração das Dimensões do Widget
Criar Widget
Demonstração de edição e publicação de Tag
Vídeo demonstração de aviso sonoro em Live Chat