Como ligar o Botpress V12 ao Html

Este guia ensina como integrar um agente Botpress V12 no AutoTalk.

1 Introdução #

Note que o Botpress V12 é um programa standalone e deve rodar em algum servidor. No caso desse guia, estamos executando ele localmente e expondo para internet via ngrok. Atente-se nos dados do seu ambiente.

2 Clique em “Empresa” #

Acesse as configurações da empresa.

3 Clique em “Agentes” #

Vá para a seção de agentes.

4 Adicione um novo agente #

Adicione um novo agente clicando no botão com símbolo de “+” na parte superior da tela.

5 Defina o nome do agente #

Aqui você deve definir o nome do agente.

6 Preencher nome do agente #

Preencha “meu_agente”

7 Defina o tipo do agente #

Nesse campo você define o tipo do agente

8 Clique em “Botpress V12” #

No nosso caso escolheremos Botpress V12, cuidado para não confundir com Botpress Cloud que é outra plataforma.

9 Crie o novo agente #

Clique no botão verde na parte superior da tela para criar o novo agente.

10 Página de configuração do agente #

Você será redirecionado para a página de configuração do agente Botpress V12.

11 Defina a URL do seu agente Botpress V12 #

Nesse campo precisamos definir a URL da API do Botpress V12. E essa URL vai variar de acordo com o servidor em que o seu Botpress V12 está executando.

12 Nosso dashboard do Botpress V12 #

Dê uma olhada na nossa página de dashboard do Botpress V12.

13 A URL base #

O importante é checar a URL base. No caso do nosso exemplo é essa em destaque.

14 https://lively-advanced-reptile.ngrok-free.app/api/v1/bots/ID_DO_BOT/converse #

Do endereço da aba do navegador do Botpress V12 podemos gerar parte da URL final. Ela ficará dessa forma. Agora só precisamos definir o valor da parte em maiúsculo: “ID DO BOT”

15 Escolha o agente que quer integrar #

Escolha qual agente você quer integrar. No nosso caso será o image-bot

16 Clique em “Config” #

Vamos pegar o id desse agente. Para isso, clique em “Config”

17 ID do agente #

Você será redirecionado para uma página que contém o id do agente.

18 https://lively-advanced-reptile.ngrok-free.app/api/v1/bots/image-bot/converse #

Com esse dado em mãos você já pode finalizar a construção da URL de integração.

19 Defina aqui a URL gerada nos passos anteriores #

Defina aqui a URL adquirida no passo anterior.

20 Preencher “https://lively-advanced-reptile.ngrok-free.app/api/v1/bots/image-bot/converse” #

Digite o texto desejado.

21 Verifique a URL #

Verifique se a URL está correta.

22 Salve seu novo agente #

Salve seu agente clicando no botão verde na parte superior da tela. O AutoTalk realiza um teste na URL configurada quando você apertar esse botão, então, se tiver algum erro na URL ele vai acusar agora.

23 Volte para página anterior #

Certo, com tudo salvo, vamos definir esse agente como o agente padrão. Clique no botão para voltar para página anterior

24 Localize seu novo agente #

Encontre seu novo agente na lista.

25 Expanda o menu de opções #

Clique no ícone com 3 pontos para abrir o menu de opções do agente

26 Clique em “Definir padrão” #

Selecione a opção “Definir padrão”.

27 Vamos testar o nosso novo agente #

Para testar seu novo agente clique no botão verde com ícone de “play”.

28 Uma nova área com um chat será aberta #

Uma nova área na parte direita da janela vai ser aberta. Vamos usar ela para testar nosso novo agente.

29 Digite uma mensagem para seu agente #

Mande um “olá” para seu novo agente.

30 Preencher “Olá” #

Digite “Olá” no campo fornecido

31 Verfique se o agente responde #

Verifique se o agente responde corretamente. No nosso exemplo deu tudo certo!

Este guia detalhou os passos necessários para integrar um agente Botpress V12 no AutoTalk. Caso ainda existam dúvidas ou você enfrente problemas, entre em contato com o suporte.

Este guia aborda a integração de um agente em uma página HTML utilizando o Autotalk.

1 Clique em “Empresa” #

Acesse a seção “Empresa”.

2 Clique em “Canais” #

Vá para a guia “Canais”.

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.

4 Selecione o tipo do canal #

Nesse campo você poderá selecionar o tipo do canal.

5 Clique em “AutoChat” #

Como estamos integrando um agente em uma página HTML, precisamos escolher a opção AutoChat

6 Clique em “Próximo passo” #

Prossiga para a próxima etapa.

7 Clique em “Conectar” #

Ative o canal do AutoChat clicando em “Conectar”

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.

10 Copie o código fornecido #

Clique nesse botão para copiar o código.

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.

12 Vá até o código fonte da sua página #

Vá até o código fonte da sua página HTML

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.

15 Clique para abrir o chat #

Clique para abrir o chat.

16 Teste o canal #

Vamos fingir que somos um cliente.

17 Teste o canal #

Vou mandar um olá para o nosso agente.

18 Volte para o AutoTalk #

Vamos voltar para o AutoTalk e verificar se a mensagem foi recebida com sucesso.

19 Navegue até a página de Chats #

Navegue até a página de Chats para ver a nova conversa.

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.