Custom Rasa/webchat and facebook messenger carousel - [Deprecated] Rasa X Community Edition - Rasa Community Forum

Custom Rasa/webchat and facebook messenger carousel

post by jpvgc45 on Aug 2, 2020

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)

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

post by AbuIshak on Jun 12, 2021

hay @jpvgc45 do you have solutions for this post?

post by earroyoh on Jun 12, 2021

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

post by AbuIshak on Jun 13, 2021

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

post by AbuIshak on Jun 15, 2021

dear @earroyoh unfortunately I can’t make it. I have been added this code like this:

# Screenshot

But getting this response from the messenger.

# Error Image

What was the mistake, any idea?

post by bharath-madduri on Apr 14, 2022

@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"
            }
          ]
        }
      ]
    }
  }
}

dispatcher.utter_message(json_message=test_carousel)

post by bharath-madduri on Apr 14, 2022

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

post by xpcrts on Apr 28, 2022

Great sharing, thanks.

post by xpcrts on May 3, 2022

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

post by bharath-madduri on May 4, 2022

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