Incorpore o chat de IA Conversacional em uma página externa no Jitterbit App Builder

Visão Geral

Este guia explica como incorporar a interface de chat da IA Conversacional em uma página da web externa, como um site voltado para o cliente ou uma aplicação de terceiros. Essa abordagem difere da bolha de chat e do painel de chat, que são exibidos dentro do próprio App Builder.

A incorporação é implementada como um componente da web (<jitterbit-chat>) carregado por meio de um pacote JavaScript servido pela sua instância do App Builder. O chat incorporado pode ser executado como um usuário anônimo embutido ou pode autenticar usuários com JWT SSO com base na sessão da página host. Esta página descreve ambas as opções.

Pré-requisitos

O chat incorporado requer o App Builder 4.63 ou posterior. Antes de incorporar o chat em uma página externa, complete o seguinte:

• Conectar um agente de IA como uma fonte de dados API REST no App Builder.
• Configurar um agente de IA Conversacional no IDE com a opção Está Ativo habilitada.

Como incorporar o chat em uma página externa

Siga os passos abaixo para incorporar o chat em uma página externa. Os passos diferem se você quiser que o chat incorporado funcione como um usuário anônimo ou se pretende configurar a autenticação JWT SSO:

• Passo 1: Adicionar o trecho de incorporação

• Passo 2: Escolher um método de acesso

  • Opção A: Acesso anônimo
  • Opção B: Autenticação JWT SSO

Passo 1: Adicionar o trecho de incorporação

Para incorporar o chat em uma página externa, adicione o seguinte ao seu HTML:

<script src="{base-url}/js/jitterbit-chat-loader.bundle.js" defer></script>

<jitterbit-chat
    base-url="{base-url}"
    agent-ids="">
</jitterbit-chat>

Substitua o seguinte espaço reservado:

• {base-url}: A URL da sua instância do App Builder.

O atributo agent-ids é opcional. Deixe-o vazio para exibir todos os agentes disponíveis para o usuário, ou insira um ou mais IDs de agentes como uma lista separada por vírgulas para limitar o chat a agentes específicos.

Passo 2: Escolha um método de acesso

O chat incorporado suporta dois modos de acesso. Escolha o que melhor se adapta às suas necessidades:

Opção A: Acesso anônimo

Por padrão, o chat incorporado é executado como o usuário anonymous integrado. No entanto, você precisa permitir que usuários anônimos interajam com o chat. Crie um grupo dedicado e conceda as permissões apropriadas seguindo estas etapas:

1. No IDE , clique em Gerenciamento de Usuários no painel Runtime.
2. Selecione a aba Grupos e clique em + Grupo.

3. Insira um nome (por exemplo, Usuários Anônimos) e uma descrição, em seguida clique em Salvar.

   

4. Quando o novo grupo aparecer no painel Grupos, clique no botão Gerenciar Permissões.

5. Na caixa de diálogo Gerenciar Permissões, clique em Criar no painel Permissões.
6. Na caixa de diálogo Criar Permissão, selecione Aplicativo no campo Tipo.

7. No dropdown Aplicativo, selecione Vinyl - Agentes Personalizados, em seguida clique em Salvar.

   

8. Selecione a nova permissão no painel Permissões. Os papéis associados a ela aparecem no painel Papéis.

9. Localize o papel Chat do Agente e clique em Conceder.

10. Saia da caixa de diálogo para retornar à aba Grupos. Com o novo grupo selecionado no painel Grupos, clique em + Membros no painel Membros. Selecione o usuário anonymous integrado no dropdown Usuário, e clique em para salvar.

    

Para mais informações sobre como gerenciar grupos e privilégios, consulte Gerenciamento de Usuários e Grupos.

Em seguida, adicione um papel e conceda as permissões relevantes seguindo estas etapas:

1. No IDE , clique em Servidores de Dados no painel Conectar.
2. Na lista de servidores de dados, selecione o servidor de dados do agente de IA.
3. No painel à direita, clique duas vezes na caixa contendo o nome do servidor ou clique no ícone na caixa. Um diálogo se abre.

4. Clique em Papéis. O diálogo Papéis se abre.

   

5. No painel Papel, em Informações do Papel, insira um Nome para o novo papel e clique em Salvar.

6. No painel Permissões, clique em + Permissão.
7. Em Tabela, selecione o endpoint principal do servidor de dados do agente de IA (por exemplo, chat). Não selecione tabelas subsidiárias como chat/references ou chat/ResponseHeaders, que são usadas internamente pelo App Builder.

8. Verifique se Ler, Inserir, Atualizar e Excluir estão todos selecionados e clique em para salvar.

   

Por fim, conceda ao grupo Usuários Anônimos acesso ao papel:

1. No IDE , clique em Gerenciamento de Usuários no painel Runtime.
2. Selecione a aba Grupos e clique no grupo Usuários Anônimos.
3. Clique em Gerenciar Privilégios.
4. No painel Privilégios, clique em Criar.
5. Na caixa de diálogo Criar Privilégio, selecione Fonte de Dados no campo Tipo.

6. No dropdown Fonte de Dados, selecione a fonte de dados do agente de IA e clique em Salvar.

   

