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:

  • Mensajero web de Genesys
  • Facebook Messenger
  • Instagram
  • Mensaje de Whatssap
  • Instagram

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.
  • 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.
  • WhatsApp no admite la defaultAction en la respuesta del bot para las tarjetas.
  • 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", // optional message text
        "genesys_carousel": [
             {
                  "title": "String", // mandatory cards title line
                  "description": "String", // optional cards body text explaining its purpose
                  "image": "URL", // optional a URL pointing to the image shown in the card
                  "defaultAction":  {
                        "type": "String", //Describes the type of action. Valid values Link Postback
                        "text": "String", //The response text from the button click
                        "payload": "String", // Text to be returned as the payload from a ButtonResponse when a button is clicked.
                        "url": "String" //A URL of a web page to direct the user to.
                  },
                  "actions": [
                        {                                       
                             "type": "String", //Describes the type of action.  Valid values Link Postback
                             "text": "String", //The response text from the button click
                             "payload": "String" // Text to be returned as the payload from a ButtonResponse when a button is clicked.
                        },
                        {
                             "type": "String", //Describes the type of action.  Valid values Link Postback
                             "text": "String", //The response text from the button click
                             "url": "String" //A URL of a web page to direct the user to.
                        }
                  ]
             }
        ]
    }

    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. Habilite la integración de Google Dialogflow.
    4. 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", // optional message text
        "genesys_carousel": [
             {
                  "title": "String", // mandatory cards title line
                  "description": "String", // optional cards body text explaining its purpose
                  "image": "URL", // optional a URL pointing to the image shown in the card
                  "defaultAction":  {
                        "type": "String", //Describes the type of action. Valid values Link Postback
                        "text": "String", //The response text from the button click
                        "payload": "String", // Text to be returned as the payload from a ButtonResponse when a button is clicked.
                        "url": "String" //A URL of a web page to direct the user to.
                  },
                  "actions": [
                        {                                       
                             "type": "String", //Describes the type of action.  Valid values Link Postback
                             "text": "String", //The response text from the button click
                             "payload": "String" // Text to be returned as the payload from a ButtonResponse when a button is clicked.
                        },
                        {
                             "type": "String", //Describes the type of action.  Valid values Link Postback
                             "text": "String", //The response text from the button click
                             "url": "String" //A URL of a web page to direct the user to.
                        }
                  ]
             }
        ]
    }

    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.