Facebook Messenger Nested Persistent Menu Error

Question

I'm trying to add a NESTED persistent menu to my chatbot. Facebook has a limit of 3 buttons 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 param "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 posted by facebook in their persistent menu doc. I'm programing using node.js, hosted on heroku and I modeled my menu function after the code found here.

Question: Has anyone done this using a nodejs webhook using the 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 a direct CURL POST via the terminal using the exact command in the persistent menu documentation, the 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"

Answer 1

The Facebook Messenger API has been updated for nested persistent menus. The 'call_to_actions' style appears to still work for a non-nested menu.

A nested menu needs a different API call however. The difference appears to be the URL must be to the 'messenger_profile' rather than 'thread_settings'. A 'get_started' handler is also required for some reason. Finally, the json array is named 'persistent_menu'.

I updated the example bot on gitub. Type 'add menu' and 'remove menu' to see the persistent menu appear/disappear. A page reload or two may be required on some browsers.

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

}