7. Selecione o novo privilégio no painel Privilégios. Os papéis associados a ele aparecem no painel Papéis.

8. Localize o papel criado acima e clique em Conceder.

   

Opção B: autenticação JWT SSO

Para autenticar usuários a partir da página host em vez de operar como anônimo, configure a autenticação JWT SSO. Quando o JWT SSO está ativo, o chat incorporado autentica o usuário antes de fazer chamadas REST, provisiona automaticamente o usuário no App Builder se ele ainda não existir e re-autentica silenciosamente quando os cookies de sessão expiram.

Primeiro, configure as configurações do IDE seguindo estas etapas:

1. No IDE, clique em Provedores de Segurança no painel Conectar. A página Segurança é aberta.
2. No painel Configuração, clique em Mais e selecione Sites. A caixa de diálogo Sites é aberta.
3. Clique em + Site.
4. No campo URL, insira a URL base da sua instância do App Builder (por exemplo, https://example.com).
5. Deixe a caixa de seleção Redirecionar desmarcada.
6. Selecione a caixa de seleção Permitir Origem Cruzada.

7. Clique em Salvar.

   

Em seguida, configure um provedor JWT SSO:

1. No IDE, clique em Provedores de Segurança no painel Conectar. A página Segurança é aberta.

2. No painel Autenticação de Usuário, clique em + Autenticação de Usuário. A página Provedor é aberta em modo de criação:

   

3. Na seção Configurações, configure o seguinte:

   • Nome: Insira um nome para o provedor.
   • Tipo: Selecione JWT SSO.
   • Habilitado: Selecione esta caixa de seleção.
4. Na seção Tokens, configure o seguinte:
   • Público: Insira a URL base da sua instância do App Builder (por exemplo, https://example.com).
   • Emissor: Insira o valor do emissor configurado nas configurações de geração de JWT da página host (por exemplo, example.com). Isso deve corresponder à reivindicação iss nos JWTs emitidos pelo framework de autenticação da página host.
5. Na seção Provisionamento, selecione as caixas de seleção Provisionamento de Usuário e Fornecer Membros de Grupo.
6. Clique em Salvar para criar o provedor.

7. No painel Certificados, clique em + Certificado (veja provedor de segurança JWT SSO para detalhes sobre os requisitos de certificado) e configure o seguinte:

   

   • Uso: Selecione Validação de Assinatura.
   • Tipo: Selecione Certificado X.509.
   • Formato: Selecione PEM.
   • Conteúdo: Cole o certificado codificado em PEM que contém a chave pública RSA usada para assinar os JWTs emitidos pelo framework de autenticação da página host.
   • Identificador: Opcionalmente, insira um identificador para o certificado. Se especificado, esse valor aparece no parâmetro kid dos cabeçalhos JWT.

   Clique em Salvar.

Em seguida, atualize o snippet de incorporação. Adicione os atributos provider e jwt ao elemento <jitterbit-chat>:

<script src="{base-url}/js/jitterbit-chat-loader.bundle.js" defer></script>

<jitterbit-chat
    base-url="{base-url}"
    agent-ids=""
    provider="{provider-name}"
    jwt="{JWT token}">
</jitterbit-chat>

• {provider-name}: O nome do provedor JWT SSO configurado no IDE.
• {JWT token}: O token JWT emitido pelo framework de autenticação da página host.

Assim como os usuários anônimos, os usuários autenticados por JWT precisam ser autorizados a interagir com o agente de IA. Para fazer isso, comece adicionando um papel apropriado e concedendo as permissões necessárias. Siga estas etapas:

1. No IDE, clique em Servidores de Dados no painel Conectar.
2. Na lista de servidores de dados, selecione o servidor de dados do agente de IA.
3. No painel à direita, clique duas vezes na caixa contendo o nome do servidor ou clique no ícone na caixa. Um diálogo se abre.

4. Clique em Papéis. O diálogo Papéis se abre.

   

5. No painel Papel, em Informações do Papel, insira um Nome para o novo papel e clique em Salvar.

6. No painel Permissões, clique em + Permissão.
7. Em Tabela, selecione o endpoint principal do servidor de dados do agente de IA (por exemplo, chat). Não selecione tabelas subsidiárias como chat/references ou chat/ResponseHeaders, que são usadas internamente pelo App Builder.

8. Verifique se Ler, Inserir, Atualizar e Excluir estão todos selecionados e clique em para salvar.

   

Por fim, conceda ao grupo de segurança acesso ao papel:

1. No IDE, clique em Gerenciamento de Usuários no painel Runtime.
2. Selecione a aba Grupos e clique no grupo ao qual os usuários autenticados por JWT pertencem (por exemplo, Usuários).
3. Clique em Gerenciar Privilégios.
4. No painel Privilégios, clique em Criar.
5. Na caixa de diálogo Criar Privilégio, selecione Fonte de Dados no campo Tipo.

6. No dropdown Fonte de Dados, selecione a fonte de dados do agente de IA e clique em Salvar.

   

7. Selecione o novo privilégio no painel Privilégios. Os papéis associados a ele aparecem no painel Papéis.

8. Localize o papel criado acima e clique em Conceder.