Nota: Esta función está disponible para clientes seleccionados.
Este artículo ofrece una visión integral de la configuración de elementos visuales enriquecidos (Rich Visuals) dentro del widget de Talkdesk Chat, respaldado por la plataforma Talkdesk AI Agent Platform™. Las interacciones tradicionales de AI basadas en texto generan mucha fricción para el usuario, ralentizan los flujos de trabajo y provocan altas tasas de abandono, ya que los usuarios se ven obligados a leer extensos bloques de texto y a escribir manualmente cada respuesta.
La implementación de Rich Visuals resuelve este problema al reemplazar la entrada de texto manual con componentes visuales intuitivos y responsivos, generando tiempos de finalización de transacción más rápidos y tasas de conversión significativamente más altas.
La guía proporciona instrucciones paso a paso para:
- Configurar la integración de Rich Visuals.
- Crear y personalizar Rich Visuals.
- Configurar Rich Visuals en la AI Agent Platform.
- Previsualización de Rich UI en tiempo de ejecución y solución de problemas.
Configurar integración Rich Visuals
Configurar la integración Rich Visuals
Siga Configuring an Integration y Custom Integration para crear la integración de Rich UI.
Ruta base para las regiones:
- US: https://api.talkdeskapp.com
- UE: https://api.talkdeskapp.eu
- CA: https://api.talkdeskappca.com
- UK: https://api.talkdeskapp.co.uk
Tipo de autenticación: OAuth2 Client Credentials V2
URL de acceso para regiones:
- US: https://<your account name>.talkdeskid.com/oauth/token
- EU: https://<your account name>.talkdeskid.eu/oauth/token
- CA: https://<your account name>.talkdeskca.com/oauth/token
- UK: https://<your account name>.talkdeskid.co.uk/oauth/token
Creación de clientes OAuth
Siga las instrucciones de Creating a New OAuth Client para crear un nuevo cliente OAuth en Talkdesk.
Nota: Si la cuenta ya tiene un cliente OAuth, puede agregar estos dos ámbitos a su cliente OAuth.
- Tipo de autorización: Client credentials, Refresh token.
- Ámbitos: digital-messaging-adapter.write.
Esquema de entrada de integración
Configure el siguiente esquema de entrada en la integración:
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "The root schema",
"type": "object",
"properties": {
"template_name": {
"type": "string",
"title": "template_name"
},
"last_received_message_metadata": {
"type": "string",
"title": "last_received_message_metadata"
},
"state": {
"type": "string",
"title": "state"
}
},
"required": [
"template_name"
],
"additionalProperties": false
}
Configuración del esquema de entrada de Rich UI
Crear y personalizar Rich Visuals
Resumen
Navegue hasta Admin en la barra lateral izquierda, haga clic en Channels, seleccione Chat y abra la pestaña Rich Visuals para acceder a los Rich Visuals. Esto permite a los administradores crear, personalizar y publicar componentes de Rich UI, como listas de botones, carruseles, respuestas rápidas y formularios, convirtiendo las conversaciones de chat estándar en experiencias visuales dinámicas. Cada plantilla guardada genera un identificador único (como product_list_carousel) al que debe hacer referencia directamente dentro de las indicaciones de su Agent AI.
Nota: Se requieren permisos de administrador para editar o publicar elementos visuales. Las actualizaciones no publicadas se guardan como borradores de trabajo.
La pestaña Rich Visuals que muestra los elementos visuales guardados.
Crear un Rich Visual
En la pestaña Rich Visual, el administrador puede crear, personalizar, publicar, renombrar, duplicar y eliminar un Rich Visual.
- Crear elementos visuales enriquecidos: Para crear un Rich Visual, navegue hasta Channels en Admin en la barra lateral izquierda, seleccione Chat, abra la pestaña Rich visuals y haga clic en el botón Create Rich visual. Esto le permite diseñar y personalizar interfaces de usuario interactivas, como carruseles y respuestas rápidas, transformando las conversaciones de texto estándar en experiencias de chat visuales y dinámicas.
- Seleccione una plantilla y cree: Elija entre las diferentes plantillas de Rich Visual que incluyen "Button list", "Carousel", "Quick reply" y "Form" para crear componentes de UI interactivos para el chat de agentes. Haga clic en Create para crear el elemento de Rich Visual en forma de borrador.
- Nombre: El nombre del visual debe contener solo letras, números y guiones bajos, hasta 100 caracteres. Cada nombre debe ser único, ya que sirve como identificador al que se hace referencia directamente en las indicaciones del agente AI.
Cuadro de diálogo Create rich visual con opciones de plantillas.
Personalizar Rich Visuals
Después de hacer clic en Create, se abre el workspace donde puede personalizar diseños, texto, estilos de botón y acciones interactivas utilizando solicitudes de LLM antes de guardar o publicar su borrador.
El workspace del editor con panel de mensajes y vista previa en tiempo real.
Personalizar Rich Visuals: En el editor, escriba instrucciones en lenguaje natural en el cuadro de chat y haga clic en Send para actualizar diseños, texto, estilos y acciones (carga útil, abrir URL, llamar a número) y elementos de UI basados en escenarios. En la vista previa puede ver los cambios de UI en la página al instante.
Por ejemplo:
- Actualizar texto: "Change all button labels from 'Chat with us' to 'View details.'"
- Actualizar acción: "Update the 'View details' button on the 1st card to open the link https://www.company.com/view."
- Actualizar acción: "Update the 'View details' button on the 2nd card to call +112345678."
- Actualizar estilo: "Highlight the 1st button style to primary."
- Actualizar escenario: "Convert the form to a doctor appointment booking."
Panel de ejemplos de instrucciones, accesible en el cuadro de entrada de instrucciones.
Ejemplos de instrucciones: Haga clic en cualquier ejemplo de instrucción para rellenar el cuadro, edite el texto si es necesario y haga clic en Send para actualizar al instante. Acceda a estos ejemplos haciendo clic en el icono morado al lado izquierdo del cuadro de entrada para una personalización rápida.
Guardar: Haga clic en Save para guardar el Rich Visual como borrador. Puede volver y reanudar la edición en cualquier momento.
Publicar: Haga clic en Publish para publicar el Rich Visual con un número de versión actualizado. Los agentes de AI utilizan solo la versión más reciente en sus instrucciones.
Previsualización de Rich Visuals
Vista previa en el widget de chat: Haga clic en el icono de vista previa para ver instantáneamente su widget de chat y utilice los botones a la derecha para cambiar entre los modos "Expanded," "Side," o "Compact"
Vista previa del Rich Visual en el widget de chat.
Vista previa del esquema JSON: Haga clic en el icono JSON para obtener una vista previa del esquema subyacente que da lugar a la representación visual —la referencia para el estado del elemento de la interfaz de usuario que utiliza contenido dinámico o datos procedentes de las APIs.
Vista previa en paralelo del widget de chat y su JSON Schema.
Guardar y publicar Rich Visuals
- Guardar: Haga clic en Save para guardar el Rich Visual como borrador. Puede volver y reanudar la edición en cualquier momento.
- Publicar: Haga clic en Publish para publicar el Rich Visual con un número de versión actualizado. Los agentes de AI utilizan solo la versión más reciente en sus instrucciones.
- Versión: Cada Rich Visual mantiene solo una versión publicada activa. Al hacer clic en Edit se crea un borrador de trabajo y, al publicarlo, se archiva automáticamente la versión actual, que puede restaurar en cualquier momento.
Configurar el Rich Visuals Skill en la plataforma del agente AI
Añadir Variables
Flujo del agente de AI con el panel Variables abierto.
Agregue variables: En el flujo del agente de AI puede encontrar dos variables clave que le ayudan a administrar sus Rich Visuals. La variable template_name almacena y transmite el nombre único del elemento visual que ha creado en el Rich Visual Builder, lo que garantiza que se muestre el diseño correcto. La variable rich_ui_state asigna los datos de una API, si es necesario, al estado adecuado de la UI.
Establezca el nombre de la plantilla: En el agente de AI, establezca el nombre de la plantilla en las instrucciones del subagente.
Por ejemplo, establezca el valor appointment_button en la variable {template_name} antes de ejecutar la habilidad "main menu rich ui"
Configurar Rich UI Skill sin estado
Esta configuración permite una Rich UI dentro del flujo del agente de AI utilizando contenido totalmente estático. Estos componentes visuales, predefinidos a través del Rich Visuals Builder, se representan directamente dentro del flujo sin depender de las APIs o de la recuperación de datos dinámicos.
- Add Rich UI skill: Añada la habilidad de Rich UI a un subagente.
- New workflow: Crea un nuevo flujo de trabajo para la habilidad de Rich UI
Flujo de subagente con la habilidad de Rich UI incluida.
Editar el flujo de trabajo:
- Start Flow — Variable: Cadena - template_name.
-
Execute Action - Generate Rich UI:
- Connection: seleccione la integración de Rich UI anterior.
- Action: seleccione la acción anterior de la integración de RIch UI.
- Input: template_name = template_name; last_received_message_metadata = Last received message metadata (system variable).
Inicio del flujo de trabajo de la habilidad de Rich UI
Execute Action: Genera el panel de configuración de la Rich UI
Configurar la habilidad de Rich UI con un tipo de estado
Esta configuración permite un Rich Visual dentro del flujo del agente de AI mediante datos dinámicos en tiempo real. Al conectarse a las APIs, los componentes visuales se llenan y se representan en función de la información entrante.
- Add Rich UI skill: Añada la habilidad de Rich UI a un subagente.
- New workflow: Crea un nuevo flujo de trabajo para la habilidad de Rich UI
- Set up integration for the API: Configure la integración para los datos utilizados por el Rich Visual procedentes de la API.
Flujo de subagente configurado con una integración API externa.
Edite el flujo de trabajo:
- Start Flow — Variable: String - template_name.
-
Execute Action - 3rd API:
- Connection: seleccione la integración de API externa anterior.
- Action: seleccione la acción anterior de la integración de API externa.
- Outputs: Workflow.rich_ui_input.
- Function - Build Rich UI State: A partir del resultado de "Execute Action - API", vincule los datos de la API al estado de la UI. Consulte el JSON Schema del Rich Visual creada en el Builder para la asignación.
-
Execute Action - Create Rich UI:
- Connection: seleccione la integración de Rich UI anterior.
- Action: seleccione la acción anterior de la integración de RIch UI.
- Inputs: template_name = template_name; last_received_message_metadata = Last received message metadata (system variable); state = rich_ui_state.
Función que asigna la salida de la API al estado de la Rich UI
Execute Action: crea el panel de configuración de Rich UI
Previsualización de Rich UI en tiempo real y solución de problemas
Prueba de Rich Visuals: El módulo AI Agent Platform's Test Orchestration solo admite la salida de chat en formato de texto durante las pruebas del flujo de trabajo del agente. No proporciona una vista previa en tiempo de ejecución de los componentes de Rich UI dentro del canvas de prueba.
Para validar la ejecución del flujo, utilice el seguimiento del flujo de trabajo del agente para inspeccionar la progresión y publique su configuración del agente para obtener una vista previa del Rich Visual dentro del widget de chat externo.
Nota: La vista previa en tiempo de ejecución y dentro de la prueba de los elementos visuales de Rich UI está planeada para una actualización futura.
Módulo Test Orchestration que muestra la salida de chat en texto.