Incrustar el chat de IA Conversacional en una página externa en Jitterbit App Builder

Descripción general

Esta guía explica cómo incrustar la interfaz de chat de IA Conversacional en una página web externa, como un sitio web orientado al cliente o una aplicación de terceros. Este enfoque difiere de la burbuja de chat y del panel de chat, que se muestran dentro de App Builder.

La incrustación se implementa como un componente web (<jitterbit-chat>) cargado a través de un paquete de JavaScript servido por tu instancia de App Builder. El chat incrustado puede funcionar como el usuario anónimo integrado, o puede autenticar a los usuarios con JWT SSO basado en la sesión de la página anfitriona. Esta página describe ambas opciones.

Requisitos previos

El chat incrustado requiere App Builder 4.63 o posterior. Antes de incrustar el chat en una página externa, completa lo siguiente:

• Conectar un agente de IA como fuente de datos API REST en App Builder.
• Configurar un agente de IA Conversacional en el IDE con la opción Está Activo habilitada.

Cómo incrustar el chat en una página externa

Sigue los pasos a continuación para incrustar el chat en una página externa. Los pasos difieren si deseas que el chat incrustado funcione como un usuario anónimo, o si tienes la intención de configurar la autenticación JWT SSO:

• Paso 1: Agregar el fragmento de incrustación

• Paso 2: Elegir un método de acceso

  • Opción A: Acceso anónimo
  • Opción B: Autenticación JWT SSO

Paso 1: Agregar el fragmento de incrustación

Para incrustar el chat en una página externa, agrega lo siguiente a tu HTML:

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

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

Reemplaza el siguiente marcador:

• {base-url}: La URL de tu instancia de App Builder.

El atributo agent-ids es opcional. Déjalo vacío para mostrar todos los agentes disponibles para el usuario, o ingresa uno o más IDs de agente como una lista separada por comas para limitar el chat a agentes específicos.

Paso 2: Elegir un método de acceso

El chat integrado admite dos modos de acceso. Elige el que se ajuste a tus requisitos:

Opción A: Acceso anónimo

Por defecto, el chat integrado se ejecuta como el usuario anonymous incorporado. Sin embargo, necesitas permitir que los usuarios anónimos interactúen con el chat. Crea un grupo dedicado y otórgale los privilegios apropiados siguiendo estos pasos:

1. En el IDE, haz clic en Gestión de Usuarios en el panel Runtime.
2. Selecciona la pestaña Grupos y haz clic en + Grupo.

3. Ingresa un nombre (por ejemplo, Usuarios Anónimos) y una descripción, luego haz clic en Guardar.

   

4. Cuando el nuevo grupo aparezca en el panel Grupos, haz clic en su botón Gestionar Privilegios.

5. En el diálogo Gestionar Privilegios, haz clic en Crear en el panel Privilegios.
6. En el diálogo Crear Privilegio, selecciona Aplicación en el campo Tipo.

7. En el menú desplegable Aplicación, selecciona Vinyl - Agentes Personalizados, luego haz clic en Guardar.

   

8. Selecciona el nuevo privilegio en el panel Privilegios. Los roles asociados a él aparecerán en el panel Roles.

9. Localiza el rol Chat de Agente y haz clic en Otorgar.

10. Sal del diálogo para regresar a la pestaña Grupos. Con el nuevo grupo seleccionado en el panel Grupos, haz clic en + Membresía en el panel Membresía. Selecciona el usuario anonymous incorporado del menú desplegable Usuario, y haz clic en para guardar.

    

Para obtener más información sobre la gestión de grupos y privilegios, consulte Gestión de Usuarios y Grupos.

A continuación, agregue un rol y otorgue los permisos relevantes siguiendo estos pasos:

1. En el IDE, haga clic en Servidores de Datos en el panel Conectar.
2. En la lista de servidores de datos, seleccione el servidor de datos del agente de IA.
3. En el panel de la derecha, haga doble clic en el cuadro que contiene el nombre del servidor o haga clic en el ícono en el cuadro. Se abre un diálogo.

4. Haga clic en Roles. Se abre el diálogo de Roles.

   

5. En el panel de Rol, bajo Información del Rol, ingrese un Nombre para el nuevo rol, luego haga clic en Guardar.

6. En el panel de Permisos, haga clic en + Permiso.
7. Bajo Tabla, seleccione el punto final principal del servidor de datos del agente de IA (por ejemplo, chat). No seleccione tablas subsidiarias como chat/references o chat/ResponseHeaders, que son utilizadas internamente por App Builder.

8. Verifique que Leer, Insertar, Actualizar y Eliminar estén todos seleccionados, luego haga clic en para guardar.

   

Finalmente, otorgue al grupo de Usuarios Anónimos acceso al rol:

1. En el IDE, haga clic en Gestión de Usuarios en el panel Runtime.
2. Seleccione la pestaña Grupos y haga clic en el grupo de Usuarios Anónimos.
3. Haga clic en Gestionar Privilegios.
4. En el panel de Privilegios, haga clic en Crear.
5. En el diálogo de Crear Privilegio, seleccione Fuente de Datos en el campo Tipo.

6. En el menú desplegable de Fuente de Datos, seleccione la fuente de datos del agente de IA, luego haga clic en Guardar.

   

