Want to add carousel to webchat

Rasa Open Source
1

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

2

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

1 Like
3

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’

error
error1422×281 18 KB

4

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!

5

Thanks @humcasma its worked

6

I have been added this code like this:

Screenshot (261)
Screenshot (261)1920×1080 221 KB

But getting this response from the messenger.

1623660944201
16236609442011080×1732 269 KB

What was the mistake?

7

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.

8

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

9

Hi @AbuIshak , did you find a solution to your problem? I’m getting proper carousel output in my webchat but in Teams messenger I’m getting the same json output like yours. Thanks in advance!

10

Thanks for your solution, however do you know how to make dynamic numbers of elements instead of hard coding number of the elements inside it using python?

11

Can we also add card when using Botfront UI. Any suggestions would be helpful.