Want to add carousel to webchat

Hi there! im trying to implement a custom card carousel for my webchat as I saw here but I cant find any documentation or examples to use as a guide.

I would like to know if it is possible to implement this using Rasa Webchat or this widget too and how can I achieve this.

And one last question, is it possible to ‘generate’ the carousel in a custom action via dispatcher.utter_message() ?

Thanks in advance!!

using this widget you can add the carousel, but you need to customize it according to your need

1 Like

Getting this error and thanks for the reply

YamlValidationException: Failed to validate ‘D:\ll\domain.yml’. Please make sure the file is correct and all mandatory parameters are specified. Here are the errors found during validation: in D:\ll\domain.yml:40: Value 'ordereddict([(‘custom’, ordereddict([(‘payload’, ‘cardsCarousel’), (‘data’, [ordereddict([(‘image’, 'https://b.zmtcdn.com/data/pictures/1/17428541/da50010b1a953dfbb109306fba5a6c06.jpg’)])])]))])’ is not a list. Value path: ‘/responses/utter_cards_carousel’

Using Botfront´s Rasa web-chat UI and a custom action, you can generate and output a carousel like this:

class CustomAction(Action):

    async def run(self, dispatcher, tracker: Tracker, domain: Dict[Text, Any]) -> List[Dict[Text, Any]]:
        carousel = {
            "type": "template",
            "payload": {
                "template_type": "generic",
                "elements": [
                  {
                        "title": "...",
                        "subtitle": "...",
                        "image_url": "...",
                        "buttons": [{
                            "title": "...",
                            "url": "...",
                            "type": "web_url"
                            }#,
                            #{
                            #    "title": "postback name",
                            #    "type": "postback",
                            #    "payload": "/greet"
                            #}
                        ]
                  },
                  {
                        "title": "...",
                        "subtitle": "...",
                        "image_url": "...",
                        "buttons": [{
                            "title": "...",
                            "url": "...",
                            "type": "web_url"
                            }#,
                            #{
                            #    "title": "postback name",
                            #    "type": "postback",
                            #    "payload": "/greet"
                            #}
                        ]
                  },
                ]
            }
        }
       dispatcher.utter_message(attachment=carousel)        

        video = {
            "type": "video",
            "payload": {
                "title": "Coming Soon...",
                "type": "video",
                "src": "a url"
            }
        }
        dispatcher.utter_message(attachment=video)    

        return []

Hope it helps!

Thanks @humcasma its worked

I have been added this code like this:

But getting this response from the messenger.

What was the mistake?

Are you using Botfront´s Rasa web-chat UI as the frontend? If you are using it, I do not know what the problem can be, sorry.

Botfront’s rasa web-chat works okay. But Facebook Messenger is giving this response.