Esta página contém dois guias para conectar seu agente Dialogflow ao seu canal HTML usando o AutoTalk. O primeiro guia integra o agente no aplicativo, enquanto o segundo conecta seu HTML ao aplicativo, facilitando a integração completa.
Guia 1: Integrar o agente Dialogflow #
Este guia apresenta passo a passo como integrar um agente do DialogFlow ao AutoTalk.
1 Introdução #
No nosso caso, já temos um bot criado no DialogFlow Essentials. Vamos integrá-lo ao AutoTalk.
4 Clique aqui para criar um novo agente #
Clique no botão com símbolo de “+” na parte superior da tela.
10 Troque para “dialogflow.cloud.google.com” #
Agora vamos precisar pegar a chave de acesso do seu agente no DialogFlow Essential. Para isso acesse https://dialogflow.cloud.google.com
11 Acesse as configurações #
Clique no botão de engrenagem para acessar as configurações do seu agente no DialogFlow.
13 Uma nova aba será aberta #
Uma nova página será aberta no dashboard do projeto google cloud associado ao agente do DialogFlow.
16 Clique em “Create service account” #
Para gerar uma nova chave precisamos criar uma nova conta de serviço. Clique em “Create service account”.
29 Clique em “Create new key” #
32 O site fará download de um arquivo JSON #
O site fará download de um arquivo JSON, abra ele e copie o conteúdo.
35 Defina aqui o idioma do agente #
Defina o idioma do agente do DialogFlow, no nosso caso é ‘pt-BR’
37 Salve seu novo agente #
Clique no botão verde na parte superior do formulário para salvar seu agente.
38 Clique aqui #
Agora vamos definir esse novo agente como padrão. Clique no botão na parte superior esquerda para voltar para página anterior.
44 Testando o agente #
Vamos enviar uma mensagem de teste para o agente. Se tudo der certo você receberá uma resposta.
Este guia abordou a integração de um agente do DialogFlow no Autotalk. Caso você encontre problemas ou tenha dúvidas, não hesite em entrar em contato com o suporte.
Guia 2: Conectar o canal Html #
Este guia aborda a integração de um agente em uma página HTML utilizando o Autotalk.
3 Clique no botão para inciar a criação de um novo canal #
Clique no botão com o símbolo “+” na parte superior da tela para iniciar o processo de adição de um novo canal.
5 Clique em “AutoChat” #
Como estamos integrando um agente em uma página HTML, precisamos escolher a opção AutoChat
8 Abra o código do Chat Integrado #
Para ter acesso ao código do chat embutído clique em “Chat Integrado”.
9 Esse é o código do seu chat embutido #
Esse é o código do seu chat embutido, você pode colocar ele em qualquer página HTML.
11 Vá até sua página HTML #
Vá até a sua página HTML, no nosso caso, estamos trabalhando em uma página de um Pet Shop.
13 Cole o código copiado #
E cole o código copiado nos passos anteriores antes do fechamento da tag body.
14 Atualize sua página #
Atualize a página, e você verá que agora haverá um ícone na parte inferior direita.
18 Volte para o AutoTalk #
Vamos voltar para o AutoTalk e verificar se a mensagem foi recebida com sucesso.
20 Verificando a mensagem recebida #
A mensagem foi recebida com sucesso, e respondida pelo agente padrão configurado na nossa empresa!
O guia cobriu os passos necessários para integrar com sucesso um agente em uma página HTML usando o Autotalk, incluindo a configuração do chat integrado e a interação com o agente. Caso você ainda tenha dúvidas, não hesite em entrar em contato com o suporte.
