Clever Geek Handbook

Facebook Messenger sent error in permanent menu

I am trying to add a persistent NESTED menu to my chatbot. Facebook has a 3 button limit, but you can have a nested button with a maximum of 5 buttons.

This is the error I get when I run my code

Response body error

type: 'OAuthException',

Error: {message: '(# 100) Invalid keys "call_to_actions" were found in parameter "call_to_actions [0]"., Code: 100}

Here is my code:

function addPersistentMenu(){
  request({
    url: "https://graph.facebook.com/v2.6/me/thread_settings",
    qs: {access_token: token},
    method: "POST",
    json:{
      setting_type : "call_to_actions",
      thread_state : "existing_thread",
      call_to_actions : [
        {
          type: "nested",
          title: "Menu Item One",
          call_to_actions: [
            {
              type: "postback",
              title: "Nested Item One",
              payload: "NESTED_ONE"
            },
            {
              type: "postback",
              title: "Nested Item Two",
              payload: "NESTED_TWO"
            }
           ]
        },
        {
          type: "postback",
          title: "Menu Item Two",
          payload: "TWO"
        },
        {
          type: "postback",
          title: "Menu Item Three",
          payload: "THREE"
        }
      ]
    }
  }, function(error, response, body) {
      if(error){
        console.log('sending error')
        console.log('Error sending messages: ', error)
      }else if(response.body.error){
        console.log('response body error')
        console.log('Error: ', response.body.error)
      }
   });
}

When I remove the nested button the persistent menu appears, so I'm not sure what the error is. My code is pretty similar to the sample facebook posted to a persistent menu file . I am programming with node.js hosted on heroku and I have modeled my menu function following the code found here .

Question: Has anyone done this using webjook nodejs using npm request package to send requests to messenger? How do I add my nested persistent menu and what does this error mean?

Edit: When I use direct CURL POST through terminal using the exact command in the persistent menu documentation, a nested persistent menu is added. I'm not sure what to add to my nodejs webhook version of this request to make it work.

This is the CURL command:

curl -X POST -H "Content-Type: application/json" -d '{
  "persistent_menu":[
    {
      "locale":"default",
      "composer_input_disabled":true,
      "call_to_actions":[
        {
          "title":"My Account",
          "type":"nested",
          "call_to_actions":[
            {
              "title":"Pay Bill",
              "type":"postback",
              "payload":"PAYBILL_PAYLOAD"
            },
            {
              "title":"History",
              "type":"postback",
              "payload":"HISTORY_PAYLOAD"
            },
            {
              "title":"Contact Info",
              "type":"postback",
              "payload":"CONTACT_INFO_PAYLOAD"
            }
          ]
        },
        {
          "type":"web_url",
          "title":"Latest News",
          "url":"http://petershats.parseapp.com/hat-news",
          "webview_height_ratio":"full"
        }
      ]
    },
    {
      "locale":"zh_CN",
      "composer_input_disabled":false
    }
  ]
}' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=YOUR_ACCESS_TOKEN_HERE"
+3


source to share


1 answer


The Facebook Messenger API has been updated for nested persistent menus. The "call_to_actions" style still works for non-nested menus.

However, the submenu requires a different API call. The difference is that the URL must be in "messenger_profile" and not in "thread_settings". For some reason the 'get_started' handler is also required. Finally, the json array is named 'persistent_menu'.

I've updated the bot example on gitub. Enter "add menu" and "remove menu" to see the permanent menu appear / disappear. Some browsers may require a page reload or two.



Here is some sloppy nodejs code that should do the trick.

  function addPersistentMenu(){
 request({
    url: 'https://graph.facebook.com/v2.6/me/messenger_profile',
    qs: { access_token: PAGE_ACCESS_TOKEN },
    method: 'POST',
    json:{
  "get_started":{
    "payload":"GET_STARTED_PAYLOAD"
   }
 }
}, function(error, response, body) {
    console.log(response)
    if (error) {
        console.log('Error sending messages: ', error)
    } else if (response.body.error) {
        console.log('Error: ', response.body.error)
    }
})
 request({
    url: 'https://graph.facebook.com/v2.6/me/messenger_profile',
    qs: { access_token: PAGE_ACCESS_TOKEN },
    method: 'POST',
    json:{
"persistent_menu":[
    {
      "locale":"default",
      "composer_input_disabled":true,
      "call_to_actions":[
        {
          "title":"My Account",
          "type":"nested",
          "call_to_actions":[
            {
              "title":"Pay Bill",
              "type":"postback",
              "payload":"PAYBILL_PAYLOAD"
            },
            {
              "title":"History",
              "type":"postback",
              "payload":"HISTORY_PAYLOAD"
            },
            {
              "title":"Contact Info",
              "type":"postback",
              "payload":"CONTACT_INFO_PAYLOAD"
            }
          ]
        },
        {
          "type":"web_url",
          "title":"Latest News",
          "url":"http://foxnews.com",
          "webview_height_ratio":"full"
        }
      ]
    },
    {
      "locale":"zh_CN",
      "composer_input_disabled":false
    }
    ]
    }

}, function(error, response, body) {
    console.log(response)
    if (error) {
        console.log('Error sending messages: ', error)
    } else if (response.body.error) {
        console.log('Error: ', response.body.error)
    }
})

}
+4


source






More articles:


All Articles