Work with cards in bot conversations

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:

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 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.
                    }
              ]
         }
    ]
}

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

Click the image to enlarge.

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:

• About the Amazon Lex integration
• Using a Response Card in the AWS Developer Guide
• Response Cards in the Managing Messages page of the AWS Developers Guide

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

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:

Google Cloud Dialogflow ES example

Click the image to enlarge.

Google Cloud Dialogflow CX example

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. For more information, see Webhook for slot filling in the Google Cloud Dialogflow ES guide.

Learn more:

• About the Google Dialogflow integration
• Webhook for slot filling in the Google Cloud Dialogflow ES guide

1. Create a bot that adheres to Genesys Bot Connector specifications. 
2. Configure the Genesys Bot Connector integration.
3. Use the PostTextMessage Card Object to define cards.

Learn more:

• About Genesys Bot Connector
• postUtterance Response Example – Cards