Bloque de flujo: Mostrar vista - Amazon Connect
DescripciónCasos de uso de este bloqueTipos de contactoTipos de flujo¿Cómo configurar este bloqueEscenarios de errorEntrada en el registro de flujoFlujos de ejemploMás recursos

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Bloque de flujo: Mostrar vista

Descripción

  • Utilice este bloque de flujo para crear step-by-step guías para los agentes que utilizan el espacio de trabajo de agentes de Amazon Connect. Estas guías son flujos de trabajo que proporcionan a sus agentes instrucciones para ayudarlos a interactuar de manera coherente con sus clientes.

  • Cuando un contacto se dirige a un flujo que incluye un bloque de visualización, se representa una plantilla de interfaz de usuario, denominada vista, en el espacio de trabajo del agente. Esta plantilla de interfaz de usuario representa una step-by-step guía.

Casos de uso de este bloque

Este bloque de flujo está diseñado para guiar a los agentes a través de los pasos necesarios para:

  • Realice tareas habituales para los clientes, como hacer reservas, gestionar los pagos y enviar nuevos pedidos.

  • Envía correos electrónicos basados en una plantilla que notifique al cliente acerca de una solicitud de reembolso enviada. La estructura del correo electrónico es siempre la misma, pero los valores específicos pueden variar, como el número de pedido, el importe del reembolso y la cuenta de pago. Puede configurar el bloque Mostrar vista para que el agente proporcione este tipo de información.

  • Cree nuevas entradas de CRM en el espacio de trabajo del agente existente. Utilice los atributos de contacto para rellenar previamente el formulario con la información relevante, como el nombre y el número de teléfono del cliente.

Tipos de contacto

Tipo de contacto ¿Se admite?

Voz

No

Chat

Sí

Tarea

No

Tipos de flujo

Puede utilizar este bloque en los siguientes tipos de flujo:

Tipo de flujo ¿Se admite?

Flujo de entrada

Sí

Flujo de cola de clientes

Sí

Flujo de puesta en espera del cliente

No

Flujo de tono de clientes

No

Flujo de tono saliente

No

Flujo de puesta en espera del agente

No

Flujo de tono de agente

No

Flujo de transferencia a agente

No

Flujo de transferencia a cola

No

¿Cómo configurar este bloque

Puede configurar el bloque Mostrar vista mediante el sitio web de Amazon Connect administración o mediante la ShowViewacción en el idioma Amazon Connect Flow.

Elija el recurso de visualización

Amazon Connect incluye un conjunto de vistas a las que puede añadir el espacio de trabajo de su agente. La vista se especifica en el cuadro Ver, como se muestra en la siguiente imagen:

La página de propiedades del bloque Mostrar vista.

A continuación, se incluye una breve descripción de estas vistas AWS administradas. Para obtener información detallada sobre cada una de ellas, consulteAWS vistas gestionadas.

  • Vista detallada. Muestre la información a los agentes y bríndeles una lista de las acciones que pueden realizar. Un uso común de la Vista de detalles es mostrar al agente una pantalla emergente al inicio de una llamada.

  • Vista de lista. Muestra la información como una lista de elementos con títulos y descripciones. Los elementos pueden actuar como enlaces con acciones adjuntas. Opcionalmente, también es compatible con la navegación inversa estándar y el encabezado de contexto persistente.

  • Vista de formulario. Proporcione a sus agentes campos de entrada para recopilar los datos necesarios y enviarlos a los sistemas administrativos. Esta vista consta de varias secciones con un estilo de sección predefinido con un encabezado. El cuerpo consta de varios campos de entrada dispuestos en un formato de columna o cuadrícula.

  • Vista de confirmación. Una página para mostrar los agentes una vez que se ha enviado un formulario o se ha completado una acción. En esta plantilla prediseñada, puede proporcionar un resumen de lo que ha sucedido, los próximos pasos y las instrucciones. La vista de confirmación admite una barra de atributos persistente, un icono o imagen, un título y un subtítulo, además de un botón de navegación para volver al inicio.

  • Vista de tarjetas. Le permite guiar a sus agentes presentándoles una lista de temas entre los que elegir tan pronto como acepten el contacto.

