Trabajar con tarjetas en conversaciones de bots

Las tarjetas contienen una imagen, un título, un cuerpo y una lista de botones. Los clientes pueden interactuar con las tarjetas haciendo clic en un botón. Las tarjetas contienen dos tipos de botones: texto atrás y URL web. Los botones de retroceso de texto se convierten en parte del mensaje enviado al bot y forman parte de la conversación. Los botones de URL web permiten a los clientes acceder rápidamente a sitios web relevantes y le permiten proporcionar más detalles sobre sus productos u ofertas. Las tarjetas no desaparecen después de que los clientes interactúan con ellas, por lo tanto, pueden interactuar con las tarjetas más de una vez.

Ejemplo: Tarjetas en Genesys Web Messenger

Tarjetas en Genesys Web Messenger

Las respuestas rápidas permiten respuestas rápidas y estructuradas, lo que le permite ofrecer respuestas sencillas y guiadas a mensajes directos eligiendo de una lista de opciones. Las tarjetas proporcionan una descripción más sofisticada de productos y servicios mediante la introducción de imágenes, títulos, textos corporales y referencias opcionales a sitios web externos. Las respuestas rápidas facilitan las conversaciones de los bots al mejorar la experiencia automatizada del cliente y resolver los problemas de manera más rápida.

Nota: Las mejores prácticas recomiendan limitar el número de selecciones de bots en una sola tarjeta a tres opciones.

Bots actualmente compatibles:

  • Amazon Lex V1
  • Google Dialogflow ES
  • Google Dialogflow CX
  • Conector de bot

Bots actualmente compatibles:

  • Facebook Messenger
  • Mensajero web de Genesys
  • LÍNEA
  • Mensaje de Whatssap
  • Instagram (beta)

Consideraciones sobre la aplicación de las tarjetas

Cuando diseñe e implemente estructuras de carrusel en sus respuestas de bots, tenga en cuenta estas limitaciones:

  • Las acciones predeterminadas no son compatibles con WhatsApp, LINE o Twitter. Si se configuran acciones por defecto en estas aplicaciones, éstas las ignoran.

Cuando configure tarjetas en WhatsApp, tenga en cuenta las siguientes consideraciones:

  • WhatsApp admite hasta tres botones con tarjetas. Si configura más de tres botones, se produce un error.
  • El soporte de WhatsApp se limita a los botones de retroceso de texto. WhatsApp no admite botones de URL.
  • WhatsApp no admite botones de URL. En otras plataformas, puede establecer una acción general para que cuando haga clic en una imagen de una tarjeta, se produzca una acción. Si incluye una acción general como comportamiento, se produce un error.
  • El cliente puede seleccionar cada botón de retroceso de texto una vez y no se limita a una sola opción. El comportamiento de su bot debe tener en cuenta escenarios en los que el usuario puede seleccionar múltiples opciones.
  • Las tarjetas que incluyen una imagen o un vídeo no muestran un título. Cuando usa solo texto, se muestra el título.

Por ejemplo, si configura una tarjeta con un título de "50% de descuento en vuelos a Noruega" e incluye una imagen, el título no aparece:

