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