Las propiedades del bloque Mostrar vista se rellenan de forma dinámica en función del recurso de visualización que elija. Por ejemplo, si elige Formulario, configurará las acciones Siguiente y Anterior, que se muestran. Estas son solo algunas de las acciones de la vista.

La vista se estableció en Formulario y la Versión en 1.

En las siguientes secciones se explica cómo configurar las acciones del formulario de forma manual, dinámica o mediante la opción JSON.

Cómo utilizar la opción Establecer manualmente

  1. En la página de propiedades, en la sección Ver, selecciona Formulario en el menú desplegable y establece Usar versión en 1, el valor predeterminado. La siguiente imagen muestra una página de propiedades configurada con estas opciones.

    La vista se estableció en Formulario y la Versión en 1.

  2. La página de propiedades muestra un conjunto de campos basados en la vista del formulario. Elija Establecer manualmente e introduzca el texto que desee renderizar en los componentes de la interfaz de usuario de View. La siguiente imagen muestra los componentes de la interfaz de usuario siguiente y anterior. El nombre para mostrar de los componentes se ha establecido manualmente en Siguiente y Anterior. Esto es lo que aparecerá en el espacio de trabajo del agente cuando se renderice la step-by-step guía.

    Los componentes de la interfaz de usuario siguiente y anterior se configuran manualmente.

Cómo utilizar la opción Establecer dinámicamente

  1. En la página de propiedades, en la sección Ver, selecciona Formulario en el menú desplegable y establece Usar versión en 1, el valor predeterminado. La siguiente imagen muestra una página de propiedades configurada con estas opciones.

    La vista se estableció en Formulario y la Versión en 1.

  2. La página de propiedades muestra un conjunto de campos basados en la vista del formulario. Elija Establecer dinámicamente. En el menú desplegable del espacio de nombres, elija el atributo de contacto y, a continuación, elija la clave. La siguiente imagen muestra un encabezado que se representará de forma dinámica en la step-by-step guía para mostrar el apellido del cliente.

    Un encabezado en la plantilla de interfaz de usuario de View.

Cómo utilizar la opción Establecer JSON

En esta sección se explica un ejemplo de cómo utilizar la opción Establecer JSON.

  1. En la sección Ver de la página de propiedades del bloque Mostrar vista, selecciona Formulario en el menú desplegable y establece Versión en 1, el valor predeterminado. Estas opciones se muestran en la siguiente imagen.

    La vista se estableció en Formulario y la Versión en 1.

  2. Al elegir la vista de formulario, el esquema de entrada de la vista se muestra en la página de propiedades. El esquema tiene las siguientes secciones en las que puede agregar información: Secciones AttributeBar, Atrás, Cancelar ErrorText, Editar y más.

  3. La siguiente imagen muestra el AttributeBarparámetro y la opción Establecer mediante JSON. Para ver todo el JSON que ha pegado, haga clic en la esquina del cuadro y tire hacia abajo.

    Los parámetros de entrada.
    sugerencia

    Corrija cualquier error si el código JSON no es válido. En la siguiente imagen se muestra un ejemplo de mensaje de error porque sobra una coma.

    Un mensaje de error que indica que el código JSON no es válido.

  4. Elija Guardar y publique cuando esté listo.

El siguiente ejemplo de código muestra cómo la ShowViewacción representaría esta misma configuración en el lenguaje Flow:

