Work with cards in bot conversations

Feature coming soon

Cards are bot responses that contain an image, title, body, and list of buttons. Customers can interact with the cards by clicking a button. Cards contain two types of buttons: text back and web URL. Text back buttons become part of the message sent back to the bot and become part of the conversation. Web URL buttons allow customers to access relevant websites quickly and enable you to provide further details on your products or offerings. Cards do not disappear after customers engage with them; therefore, they can interact with the cards more than once.

Example: Cards in Genesys Web Messenger

Cards in Genesys Web Messenger example

Cards are similar to quick replies and allow for fast and structured responses, enabling you to offer simple, guided answers to direct messages by giving customers a list of options. Cards provide a more sophisticated description of products and services by introducing images, titles, body texts, and optional referrals to external websites. Card replies facilitate bot conversations by enhancing the customer’s automated experience and more expediently resolving problems.

On most channels, cards are most beneficial when you limit their list of buttons to three options.

Currently supported bots:

  • Amazon Lex v1
  • Google Dialogflow ES + CX
  • BYOB Connector

Currently supported channels:

  • Facebook Messenger
  • Genesys Web Messenger
  • LINE
  • WhatsApp Messenger

When you configure cards in WhatsApp, keep the following considerations in mind:

  • WhatsApp supports up to three buttons with cards. If you configure more than three buttons, an error occurs.
  • WhatsApp support is limited to text back buttons. WhatsApp does not support URL buttons.
  • WhatsApp does not support actions. On other platforms, you can set an overall action that is performed when you click an image on a card, an action occurs. With WhatsApp, if you include an overall action such as actions, an error occurs.
  • The customer can select each text back button once and is not limited to a single choice. Your bot behavior should account for scenarios in which the user may select multiple options.
  • Cards that include an image or video do not display in a title. When you use text only, the title displays.

For example, if you configure a card with a title of “50% off Flights to Norway” and include an image, the title does not appear:

If you configure the card with a title and no image, the title appears in the card:

    Amazon Lex v1

    These sections describe how to incorporate cards into your Amazon Lex V1 bot, and include use case examples and other resources.

    1. Install the Amazon Lex integration from Genesys AppFoundry.
    2. Configure the IAM role with permissions for the Amazon Lex app.
    3. Configure and activate the Lex integration in Genesys Cloud.
    4. To set up card options in the AWS Lex Console, use this custom JSON to define the cards for your bot’s intent: 
    {
         "genesys_prompt": "String", // optional, used during Beta to prevent empty speech bubbles in Agent UI
         "genesys_carousel": [
              {
                   "image": "URL", // optional, a URL pointing to the image shown in the card
                   "title": "String", // mandatory, card's title line
                   "description": "String", // optional, card's body text explaining its purpose
                   "components": [
                        {
                             "title": "String", // mandatory, button label shown to the user
                             "actions": {
                                 "textback": "String" // mandatory, button value sent back to the bot
              }
                   },
                        {
                             "title": "String",
                             "actions": {
                                  "url": "URL" // mandatory, URL to refer the user to on button click
                             },
                        }
                   ]
              }
         ]
    }
    Note: You can also set up cards via the AWS UI.

    To use card options to fill your bot’s slot, use the AWS Console card editor:

    Click the image to enlarge.

    Note: Web URL buttons are only supported via custom JSON. For more information, see the next section.
     

    To use card options to switch between your bot’s intents, in the AWS Lex Console, copy the custom JSON from the previous section into the Response input field:

    Click the image to enlarge.

    Learn more:

    Google Dialogflow ES and CX

    These sections describe how to incorporate cards into your Google Dialogflow ES or CX bot, and include use case examples and other resources.

    1. Install the Google Dialogflow integration from Genesys AppFoundry.
    2. Configure the Google Dialogflow platform service account credential.
    3. Configure the OAuth client credential for Google Dialogflow.
    4. Enable the Google Dialogflow integration.
    5. To set up cards in the Dialogflow console, use this custom JSON to define card options for your bot’s intent:

    {
         "genesys_prompt": "String", // optional, used during Beta to prevent empty speech bubbles in Agent UI
         "genesys_carousel": [
                   {
                        "image": "URL", // optional, a URL pointing to the image shown in the card
                        "title": "String", // mandatory, card's title line
                        "description": "String", // optional, card's body text explaining its purpose
                        "components": [
                             {
                                  "title": "String", // mandatory, button label shown to the user
                                  "actions": {
                                       "textback": "String" // mandatory, button value sent back to the bot
                                  }
                             },
                             {
                                  "title": "String",
                                  "actions": {
                                       "url": "URL" // mandatory, URL to refer the user to on button click
                             },
                        }
                   ]
              }
         ]
    }

    To use card options to switch between your bot’s intents, in the Dialogflow console, add the custom JSON from the previous section into the Response input field:

    Click the image to enlarge.

    To use the card options to fill your bot’s slot, use the custom JSON from the previous section into a webhook. You can also use an AWS lambda for this purpose.

    Learn more:

    Bot Connector

    These sections describe how to incorporate Cards into your Genesys Bot Connector bot, and include other resources.

    1. Create a bot that adheres to Genesys BYOB specifications. (add link once available)
    2. Configure the Genesys Bot Connector integration.
    3. Use Genesys Normalized Format to define Cards (need link?)