Ver categorias

Como ligar o Gemini ao Html

< 1 minutos de leitura

Esta página apresenta dois guias para conectar seu agente Gemini ao canal HTML usando o AutoTalk. O primeiro guia ensina a integrar o agente no aplicativo, enquanto o segundo mostra como conectar seu HTML. Siga ambos para completar a integração.

Guia 1: Integrar o agente Gemini #

Este guia detalha o processo de integração de um agente Gemini no AutoTalk.

1 Clique em “Empresa” #

Acesse a seção “Empresa”.

Passo 2 captura

2 Clique em “Agentes” #

Vá para a guia “Agentes”.

Passo 3 captura

3 Crie um novo agente #

Clique no botão com símbolo de “+” na parte superior da tela.

Passo 4 captura

4 Defina aqui o nome do agente #

Defina o nome do seu novo agente

Passo 5 captura

5 Digite “meu_agente” #

Preencha “meu_agente”

Passo 6 captura

6 Selecione o tipo do agente #

Nesse campo você pode definir o tipo do seu novo agente.

Passo 7 captura

7 Escolha “Gemini” #

No nosso caso escolheremos “Gemini”.

Passo 8 captura

8 Clique aqui para criar o novo agente #

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

Passo 9 captura

9 Agente criado com sucesso #

Seu novo agente será criado, mas ainda precisamos da chave de API do Gemini.

Passo 10 captura

10 Acesse “ai.google.dev” #

Para conseguir a chave, acesse “ai.google.com”

Passo 11 captura

11 Clique “Get a Gemini API key in Google AI Studio” #

Clique no botão “Get a Gemini API key in Google AI Studio”

Passo 12 captura

12 Troque para “aistudio.google.com” #

Uma nova aba sera aberta. E nela você terá a opção de criar uma nova chave.

Passo 13 captura

13 Clique em “Create API key” #

Clique no botão azul “Create API key”

Passo 14 captura

14 Defina o projeto do Google Cloud associado #

É necessário definir um projeto do Google Cloud para gerar a chave. Escolha um nesse campo, ou crie um.

Passo 15 captura

15 Clique em “Create API key in existing project” #

Passo 16 captura

16 Sua nova chave da API #

Essa é sua nova chave de API. Muito cuidado, não mostre essa chave pra ninguém e guarde ela num lugar seguro.

Passo 17 captura

17 Clique aqui para copiar #

Copie a chave.

Passo 18 captura

18 Troque para “app.autotalk.io” #

Volte para a aba do AutoTalk.

Passo 19 captura

19 Cole aqui o token do Gemini #

Cole nesse campo a chave copiada no passo anterior.

Passo 20 captura

20 Cole o token #

Digite “AIzaSyAm67Hr_qfSmXkzmIdFINuNMTe5KiRV-fM” no campo fornecido

Passo 21 captura

21 Clique aqui para salvar #

Clique no botão verde na parte superior da página para salvar seu novo agente.

Passo 22 captura

22 Volte para página anterior #

Agora vamos definir esse agente como padrão. Volte para página anterior.

Passo 23 captura

23 Seu novo agente #

Localize seu novo agente na lista.

Passo 24 captura

24 Clique aqui #

Clique no botão com três pontos para expandir um menu.

Passo 25 captura

25 Clique em “Definir padrão” #

Clique em “Definir padrão”.

Passo 26 captura

26 Clique aqui #

Agora vamos testar nosso novo agente, clique no botão verde com símbolo de “play”.

Passo 27 captura

27 Mande uma mensagem de teste #

Mande uma mensagem de teste.

Passo 28 captura

28 Preencher “Olá, tudo bem? quem é você?” #

Se tudo der certo, o Gemini irá responder a sua mensagem.

Passo 29 captura

Este guia abordou a integração do agente Gemini no AutoTalk. Se você enfrentar problemas ou ainda tiver dúvidas, entre 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.

1 Clique em “Empresa” #

Acesse a seção “Empresa”.

Passo 2 captura

2 Clique em “Canais” #

Vá para a guia “Canais”.

Passo 3 captura

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.

Passo 4 captura

4 Selecione o tipo do canal #

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

Passo 5 captura

5 Clique em “AutoChat” #

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

Passo 6 captura

6 Clique em “Próximo passo” #

Prossiga para a próxima etapa.

Passo 7 captura

7 Clique em “Conectar” #

Ative o canal do AutoChat clicando em “Conectar”

Passo 8 captura

8 Abra o código do Chat Integrado #

Para ter acesso ao código do chat embutído clique em “Chat Integrado”.

Passo 9 captura

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.

Passo 10 captura

10 Copie o código fornecido #

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

Passo 11 captura

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.

Passo 12 captura

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

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

Passo 13 captura

13 Cole o código copiado #

E cole o código copiado nos passos anteriores antes do fechamento da tag body.

Passo 14 captura

14 Atualize sua página #

Atualize a página, e você verá que agora haverá um ícone na parte inferior direita.

Passo 15 captura

15 Clique para abrir o chat #

Clique para abrir o chat.

Passo 16 captura

16 Teste o canal #

Vamos fingir que somos um cliente.

Passo 17 captura

17 Teste o canal #

Vou mandar um olá para o nosso agente.

Passo 18 captura

18 Volte para o AutoTalk #

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

Passo 19 captura

19 Navegue até a página de Chats #

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

Passo 20 captura

20 Verificando a mensagem recebida #

A mensagem foi recebida com sucesso, e respondida pelo agente padrão configurado na nossa empresa!

Passo 21 captura

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.

Desenvolvido por BetterDocs

Rolar para cima