{
      "Parameters": {
        "ViewResource": {
          "Id": "arn:aws:connect:us-west-2:aws:view/form:1"
        },
        "InvocationTimeLimitSeconds": "2",
        "ViewData": {
          "Sections": "Sections",
          "AttributeBar": [
            {
              "Label": "Example",
              "Value": "Attribute"
            },
            {
              "Label": "Example 2",
              "Value": "Attribute 2"
            },
            {
              "Label": "Example 3",
              "Value": "Case 123456",
              "LinkType": "case",
              "ResourceId": "123456",
              "Copyable":true
            },
            {
              "Label": "Example 3",
              "Value": "Case 123456",
              "LinkType": "case",
              "ResourceId": "https:example.com"
            }
          ],
          "Back": {
            "Label": "Back"
          },
          "Cancel": {
            "Label": "Cancel"
          },
          "Edit": "Edit",
          "ErrorText": "ErrotText",
          "Heading": "$.Customer.LastName",
          "Next": "Next",
          "Previous": "Previous",
          "SubHeading": "$.Customer.FirstName",
          "Wizard": {
            "Heading": "Progress tracker",
            "Selected": "Step Selected"
          }
        }
      },
      "Identifier": "53c6be8a-d01f-4dd4-97a5-a001174f7f66",
      "Type": "ShowView",
      "Transitions": {
        "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
        "Conditions": [
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Back"
              ]
            }
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Next"
              ]
            }
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "Condition": {
              "Operator": "Equals",
              "Operands": [
                "Step"
              ]
            }
          }
        ],
        "Errors": [
          {
            "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
            "ErrorType": "NoMatchingCondition"
          },
          {
            "NextAction": "7c5ef809-544e-4b5f-894f-52f214d8d412",
            "ErrorType": "NoMatchingError"
          },
          {
            "NextAction": "b88349e3-3c54-4915-8ea0-818601cd2d03",
            "ErrorType": "TimeLimitExceeded"
          }
        ]
      }
    }

Los bloques de flujo se ramifican

La siguiente imagen muestra un ejemplo de un bloque de visualización configurado. Este bloque admite ramas condicionales, es decir, las ramas dependen de la vista seleccionada. También es compatible con las ramas Error y Timeout.

Un bloque Mostrar vista configurado.

  • Ramas condicionales: estas ramas se basan en la vista seleccionada en el bloque Mostrar vista. La imagen anterior muestra que el bloque está configurado para la vista de formulario y las siguientes acciones: Atrás, Siguiente y No coincidir.

    • Para esta configuración en particular, en tiempo de ejecución, el contacto del chat se redirige hacia las ramas Back o Next, en función de lo que el agente haga clic en la vista. Sin coincidencia solo es posible si el usuario tiene un componente de acción con un valor de Acción personalizado.

  • Error: si no se ejecuta (es decir, si no se representa la vista en el espacio de trabajo del agente o no se captura la acción de salida de la vista), se activa la rama Error.

  • Tiempo de espera: especifica cuánto tiempo debe tardar el agente en completar este paso de la step-by-step guía. Si el agente tarda más tiempo que el tiempo de espera en completar el paso (por ejemplo, el agente no proporcionó la información requerida en el período de tiempo especificado), ese paso pasa a la rama de tiempo de espera.

    Cuando se agota el tiempo de espera de un paso, la step-by-step guía puede seguir la lógica definida en el flujo para determinar el siguiente paso. Por ejemplo, el siguiente paso podría ser volver a intentar solicitar información o dejar de utilizar la guía.

    En este momento, el cliente está conectado con el agente, por lo que no se produce ningún cambio en la experiencia del cliente debido al tiempo de espera.

Consejos de configuración adicionales

Asigne el siguiente permiso de perfil de seguridad a los agentes para que puedan usar las step-by-step guías:

  • Aplicaciones de los agentes, vistas personalizadas, todas: este permiso permite a los agentes ver las step-by-step guías en su espacio de trabajo.

Asigne el siguiente permiso de perfil de seguridad a los gerentes y analistas empresariales para que puedan crear las step-by-step guías:

  • Canales y flujos: vistas: este permiso permite a los administradores crear step-by-step guías.