7. Selecciona el nuevo privilegio en el panel de Privilegios. Los roles asociados aparecen en el panel de Roles.

8. Localiza el rol creado anteriormente y haz clic en Conceder.

   

Opción B: Autenticación JWT SSO

Para autenticar a los usuarios desde la página anfitriona en lugar de ejecutarse como anónimos, configura la autenticación JWT SSO. Cuando JWT SSO está activo, el chat incrustado autentica al usuario antes de realizar llamadas REST, provisiona automáticamente al usuario en App Builder si aún no existe y vuelve a autenticar silenciosamente cuando las cookies de sesión expiran.

Primero, configura los ajustes del IDE siguiendo estos pasos:

1. En el IDE, haz clic en Proveedores de Seguridad en el panel de Conectar. Se abre la página de Seguridad.
2. En el panel de Configuración, haz clic en Más y selecciona Sitios. Se abre el diálogo de Sitios.
3. Haz clic en + Sitio.
4. En el campo de URL, ingresa la URL base de tu instancia de App Builder (por ejemplo, https://example.com).
5. Deja la casilla de Redirigir sin seleccionar.
6. Selecciona la casilla de Permitir Origen Cruzado.

7. Haz clic en Guardar.

   

A continuación, configura un proveedor JWT SSO:

1. En el IDE, haz clic en Proveedores de Seguridad en el panel de Conectar. Se abre la página de Seguridad.

2. En el panel de Autenticación de Usuario, haz clic en + Autenticación de Usuario. La página de Proveedor se abre en modo de creación:

   

3. En la sección de Configuración, configura lo siguiente:

   • Nombre: Ingresa un nombre para el proveedor.
   • Tipo: Selecciona JWT SSO.
   • Habilitado: Selecciona esta casilla.
4. En la sección de Tokens, configura lo siguiente:
   • Audiencia: Ingresa la URL base de tu instancia de App Builder (por ejemplo, https://example.com).
   • Emisor: Ingresa el valor del emisor configurado en los ajustes de generación de JWT de la página anfitriona (por ejemplo, example.com). Esto debe coincidir con el reclamo iss en los JWT emitidos por el marco de autenticación de la página anfitriona.
5. En la sección de Provisionamiento, selecciona las casillas de Provisionamiento de Usuario y Suministra Membresía de Grupo.
6. Haz clic en Guardar para crear el proveedor.

7. En el panel de Certificados, haz clic en + Certificado (consulta proveedor de seguridad JWT SSO para detalles sobre los requisitos de certificados) y configura lo siguiente:

   

   • Uso: Seleccionar Validación de Firma.
   • Tipo: Seleccionar Certificado X.509.
   • Formato: Seleccionar PEM.
   • Contenido: Pegar el certificado codificado en PEM que contiene la clave pública RSA utilizada para firmar los JWT emitidos por el marco de autenticación de la página anfitriona.
   • Identificador: Opcionalmente, ingresar un identificador para el certificado. Si se especifica, este valor aparece en el parámetro kid de los encabezados JWT.

   Hacer clic en Guardar.

A continuación, actualizar el fragmento de inserción. Agregar los atributos provider y jwt al 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}: El nombre del proveedor de SSO JWT configurado en el IDE.
• {JWT token}: El token JWT emitido por el marco de autenticación de la página anfitriona.

Al igual que los usuarios anónimos, los usuarios autenticados por JWT necesitan ser autorizados para interactuar con el agente de IA. Para hacerlo, comenzar agregando un rol apropiado y otorgándole los permisos necesarios. Seguir estos pasos:

1. En el IDE, hacer clic en Servidores de Datos en el panel Conectar.
2. En la lista de servidores de datos, seleccionar el servidor de datos del agente de IA.
3. En el panel de la derecha, hacer doble clic en el cuadro que contiene el nombre del servidor o hacer clic en el ícono en el cuadro. Se abre un diálogo.

4. Hacer clic en Roles. Se abre el diálogo de Roles.

   

5. En el panel Rol, bajo Información del Rol, ingresar un Nombre para el nuevo rol, luego hacer clic en Guardar.

6. En el panel Permisos, hacer clic en + Permiso.
7. Bajo Tabla, seleccionar el punto final principal del servidor de datos del agente de IA (por ejemplo, chat). No seleccionar tablas subsidiarias como chat/references o chat/ResponseHeaders, que son utilizadas internamente por App Builder.

8. Verificar que Leer, Insertar, Actualizar y Eliminar estén todos seleccionados, luego hacer clic en para guardar.

   

Finalmente, concede acceso al grupo de seguridad al rol:

1. En el IDE, haz clic en Gestión de Usuarios en el panel de Runtime.
2. Selecciona la pestaña Grupos y haz clic en el grupo al que pertenecen los usuarios autenticados por JWT (por ejemplo, Usuarios).
3. Haz clic en Gestionar Privilegios.
4. En el panel de Privilegios, haz clic en Crear.
5. En el cuadro de diálogo Crear Privilegio, selecciona Fuente de Datos en el campo de Tipo.

6. En el menú desplegable de Fuente de Datos, selecciona la fuente de datos del agente de IA, luego haz clic en Guardar.

   

7. Selecciona el nuevo privilegio en el panel de Privilegios. Los roles asociados a él aparecen en el panel de Roles.

8. Localiza el rol creado anteriormente y haz clic en Conceder.