Como conectar seu bot no WebSDK
Last updated
Last updated
Para estabelecer a conexão com o WebSDK, siga o passo-a-passo abaixo:
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.
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.
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.
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.
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.
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:
Em "JSON Config", é possível editar todas as opções e configurações do web chat no JSON.
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.
Por fim, basta clicar no botão "Salvar" para que sua conexão com WebSDK seja concluída com sucesso.
