Agregar Adaptive Cards en AI Agents (Cognigy) para Virtual Agent Hub y NiCE CXone DX conversación

Adaptive Cards le permiten presentar contenido enriquecido y estructurado —como texto, imágenes y botones de acción— en una conversación en lugar de texto sin formato. AI Agents (Cognigy) admite de forma nativa las Adaptive Cards a través del nodo Say, por lo que puede diseñar una definición de tarjeta y renderizarla en cualquier canal conectado a través del Virtual Agent Hub, incluidos los canales de chat de DX NiCE CXone compatibles.

No todos los canales de chat de DX admiten Adaptive Cards. Por ejemplo, algunos canales de mensajería como WhatsApp pueden no admitir Tarjeta adaptable.

Este tema explica cómo agregar un Adaptive Card nativo a un nodo Say, hacer referencia a un Variable de contexto dentro de la tarjeta, previsualizar la tarjeta en AI Agents (Cognigy) y probarla en una interacción de chat DX de NiCE CXone.

Antes de comenzar

Verifique que:

  • Un proyecto AI Agents (Cognigy) con un Flujo que puede editar.

  • Virtual Agent Hub configurado y conectado a su proyecto de AI Agents (Cognigy). Consulte Setup AI Agents (Cognigy) Text Bot in Virtual Agent Hub para obtener más detalles.

  • A NiCE CXone DX CHAT canal creado y vinculado en Virtual Agent Hub.

Agregar un Adaptive Card Nativo a un Nodo Say

  1. En AI Agents (Cognigy), seleccione Build > Flujos.

  2. Seleccione el Flujo que desea editar, o seleccione el ícono de signo más (+) donde se debe agregar el nodo Say.

  3. Haga clic en el nodo Say para abrir el panel Editar Nodo.

    En Canales, asegúrese de que esté seleccionado el canal AI utilizado por Virtual Agent Hub. No seleccione el canal CXone al crear una Adaptive Card nativa.

  4. De la lista desplegable Tipo de Salida, seleccione Adaptive Card.

  5. En el campo de definición JSON, pegue el Adaptive Card JSON para su tarjeta. Un enlace arriba de este campo abre el Microsoft Adaptive Card Designer, una herramienta visual para crear y previsualizar tarjetas.

  6. En Adaptive Card Designer, cree o pegue el Diseño de su tarjeta y, luego, seleccione Copiar carga útil de tarjeta para copiar el JSON de la tarjeta.

  7. Regrese al nodo Say en AI Agents (Cognigy) y pegue el JSON copiado en el campo de definición JSON.

  8. AI Agents (Cognigy) muestra una vista previa en vivo de la tarjeta justo debajo del campo JSON para que pueda confirmar que se ve correctamente.

  9. Haga clic en Guardar Nodo para guardar el nodo.

Use a Variable de Contexto en un Adaptive Card

Puede hacer referencia a una variable de contexto dentro de una definición de Adaptive Card para que la tarjeta muestre datos dinámicos, como un nombre del cliente o un número de pedido.

  1. Asegúrese de que la variable de contexto esté completa antes de que se ejecute el nodo Say. El valor puede establecerse mediante un nodo Set Context o por otro proceso en el Flujo que complete el Contexto.

  2. Abra el nodo Say donde se configura el Adaptive Card.

  3. En la definición JSON de la tarjeta, haga referencia a la variable de contexto utilizando la sintaxis de AI Agents (Cognigy) Variable en el punto de la tarjeta donde debe aparecer el valor.

    Sintaxis:

    {"type": "TextBlock",

    "text": "{{context.dynamicVariable}}"}

    Ejemplo:

    {\"type\": \"TextBlock\",

    "text": "{{context.account_number}}"}

  4. Guarde el nodo y use el panel de interacción para probar que el valor de la Variable se muestre correctamente en la tarjeta.

    Durante la vista previa en AI Agents (Cognigy), las variables de contexto se muestran como marcadores de posición porque no se ha proporcionado ningún valor en tiempo de ejecución. El valor real se sustituye únicamente cuando se ejecuta el Flujo y la variable de contexto se completa.

Prueba el Adaptive Card en NiCE CXone DX Chat

Una vez que el nodo Say esté configurado y guardado, verifique que la tarjeta se renderice correctamente para los usuarios finales en el canal de chat de NiCE CXone DX.

  1. Confirme que AI Agents (Cognigy), el Virtual Agent Hub y el canal DX NiCE CXone estén completamente configurados y vinculados.

  2. Confirme que el Flujo esté configurado para activar el nodo Say que contiene el Adaptive Card (por ejemplo, cuando un usuario ingresa una palabra clave específica).

  3. Abra el canal de chat de DX NiCE CXone como usuario final y envíe el mensaje o la palabra clave que activa la tarjeta.

  4. Confirmar que el Adaptive Card se muestra como se espera en la ventana de chat.

Adaptive Card nativo frente a JSON personalizado en el Canal NiCE CXone

Las opciones de Tipo de Salida disponibles en un nodo Say dependen del canal que seleccione. Esto puede ser motivo de confusión cuando un Flujo utiliza tanto el canal AI nativo (Virtual Agent Hub/ NiCE CXone chat DX) como un canal CXone.

  • Canal AI (nativo, utilizado por Virtual Agent Hub y NiCE CXone DX chat): el nodo Say ofrece Adaptive Card como un Tipo de Salida dedicado. Pegue el JSON sin procesar de Adaptive Card directamente, y AI Agents (Cognigy) muestra una vista previa en vivo.

  • Canal de CXone: el nodo Say no ofrece una opción Adaptive Card. En su lugar, seleccione Custom Json como el Tipo de Salida y envuelva la definición de la tarjeta en la estructura específica de NiCE CXone, con los campos uiComponent, data y action.

  • Elija el Tipo de Salida que coincida con el canal seleccionado en el nodo Say. Una tarjeta creada para el tipo de salida de Adaptive Card del canal AI no se procesará correctamente si se pega en el campo Custom Json de un canal de CXone sin adaptarla a la estructura uiComponent/data/action, y viceversa.

  • Las implementaciones existentes de CXone Custom Json siguen funcionando y no se están eliminando. Sin embargo, las nuevas implementaciones deben usar la salida nativa de Adaptive Card siempre que sea posible, ya que es más sencilla de configurar, no requiere el wrapper/encabezado específico de CXone y proporciona una vista previa en vivo en el nodo Say.