Rasa Webchat Carousel Example

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

3 Likes

Sure, it works nice.

Yes, with a json message, it works perfectly.

@n2718281 Could you give an example code pls?

Sure you have a basic example here:

You have to convert it to yaml if you use it in your domain.

1 Like

Hi, can you please give short example? I tried to response the following json:

msg = {"attachment":{
    "type":"template",
    "payload":{
      "template_type":"generic",
      "elements":[
         {
          "title":"Welcome!",
          "image_url":"https://petersfancybrownhats.com/company_image.png",
          "subtitle":"We have the right hat for everyone.",
          "default_action": {
            "type": "web_url",
            "url": "https://petersfancybrownhats.com/view?item=103",
            "webview_height_ratio": "tall",
          },
          "buttons":[
            {
              "type":"web_url",
              "url":"https://petersfancybrownhats.com",
              "title":"View Website"
            },{
              "type":"postback",
              "title":"Start Chatting",
              "payload":"DEVELOPER_DEFINED_PAYLOAD"
            }              
          ]      
        }
      ]
    }
  }
}

with dispatcher.utter_message(text=’’, attachment=msg), but there is no output.

Thanks for your support!

You can use below from custom actions.

test_carousel = {
        "type": "template",
        "payload": {
            "template_type": "generic",
            "elements": [{
                "title": "Title",
                "subtitle": "Subtitle",
                "image_url": "/static/images/test.png",
                "buttons": [{
                    "title": "Link name",
                    "url": "http://link.url",
                    "type": "web_url"
                },
                    {
                        "title": "postback name",
                        "type": "postback",
                        "payload": "/greet"
                    }
                ]
            },
                {
                    "title": "Title",
                    "subtitle": "Subtitle",
                    "image_url": "/static/images/test.png",
                    "buttons": [{
                        "title": "Link name",
                        "url": "http://link.url",
                        "type": "web_url"
                    },
                        {
                            "title": "postback name",
                            "type": "postback",
                            "payload": "/greet"
                        }
                    ]
                }
            ]
        }
    }
    dispatcher.utter_message(attachment=test_carousel)

So to add a carousel, I only have to add this source code in actions.py? Or how ?

Yes , inside actions.py file , you can dispatch the above message from run method using dispatcher.utter_message(Carousel)

Thanks, it’s work

1 Like

correct

@rakacendekia, @rahul_namdev Can you please share the domain and action complete code with respect to the carousel only, please…

@rakacendekia @sibbsnb Could you please send me a test code . I did the same but it shows no output. Thanks in advance

       test_carousel = {
            "type": "template",
            "payload": {
                "template_type": "generic",
                "elements": [{
                    "title": "sample text",
                    "subtitle": "",
                    "image_url": "/static/images/test.png",
                    "buttons": [ {
                            "title": "button title",
                            "type": "postback",
                            "payload": "/test_intent{\"choice_id\": 1}"
                        }
                    
                        ]
                    }
                ]
            }
        }
        dispatcher.utter_message(attachment=test_carousel)

you can use above code for carousel

Hey I Put the code in my actions.py but its not working do i have to do something else?

Getting this error

Task exception was never retrieved future: <Task finished name=‘Task-2’ coro=<configure_app..run_cmdline_io() done, defined at c:\users\user\anaconda3\envs\medi\lib\site-packages\rasa\core\run.py:132> exception=TypeError(‘can only concatenate str (not “dict”) to str’)

hi @rahul_namdev when I add this code nothing showing in the output

Try this in your actions.py file

dispatcher.utter_message(attachment= {
        "type": "template",
        "payload": {
            "template_type": "generic",
             "dims": {
            "width": 200,
            "height": 200
          },
            "elements": [{
                "title": "Title",
                "subtitle": "",
                "image_url": "img url",
                "dims": {
            "width": 50,
            "height": 50
          },
                "buttons": [
                    {
                       "title": "title of the button",
                        "type": "postback",
                        "payload": "/{intent_name}"
                    },
                   


                  
                  {
                        "title": "title of the button",
                        "type": "postback",
                        "payload": "/{intent_name}"
                    }   
             ,

                  
                  {
                       "title": "title of the button",
                        "type": "postback",
                        "payload": "/{intent_name}"
                    } 
                 
                ]
            },
                
                
               {
                "title": "title",
                "subtitle": "",
                "image_url": "link to your image",
                 "dims": {
            "width": 50,
            "height": 50
          },
                "buttons": [
                    {
                        "title": "title of the button",
                        "type": "postback",
                        "payload": "/{intent_name}"
                    }

                   ,

                  
                  {
                        "title": "title of the button",
                        "type": "postback",
                        "payload": "/{intent_name}"
                    }   
             
                  ,

                  
                  {
                        "title": "title of the button",
                        "type": "postback",
                        "payload": "/{intent_name}"
                    } 


                ]
            }
         
                           
    
            ]
        }
    })

You can try the above code in your actions.py or the code mentioned by @sibbsnb . Both are fine and should work for you.

hi. i tried adding the above code to actions.py but it doesnt show anything ): does this work in rasa x? im only testing my chatbot there. i hope someone can help me thank you!