Work with cards in bot conversations

Cards 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

Bot and channel support

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.

Note: Best practice recommends that you limit the number of bot selections on a single card to three options.

Currently supported bots:

Amazon Lex v1
Google Dialogflow ES
Google Dialogflow CX
Bot Connector

Currently supported channels:

Genesys Web Messenger
Facebook Messenger
Instagram
WhatsApp Messenger
Instagram
Open Messaging
Note: Before you can use this feature in Open Messaging, you must first create a configuration profile and select the appropriate Cards message type. Then, assign it to your open messaging integration. For more information, see Create and assign a configuration profile.

Considerations for cards implementation

When you design and implement card structures in your bot replies, consider this limitation:

Default actions are not supported for WhatsApp, LINE, or Twitter. If you configure default actions in these applications, then the applications ignore them.

Cards and WhatsApp MessengerClick to expand

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.
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.
WhatsApp does not support the defaultAction in the bot response for cards.
Cards that include an image or video do not display 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.

Install the Amazon Lex V1 integration and configure it for cardsClick to expand

Notes:

Default actions are not supported for WhatsApp, LINE, or Twitter. If you configure default actions in these applications, then the applications ignore them.
You can also set up cards via the AWS UI.

Install the Amazon Lex integration from Genesys AppFoundry.
Configure the IAM role with permissions for the Amazon Lex app.
Configure and activate the Lex integration in Genesys Cloud.
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 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.
                    }
              ]
         }
    ]
}

Use case: Slot fillingClick to expand

Use case: Intent switchingClick to expand

Learn moreClick to expand

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.

Install the Dialogflow ES integration and configure it for cardsClick to expand

Note: Default actions are not supported for WhatsApp, LINE, or Twitter. If you configure default actions in these applications, then the applications ignore them.

Install the Google Dialogflow integration from Genesys AppFoundry.
Configure the Google Dialogflow platform service account credential.
Enable the Google Dialogflow integration.
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 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.
                    }
              ]
         }
    ]
}

Use case: Intent switchingClick to expand