amazon-web-servicescarouselchatbotfacebook-chatbotamazon-lex

Creating carousel card in AWS Lex

I am trying to build a ecommerce chatbot using lex.

Is there any solution to use a carousel card or multi response cards in Lex?

For example:

enter image description here

Thanks..

Solution

  • You can display multiple response cards in the response and it will display like carousel. Follow this example to generate response card through console (you can also do it dynamically in code).

    Console method:
    In the below image, in Prompt response cards section, see in the rightmost part, there is little + button, click on that and you can add more cards.

    enter image description here

    Dynamic method (using Lambda): 

    'dialogAction': {
    'type': 'Close',
    'fulfillmentState': 'Fulfilled',
    'message': {
        'contentType': 'PlainText',
        'content': message
    },
    'responseCard': {
    'version': '0',
    'contentType': 'application/vnd.amazonaws.card.generic',
    'genericAttachments': [
        {
        'title': 'title1',
        'subTitle': 'subtitle1',
        'attachmentLinkUrl': 'link_that_will_open_on_click',
        'imageUrl': 'link_of_image_to_display',
        "buttons":[ 
             {
                "text":"button_1",
                "value":"value_to_be_sent_to_server_on_click"
             },
             {
                "text":"button_2",
                "value":"value_to_be_sent_to_server_on_click"
             },
             {
                "text":"button_3",
                "value":"value_to_be_sent_to_server_on_click"
             }
            ]
        },
        {
        'title': 'title2',
        'subTitle': 'subtitle2',
        'attachmentLinkUrl': 'link_that_will_open_on_click',
        'imageUrl': 'link_of_image_to_display',
        "buttons":[ 
             {
                "text":"button_1",
                "value":"value_to_be_sent_to_server_on_click"
             },
             {
                "text":"button_2",
                "value":"value_to_be_sent_to_server_on_click"
             },
             {
                "text":"button_3",
                "value":"value_to_be_sent_to_server_on_click"
             }
            ]
        },
        {
        'title': 'title3',
        'subTitle': 'subtitle3',
        'attachmentLinkUrl': 'link_that_will_open_on_click',
        'imageUrl': 'link_of_image_to_display',
        "buttons":[ 
             {
                "text":"button_1",
                "value":"value_to_be_sent_to_server_on_click"
             },
             {
                "text":"button_2",
                "value":"value_to_be_sent_to_server_on_click"
             },
             {
                "text":"button_3",
                "value":"value_to_be_sent_to_server_on_click"
             }
            ]
        }
    ]

    }
}

    NOTE 1: You can have maximum of 10 response cards in the carousel, and maximum of 3 buttons in a single carousel. If you have more than 10 cards, you will get error. If you have more than 3 buttons, you won't get error but only first 3 will be shown.
    NOTE 2: You need to check messaging_postbacks events in the Webhooks in messenger settings in the Facebook app to make buttons of carousel work.

    I have implemented response cards in below manner:

    enter image description here
    See cards are coming like carousel, you can swipe to see more cards.

    Hope it helps.