Como conectar seu bot no WebSDK

Para estabelecer a conexão com o WebSDK, siga o passo-a-passo abaixo:

Passo 1

No Portal Hyperflow, selecione o chatbot que deseja ativar sua conta e na guia de “Canais” selecione “Conectar” no card do WebSDK, como mostra a imagem abaixo.

Passo 2

Após clicar em "Conectar", basta preencher as informações das abas.

Em "Apresentação", o usuário deve preencher campos como, título, descrição, tema, etc.

Título: título principal do chat.

Subtítulo: localizado abaixo do título em tamanho menor.

Theme: tema (claro ou escuro).

Main color: escolha na paleta de cores disponível a cor principal que irá compor o chat.

Cover: faça o upload de um arquivo que deseja utilizar para compor a capa.

Avatar: faça o upload de um arquivo que deseja utilizar como avatar (foto redonda).

Descrição: dê uma breve descrição ao seu chat. Ela aparecerá logo abaixo do subtítulo.

Rótulo para o botão iniciar: texto que será exibido ao lado do botão de iniciar conversa.

Descrição para o botão iniciar: breve descrição que será exibida um pouco acima do botão de iniciar conversa.

Passo 3

Em "Início", configure as informações do botão flutuante e do popup.

Botão flutuante: faça o upload de um arquivo que deseja utilizar como imagem do botão flutuante que dá acesso ao chat.

Cor de fundo do badge: na paleta de cores disponível, escolha uma cor de fundo para o badge do botão flutuante.

Cor de texto do badge: na paleta de cores disponível, escolha uma cor para o texto do badge do botão flutuante.

Opções:

• Ícone com tamanho total: fazer com que a imagem do botão flutuante preencha toda a área do ícone.

• Permitir esconder botão flutuante: adiciona botão que "esconde" o botão flutuante.

• Mostrar popup na primeira vez: exibir popubup do botão flutuante na primeira vez ao acessar o site.

Canto da tela: escolha em qual canto da tela (esquerda ou direita) irá aparecer o botão flutuante.

Posição do chat relativa ao botão: escolha se o chat será disposto no topo ou lado em relação ao botão.

Passo 4

Em "Chat", estilize as bordas dos quick replies e também os balões e textos do remetente e do destinatário.

Estilo de borda para quick replies: escolha uma borda quadrada ou arredondada para os quick replies.

Opções:

• Permitir upload de arquivos: permite também o usuário enviar arquivos.

• Mostrar powered by: exibe o texto: powered by: "exemplo de entrada" logo abaixo da caixa de enviar mensagens.

Ao lado direito, selecione as cores desejadas para os textos e balões do remetente e do recebedor das mensagens.

Passo 5

Em "Ice Breakers", configure o enunciado e o fluxo em que será utilizado o "quebra-gelo". É possível definir no máximo 4 perguntas como quebra-gelos.

Enunciado: insira o enunciado para seu quebra-gelo.

Fluxo: selecione um fluxo ja existente para qual o usuario será direcionado após interagir com um quebra-gelo.

Passo 6

Em "Avançado", selecione o fluxo desejado e utilize o código disponível no final da tag BODY do seu site. Por fim, preencha o campo "Host".

Fluxo:

Enviar parâmetros de URL no início do chat:

Permitir transmissão:

Integração:

• BODY:

• Host:

Passo 7

Em "JSON Config", é possível editar todas as opções e configurações do web chat no JSON.

Observação

Caso deseje visualizar como está ficando seu web chat durante o processo de configuração, utilize o botão "Mostrar prévia" para obter uma prévia do resultado final.

Passo 8

Por fim, basta clicar no botão "Salvar" para que sua conexão com WebSDK seja concluída com sucesso.