Nested Persistent Menu using Messenger Profile API

With each subsequent releases of messenger platform, there are improvements on functionality and user experience. The Messenger Platform 1.4 release offers several features. Among them, I am going to talk about Nested Persistent Menu today.

In previous post Add Persistent Menu and Buttons to your messenger bot , we have used Thread Settings API to add persistent menu. However, with the release of Messenger Profile API, we should use Messenger Profile API to access new features it offer. Moreover, Messenger Profile API is an enhancement to the Thread Settings API.

In this post, I will show how to set up multi level nested Persistent Menu for Facebook Messenger Bot.

Messenger Profile API

The Messenger Profile for your app is where you set properties that define various aspects of the following Messenger Platform features.

It provides a new Graph API endpoint for developers to share information on their bots such as target country, localization of greeting text and persistent menu. The Request URI for this API is:

https://graph.facebook.com/v2.6/me/messenger_profile?access_token=<PAGE_ACCESS_TOKEN>

Nested Persistent Menu

The persistent menu now allows for multiple, nested items to be built in, giving people a way to find and select from all the features that a bot offers. Developers also have the option to hide the composer and create a simple Messenger experience without conversational capabilities. Users can use these nested items within the persistent menu to drive bot interactions.

Here is sample code for creating nested menu using Messenger Profile API. To disable or hide the composer, set composer_input_disabled to true.

curl -X POST -H "Content-Type: application/json" -d '{
"persistent_menu":[
  {
    "locale":"default",
    "composer_input_disabled": true,
    "call_to_actions":[
      {
        "type":"postback",
        "title":"Latest Posts",
        "payload":"LATEST_POST_PAYLOAD"
      },
      {
        "title":"Categories",
        "type":"nested",
        "call_to_actions":[
          {
            "title":"PHP",
            "type":"postback",
            "payload":"CAT_PHP_PAYLOAD"
          },
          {
            "title":"Database",
            "type":"postback",
            "payload":"CAT_DB_PAYLOAD"
          },
          {
            "title":"Python",
            "type":"postback",
            "payload":"CAT_PYTHON_PAYLOAD"
          }
        ]
      },
      {
        "type":"web_url",
        "title":"Visit Website",
        "url":"http://thedebuggers.com/"
      }
    ]
  }
]
}' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

Here’s how it looks like:

In this way, we can add Multi level nested persistent menu to our Messenger Bot.

You may also like: Messenger Bot Subscription System Using Broadcast API in PHP