Incrustación de IFrame y Apps

Información general

Incrusta tu agente conversacional en las aplicaciones Web utilizando iFrame. Usa este enfoque para añadir agentes a las aplicaciones de terceros o a las Apps de UiPath utilizando el componente iFrame.

Usuarios previstos: desarrolladores y administradores que quieran incrustar agentes en aplicaciones Web personalizadas o Apps de UiPath.

Disponibilidad de característica

Función	Disponible
Iniciar nuevo chat	✅
Historial de chat	✅
Eliminar sesión de chat	✅
Configuración	✅
Iniciar solicitudes	✅
Cargas de archivos	✅
Citas	❌
Vista previa de HTML	✅
Copiar respuesta	✅
Comentarios (pulgares)	✅
Volcado de depuración	❌

Requisitos previos

Para incrustar un agente conversacional, completa los siguientes pasos de configuración:

Configuración de administrador o desarrollador

1. Publica el agente conversacional en la carpeta de Orchestrator que desees.
2. Recupera el ID de la versión del agente desde Gestión de instancias.
3. Para las Apps de UiPath, crea un proyecto de Apps en UiPath Studio.
4. Para las aplicaciones de terceros, asegúrate de que la aplicación web admita la incrustación de iFrame.

Buscar el ID de agente

1. En Gestión de Instancias, ve a Agentes > Agentes implementados.
2. Selecciona Chat para el agente deseado.
3. Copia el ID del agente de la URL. Por ejemplo, en la URL https://cloud.uipath.com/conversationalagents/agents_/deployed/chat/342061, el ID del agente es 342061.

Requisitos de usuario:

• Los usuarios autenticados deben tener una cuenta de UiPath con permiso para acceder al agente.
• Los usuarios anónimos deben tener acceso a la aplicación o superficie donde está incrustado el agente.

Incrustar el agente

Construcción de URL

Establece el origen de iFrame en una URL con el siguiente formato:

https://cloud.uipath.com/<organization>/<tenant>/autopilotforeveryone_/conversational-agents/?agentId=<agent_id>&mode=<mode>

Nota:

La organización y el Nombre del tenant distinguen entre mayúsculas y minúsculas.

Parámetros de URL

Parámetro	Obligatorio	Descripción
agentId	Sí	El ID de la versión del agente publicado
mode	No	embedded para la experiencia de barra derecha, fullscreen para pantalla completa (predeterminado: fullscreen)
title	No	Título que se muestra en el encabezado de chat (predeterminado: nombre del agente)
welcomeTitle	No	Título para la pantalla de bienvenida en la primera ejecución
welcomeDescription	No	Descripción de la pantalla de bienvenida en la primera ejecución
suggestions	No	Array de solicitudes sugeridas para la primera ejecución.
showHistory	No	Mostrar/ocultar el panel de historial de chat (predeterminado: true)

URL de ejemplo

Modo incrustado básico:

https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded

Con mensaje de bienvenida y sugerencias:

https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded&title=HR Assistant&welcomeTitle=Welcome!&welcomeDescription=I can help you with HR questions&suggestions=["What is the PTO policy?","How do I submit expenses?"]

Incrustación en Apps de UiPath

Para incrustar un agente conversacional en UiPath Apps, utiliza el componente iFrame.

1. Abre tu App en UiPath Apps Studio.

2. Añade un componente de iFrame a tu página.

3. Establece la propiedad Origen de iFrame en la URL construida.

4. Publique la aplicación.

   

Al incrustar un agente conversacional en UiPath Apps, escapa la matriz de sugerencias utilizando comillas dobles, como se muestra en el siguiente ejemplo:

suggestions=[""What is the PTO policy?"",""How do I submit expenses?""]

Esto es necesario porque UiPath Apps valida el valor como una string.

Incrustación en aplicaciones de terceros

Puedes incrustar un agente conversacional en cualquier aplicación web que admita la incrustación de iFrame.

Ejemplo de HTML:

<iframe
  src="https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>

Consideraciones

• Políticas de origen cruzado: asegúrate de que la política de seguridad de contenido de tu aplicación permita la incrustación desde uipath.com.
• Diseño receptivo: configura los valores de anchura y altura adecuados para garantizar una representación adecuada en todos los tamaños de pantalla.
• Acceso al portapapeles: incluye allow="clipboard-write" para habilitar la característica de respuesta de copia.

Características de chat

La experiencia de chat integrada utiliza la IU de chat de gestión de instancias, proporcionando la misma funcionalidad de chat, con las siguientes excepciones y limitaciones.

Limitaciones

Las siguientes características no están disponibles en modo incrustado:

Función	Notas
Citas	La vista previa de la cita no está disponible
Volcado de depuración	No disponible. Usa Gestión de instancias para la depuración.

Opciones de autenticación

Usuarios autenticados

Para usuarios internos con cuentas de UiPath:

• Los usuarios se autentican utilizando la autenticación estándar de UiPath.
• El agente tiene acceso a la información de identidad del usuario, como el Nombre y la Dirección de correo electrónico.
• El consumo se rastrea en función de la licencia del usuario.

Usuarios anónimos

Para escenarios externos o no autenticados:

• Se debe configurar una aplicación externa confidencial en el portal de administración.
• Se requiere un punto final de token alojado por tu organización.
• No se requiere licencia de usuario individual.
• El consumo se deduce del grupo de unidades del tenant.

Para obtener instrucciones de configuración, consulta Configuración de acceso anónimo.

Para obtener detalles sobre las licencias, consulta Licencias.

ADVERTENCIA:

El acceso anónimo permite a los usuarios sin cuentas de UiPath interactuar con tu agente. Recomendamos encarecidamente utilizar agentes detrás de tu propio portal o iniciar sesión para mitigar el abuso.

Solución de problemas

iFrame no se carga

• Verifica que la URL esté construida correctamente.
• Comprueba que el ID del agente es válido.
• Asegúrate de que el agente esté publicado y en ejecución.
• Comprueba la consola del Explorador para ver si hay errores de la Política de Seguridad de Contenido.

La función de copiar no funciona.

• Asegúrate de que el iFrame incluya el atributo allow="clipboard-write".
• Comprueba los permisos del explorador para acceder al portapapeles.

Próximos pasos

• Configuración de acceso anónimo: habilita el acceso para usuarios sin cuentas de UiPath
• Gestión de instancias: referencia de características completa y depuración