Para obtener información acerca de cómo agregar más permisos a un perfil de seguridad existente, consulte Actualizar perfiles de seguridad.

Datos generados por este bloque

En tiempo de ejecución, el bloque Show view genera datos que son la salida cuando se ejecuta el recurso View. Las vistas generan dos datos principales:

  • Actiontomadas en la interfaz de usuario de View-UI renderizada (en el espacio de trabajo del agente) y la ViewResultData que son los Output datos.

    Cuando se utiliza un bloque de visualización, Action representa una rama y se establece como atributo de $.Views.Action contacto en el espacio de nombres de Views.

  • Outputlos datos se configuran como atributo de $.Views.ViewResultData contacto en el espacio de nombres Views.

    Los valores Action y los Output datos vienen determinados por los componentes con los que el agente interactuó durante el uso del recurso de visualización.

Cómo utilizar estos datos en diferentes partes del flujo

  • Cuando el bloque reciba una respuesta de la aplicación cliente, para hacer referencia a los datos de salida en los flujos, utilice `$.Views.Action y$.Views.ViewResultData.

  • Cuando se utiliza una vista con el bloque Mostrar vista, Action representa una rama que se captura en el atributo de contacto en el espacio de nombres Views as$.Views.Action, y los datos de View Output se establecen en el atributo de $.Views.ViewResultData contacto.

  • Puede hacer referencia a los datos generados por el bloque Mostrar vistas utilizando la ruta JSON en los atributos de contacto (puede especificar los atributos de contacto en las opciones Establecer manualmente o Establecer JSON) o utilizando el menú desplegable del selector de atributos si elige Establecer dinámicamente.

Escenarios de error

Un contacto se enruta por la ramificación Error en las siguientes situaciones:

  • Amazon Connect no puede capturar la acción del usuario en un componente de View UI en el espacio de trabajo del agente. Esto puede deberse a un problema de red intermitente o a un problema en el servicio multimedia.

Entrada en el registro de flujo

Los registros de flujo de Amazon Connect le proporcionan detalles en tiempo real sobre los eventos de su flujo a medida que los clientes interactúan con él. Para obtener más información, consulte Seguimiento de eventos a medida que los clientes interactúan con flujos.

Siguiente ejemplo ShowView de entrada (registro de ingreso)

{
  "ContactId": "string",
  "ContactFlowId": "string",
  "ContactFlowName": "string",
  "ContactFlowModuleType": "ShowView",
  "Timestamp": "2023-06-06T16:08:26.945Z",
  "Parameters": {
    "Parameters": {
      "Cards": [
        {
          "Summary": {
            "Id": "See",
            "Heading": "See cancel options"
          }
        },
        {
          "Summary": {
            "Id": "Change",
            "Heading": "Change Booking"
          }
        },
        {
          "Summary": {
            "Id": "Get",
            "Heading": "Get Refund Status"
          }
        },
        {
          "Summary": {
            "Id": "Manage",
            "Heading": "Manage rewards"
          }
        }
      ],
      "NoMatchFound": {
        "Label": "Do Something Else",
        "type": "bubble"
      }
    },
    "TimeLimit": "300",
    "ViewResourceId": "cards"
  }
}

Siguiente ejemplo de ShowView salida (registro de egreso)

{
  "Results": "string",
  "ContactId": "string",
  "ContactFlowId": "string",
  "ContactFlowName": "string",
  "ContactFlowModuleType": "ShowView",
  "Timestamp": "2023-06-06T16:08:35.201Z"
}

Flujos de ejemplo

Puedes descargar un ejemplo del flujo del paso 2 en el siguiente blog: Cómo empezar con las step-by-step guías. Te recomendamos que sigas los pasos del blog para aprender a crear flujos configurados con vistas AWS gestionadas y a ejecutar estos flujos para los contactos multimedia entrantes.

Más recursos

Consulte los siguientes temas para obtener más información sobre las step-by-step guías y las vistas.