2

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

sid8491
  • 6,622
  • 6
  • 38
  • 64
Murat
  • 55
  • 2
  • 6

1 Answers1

7

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.

sid8491
  • 6,622
  • 6
  • 38
  • 64
  • also, you need to check "messaging_postbacks" events in the Webhooks in messenger settings in the Facebook app to make buttons of carousel work. – sid8491 Dec 05 '17 at 06:21
  • Thanks that's really helpful. I can do it by using console. But i couldn't find a code example or post message sample for carousel. Is there any example ? Thanks.. – Murat Dec 05 '17 at 10:28
  • @Murat, I have updated the answer and added the sample code. let me know if you have any confusion. vote and mark as accepted answer if it fulfill your purpose. – sid8491 Dec 05 '17 at 18:07
  • This response should be marked as an accepted answer. Good job @sid8491 on providing a detailed response. You would want to put the message_postback option selection thing a part of your response instead of leaving it out in comment here – Saurabh Dec 05 '17 at 19:59
  • Thanks. This response message is really great example. – Murat Dec 06 '17 at 08:19
  • @Murat consider marking it as accepted answer if it helped you so that it can reach wider audience – sid8491 Dec 12 '17 at 20:10