Custom Rasa/webchat and facebook messenger carousel

[Deprecated] Rasa X Community Edition
1

How can i setup a custom action that sends this carousel:

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)

to rasa webchat and to facebook messenger with facebook carousel format in the same action?

Facebook carousel format:

curl -X POST -H "Content-Type: application/json" -d '{
  "recipient":{
    "id":"<PSID>"
  },
  "message":{
    "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"
              }              
            ]      
          }
        ]
      }
    }
  }
}' "https://graph.facebook.com/v2.6/me/messages?access_token=<PAGE_ACCESS_TOKEN>"
2

hay @jpvgc45 do you have solutions for this post?

3

Try python requests.post method in custom action from i.e. sanic or flask modules.

1 Like
4

Thank you for your reply @earroyoh . I’ve got a solution for this as you mention python custom action.

1 Like
5

dear @earroyoh unfortunately I can’t make it. 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, any idea?

6

@jpvgc45 you need to add attachment key to the carousel and json_message in the dispatcher

test_carousel = {

        "attachment":

        {

            "type": "template",

            "payload": {

                "template_type": "generic",

                "elements": [

                    {

                        "title": "Title",

                         "subtitle": "subtitle",

                        "image_url": "url of the image",


                        "buttons": [

                            {

                                "title": "visit",

                                "url": "webpage url to open",

                                "type": "web_url"

                            }

                        ]

                    },

                    {

                        "title": "Title",

                         "subtitle": "subtitle",

                        "image_url": "url of the image",


                        "buttons": [

                            {

                                "title": "Title",

                                "url": "webpage url to open",

                                "type": "web_url"

                            }

                        ]

                    },

                    {

                        "title": "Title",

                         "subtitle": "subtitle",

                        "image_url": "url of the image",


                        "buttons": [

                            {

                                "title": "Title",

                                "url": "webpage url to open",

                                "type": "web_url"

                            }

                        ]

                    },

                    {

                        "title": "Title",

                        "subtitle": "subtitle",

                        "image_url": "url of the image",

                        "buttons": [

                            {

                                "title": "Title",

                                "url": "webpage url to open",

                                "type": "web_url"

                            }

                        ]

                    },

                    {

                        "title": "Title",

                        "subtitle": "subtitle",

                        "image_url": "url of the image",


                        "buttons": [

                            {

                                "title": "Title",

                                "url": "webpage url to open",

                                "type": "web_url"

                            }

                        ]

                    }

                ]

            }

        }

    }

    dispatcher.utter_message(json_message=test_carousel)
1 Like
7

Please follow the code which I have pasted above. It will work

1 Like
8

Great sharing, thanks.

9

Do you know how to make dynamic element instead of hard coding number of element below using python?

10

I can tell you for one button on rasa webchat , you can extend the same to fb. Here the data is your json/dict which has the information related to your carousels(fetched from database). you can optimize the below code.

carousel_list = []
for i in range(len(data)):
   empty_dict = {}        
   buttons = [{"title": "Title","url": "", "type": "web_url"}]
   empty_dict['title'] = data[i]['Title']
   empty_dict['subtitle'] = data[i]['Subtitle']  
   empty_dict['image_url'] = data[i]['image_url']
   empty_dict['buttons'] = buttons
   empty_dict['buttons'][0]['url'] = data[i]['image_url']
   carousel_list.append(empty_dict)

test_carousel = { "type": "template",
                          "payload": {
                          "template_type": "generic",
                          "elements": carousel_list                       
                              }     
                          }
1 Like