Como criar um script para conectar o chat web ao Push

Paulo Bernardo Atualizado por Paulo Bernardo

Requisitos

  • Depois de criar um canal web seguindo esta documentação, é necessário ter o uuid do canal para integrar com o Pushinho v2

Script de exemplo

<html>
<head>
<script src="https://storage.googleapis.com/push-webchat/widget-latest.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="webchat"/>

<script>
WebChat.default.init({
selector: "#webchat",
initPayload: "pushinho",
channelUuid: 'b155493d-8066-404a-b107-41205dca9499',
host: 'https://new.push.al',
socketUrl: "https://socket.push.al",
title: "Title",
subtitle: "Subtitle",
inputTextFieldHint: 'Type a message...',
params: {
images: {
dims: {
width: 300,
height: 200
}
},
storage: "session",
}
})

WebChat.open()
</script>
</body>
</html>

Observações importantes

  • A <div id="webchat"/> é obrigatória, e esse id é utilizado pelo Pushinho no atributo selector. Tenha certeza que eles são o mesmo, caso contrário o Pushinho não irá funcionar.
  • O atributo initPayload é o texto que será enviado para o channelUuid do Push quando o Pushinho é inicializado. O texto em initPayload pode ser utilizado como uma trigger para iniciar um fluxo no Push, e com isso, enviar uma mensagem de boas vindas para o usuário.
  • Note que ao final do script o método WebChat.open() é chamado, ele é o responsável de expandir o chat.
  • O Pushinho utiliza Markdown para mostrar as mensagens, tenha certeza que a sintaxe Markdown está correta, caso contrário o texto será formatado incorretamente.

Parâmetros padrões

  • Alguns parâmetros, caso não sejam especificados, possuem um valor padrão definido pelo Pushinho, tendo como principais:
    • socketUrl: 'https://socket.push.al'
    • host: 'https://new.push.al'
    • tooltipDelay: 500
    • storage: 'local'
  • Mais parâmetros podem ser encontrados aqui.

Lidando com o histórico do chat

  • O Pushinho possui 2 estratégias para guardar o histórico do chat, são elas local e session . Por padrão o Pushinho utiliza o modo local.
    • local : O histórico local persiste depois que o browser é fechado, e pode ser apagado quando os cookies do navegador são deletados, ou quando localStorage.clear() é chamado.
    • session : O histórico de sessão persiste no recarregamento da página, mas é deletado quando o navegador, ou a aba, são fechados. O histórico da sessão também pode ser deletando quando sessionStorage.clear() é chamado.
  • Para utilizar o modosession, adicione esse atributo na inicialização:
    params: {
    storage: "session",
    },

Mostrando uma tooltip

  • Para mostrar ao usuário uma tooltip, basta adicionar o atributo tooltipMessage com a mensagem desejada.
    tooltipMessage: "Mensagem do tooltip",
  • Um delay pode ser aplicado para mostrar o tooltip, o atributo tooltipDelay é responsável por isso, e vem com valor padrão de 500ms.
    tooltipDelay: 30000, // Delay em milisegundos

Customizando o Pushinho

  • O Pushinho pode ser customizado de 2 maneiras:
  1. Utilizando um arquivo .css para aplicar quisquer estilos desejados baseado nas classes que o Pushinho possui.
  2. Utilizando os atributos de customização na inicialização do app. A lista completa dos atributos pode ser encontrada aqui.
    1. Para utilizar os atributos de customização, basta adicionar o parâmetro customizeWidget no script de inicialização, e dentro dele, utilizar os atributos de customização.
      customizeWidget: {
      headerBackgroundColor: "#FFC0CB",
      launcherColor: "#FFC0CB",
      userMessageBubbleColor: "#FFC0CB",
      }

Imagem de perfil para o Pushinho

  • Três atributos são responsáveis pela imagem de perfil.
    • profileAvatar : Responsável pela imagem que irá aparecer no header ao lado do Título, e dentro do chat junto as mensagens enviadas pelo bot.
    • openLauncherImage : Responsável pela imagem que será mostrada no launcher do Pushinho, enquanto o chat estiver fechado.
    • closeImage : Responsável pela imagem que será mostrada no launcher do Pushinho, enquanto o chat estiver aberto.

Métodos disponíveis

  • Aguns métodos estão disponíveis e podem ser utilizados para interagir com o Pushinho, alguns deles são:
    • WebChat.toggle() : Utilizado tanto para abrir quanto para fechar o chat.
    • WebChat.open() : Utilizado para abrir o chat.
    • WebChat.close() : Utilizado para fechar o chat.
  • A lista com todos os métodos pode ser encontrada aqui.

Utilizando Sugestões do BotHub para o input

  • É possível utilizar a API do bothub para retornar sugestões baseado no estado atual do texto do visitante. A requisição para novas sugestões é feita após 3 segundos sem digitar.
  • Para utilizar as sugestões do bothub é necessário inserir o novo parâmetro suggestionsConfig . Este parâmetro é no seguinte formato:
    suggestionsConfig = { url:'https://api.bothub.it/v2/repository/examples/search_repositories_examples/',
    datasets: [
    "xxxxxxxx-yyyy-zzzz-wwww-yyyyyyyyyyyy",
    "yyyyyyyy-xxxx-wwww-zzzz-wwwwwwwwwwww",
    "aaaaaaaa-cccc-dddd-bbbb-aaaaaaaaaaaa",
    ],
    language: "en",
    excludeIntents: ['bias'],
    },
    • url: A url para a API do BotHub
    • datasets: Lista contendo os uuid's dos datasets do BotHub
    • language: Idioma no qual o BotHub deve processar e retornar as sugestões
    • excludeIntents: Intenções que devem ser excluídas das sugestões retornadas pelo bothub

Como a gente se saiu?

Como criar um canal web

Como criar um canal no Viber

Contato