Si configura la tarjeta con un título y sin imagen, el título aparece en la tarjeta:

    Amazon Lex V1

    Estas secciones describen cómo incorporar respuestas rápidas en su bot de Amazon Lex V1 e incluyen ejemplos de casos de uso y otros recursos.

    Notas:
    • Las acciones predeterminadas no son compatibles con WhatsApp, LINE o Twitter. Si se configuran acciones por defecto en estas aplicaciones, éstas las ignoran.
    • También puede configurar tarjetas a través de la interfaz de usuario de AWS.
    1. Instale la integración de Amazon Lex desde Genesys AppFoundry.
    2. Configurar la función de IAM con permisos para la aplicación Amazon Lex.
    3. Configurar y activar la integración Lex en Genesys Cloud.
    4. Para configurar opciones de respuesta rápida en la Consola de AWS Lex, use este JSON personalizado para definir las respuestas para la intención de su bot: 
    {
         "genesys_prompt": "String", // texto del mensaje opcional
         "genesys_carousel": [
              {
                   "título": "String", // línea de título de las tarjetas obligatoria
                   Descripción: "String", // texto opcional del cuerpo de las tarjetas que explica su propósito
                   "imagen": "URL", // opcional una URL que apunte a la imagen mostrada en la tarjeta
                   "defaultAction":  {
                         "tipo": "String", //Describe el tipo de acción. Valores válidos Link Postback
                         "texto": "String", //El texto de respuesta del clic del botón
                         "carga útil": "String", // Texto que se devolverá como carga útil de un ButtonResponse cuando se haga clic en un botón.
                         "url": "String" /Una URL de una página web a la que dirigir al usuario.
                   },
                   "acciones": [
                         { 
                              "tipo": "String", //Describe el tipo de acción.  Valores válidos Link Postback
                              "texto": "String", //El texto de respuesta del clic del botón
                              "carga útil": "String" // Texto que se devolverá como carga útil de un ButtonResponse cuando se haga clic en un botón.
                         },
                         {
                              "tipo": "String", //Describe el tipo de acción.  Valores válidos Link Postback
                              "texto": "String", //El texto de respuesta del clic del botón
                              "url": "String" /Una URL de una página web a la que dirigir al usuario.
                         }
                   ]
              }
         ]
    }

    Para usar las opciones de la tarjeta para llenar la ranura de su bot, use el editor de tarjetas de la Consola de AWS:

    Haga clic en la imagen para ampliarla.

    Tarjetas en Amazon Lex V1

     

    Nota: Los botones de URL web solo se admiten a través de JSON personalizado. Para obtener más información, consulte la siguiente sección.
     

    Para usar las opciones de la tarjeta para cambiar entre las intenciones de su bot, en la Consola de AWS Lex, copie el JSON personalizado de la sección anterior en el campo de entrada Respuesta:

    Haga clic en la imagen para ampliarla.

    Configurar tarjetas en Amazon Lex V1

    Aprende más:

    Google Dialogflow CX

    Estas secciones describen cómo incorporar respuestas rápidas en su bot de Google Dialogflow ES e incluyen ejemplos de casos de uso y otros recursos.

    Nota: Las acciones predeterminadas no son compatibles con WhatsApp, LINE o Twitter. Si se configuran acciones por defecto en estas aplicaciones, éstas las ignoran.

    1. Instale la integración de Google Dialogflow desde Genesys AppFoundry.
    2. Configurar la credencial de la cuenta de servicio de la plataforma Google Dialogflow.
    3. Configure la credencial del cliente OAuth para Google Dialogflow.
    4. Habilite la integración de Google Dialogflow.
    5. Para configurar opciones de respuesta rápida en la consola de Dialogflow, use este JSON personalizado para definir opciones para la intención de su bot:
    {
         "genesys_prompt": "String", // texto del mensaje opcional
         "genesys_carousel": [
              {
                   "título": "String", // línea de título de las tarjetas obligatoria
                   Descripción: "String", // texto opcional del cuerpo de las tarjetas que explica su propósito
                   "imagen": "URL", // opcional una URL que apunte a la imagen mostrada en la tarjeta
                   "defaultAction":  {
                         "tipo": "String", //Describe el tipo de acción. Valores válidos Link Postback
                         "texto": "String", //El texto de respuesta del clic del botón
                         "carga útil": "String", // Texto que se devolverá como carga útil de un ButtonResponse cuando se haga clic en un botón.
                         "url": "String" /Una URL de una página web a la que dirigir al usuario.
                   },
                   "acciones": [
                         { 
                              "tipo": "String", //Describe el tipo de acción.  Valores válidos Link Postback
                              "texto": "String", //El texto de respuesta del clic del botón
                              "carga útil": "String" // Texto que se devolverá como carga útil de un ButtonResponse cuando se haga clic en un botón.
                         },
                         {
                              "tipo": "String", //Describe el tipo de acción.  Valores válidos Link Postback
                              "texto": "String", //El texto de respuesta del clic del botón
                              "url": "String" /Una URL de una página web a la que dirigir al usuario.
                         }
                   ]
              }
         ]
    }

    Para usar las opciones de la tarjeta para cambiar entre las intenciones de su bot, en la consola de Dialogflow, agregue el JSON personalizado de la sección anterior en el campo de entrada Respuesta:

    Ejemplo de Google Cloud Dialogflow ES

    Haga clic en la imagen para ampliarla.

    Tarjetas en Google Dialogflow

    Ejemplo de Google Cloud Dialogflow CX

    Haga clic en la imagen para ampliarla.

    Tarjetas en Google Dialogflow CX

    Para usar las opciones de la tarjeta para llenar la ranura de su bot, use el JSON personalizado de la sección anterior en un webhook. También puede utilizar AWS Lambda para este propósito. Para más información, consulte Webhook for slot filling en la guía de Google Cloud Dialogflow ES.

    Aprende más:

    Conector de bot

    Estas secciones describen cómo incorporar respuestas rápidas en su bot de Genesys Bot Connector e incluyen otros recursos.