Facebook Messenger Bot Persistent Menu

Question

I am generating my first bot working with node.js and heroku but finding some difficulties to understand the persistent menu functionalities.

Question 1) How do can I attach event as callbacks?

function persistentMenu(sender){
 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:"postback",
              title:"FAQ",
              payload:"DEVELOPER_DEFINED_PAYLOAD_FOR_HELP"
            },
            {
              type:"postback",
              title:"I Prodotti in offerta",
              payload:"DEVELOPER_DEFINED_PAYLOAD_FOR_HELP"
            },
            {
              type:"web_url",
              title:"View Website",
              url:"https://google.com/"
            }
          ]
    }

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

}

Question 2) The only way I have found for empty the persistent menu and generating a new one is with a delete request via terminal ("as Facebook documented")m is there a possibily to clear inserting a refresh function on my app.js file?

curl -X DELETE -H "Content-Type: application/json" -d '{"setting_type":"call_to_actions","thread_state":"existing_thread"}' "https://graph.facebook.com/v2.6/me/thread_settingsaccess_token=PAGE_ACCESS_TOKEN"    

Answer 1

The FB API document states that the API link to hit for applying persistent menu to the page specific bot is:

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

Notice the me after version number i.e v2.6 in this specific case. However, this did not worked for a lot of people

There is small change in the API link to hit:

graph.facebook.com/v2.6/Page ID/messenger_profile?access_token=PAGE ACCESS TOKEN

Notice that me is replaced with the fb Page Id.

And the sample payload can still be the same:

{
  "get_started": {
    "payload": "Get started"
  },
  "persistent_menu": [
    {
      "locale": "default",
      "composer_input_disabled": false,
      "call_to_actions": [
        {
          "title": "Subscribe",
          "type": "postback",
          "payload": "subscribe"
        },
        {
          "title": "Stop notifications",
          "type": "nested",
          "call_to_actions": [
            {
              "title": "For 1 week",
              "type": "postback",
              "payload": "For_1_week"
            },
            {
              "title": "For 1 month",
              "type": "postback",
              "payload": "For_1_month"
            },
            {
              "title": "For 1 year",
              "type": "postback",
              "payload": "For_1_year"
            }
          ]
        },
        {
          "title": "More",
          "type": "nested",
          "call_to_actions": [
            {
              "title": "Fresh jobs",
              "type": "postback",
              "payload": "fresh jobs"
            },
            {
              "title": "Like us",
              "type": "web_url",
              "url": "https://www.facebook.com/onlysoftwarejobs/"
            },
            {
              "title": "Feedback",
              "type": "web_url",
              "url": "https://docs.google.com/forms/d/e/1FAIpQLScjgFRbfBLznO55kFIskcH_eFc23zRSUUxzIgv_o44uj0GMpw/viewform"
            }
          ]
        }
      ]
    }
  ]
}

Notice that it is mandatory to configure get_started button before setting up the persistent_menu.

Answer 2

If you want to disable the free text input, you shoud add the following parameter to your persistent menu request:

"composer_input_disabled": true

and not

composerinputdisabled :"TRUE"

Answer 3

The FB example robot is not well structured for call backs. I haven't found a good way to structure the example in Node callback or promise model. I'm sure a Node expert can reorg it.

As for the persistent menu, if you send an empty call_to_actions array the menu will disappear. The menu seems a bit 'sticky' however as it does not immediately appear/disappear when the message is sent.

I incorporated your snippet into my example robot. You can see it at

https://messenger.com/t/dynamicmemorysolutions

The source is at:

https://github.com/matthewericfisher/fb-robot

See the add/remove menu commands and functions.

EDIT: The persistent menu API has been updated. See this question for more details.

Answer 4

this worked for me:

    function menuButton() {
  var messageData = {
    setting_type : "call_to_actions",
    composerinputdisabled :"TRUE",
    thread_state : "existing_thread",
    call_to_actions:[
    {
      type:"postback",
      title:"¿Tiempo de espera?",
      payload:"ACTUALIZAR"
    },
    {
      type:"postback",
      title:"Ver Promociones",
      payload:"DEVELOPER_DEFINED_PAYLOAD_FOR_START_ORDER"
    }
    ]    
  }
  request({
    uri: 'https://graph.facebook.com/v2.6/me/thread_settings',
    qs: { access_token: PAGE_ACCESS_TOKEN },
    method: 'POST',
    json: messageData
  }, function (error, response, body) {
    if (!error && response.statusCode == 200) {
      var recipientId = body.recipient_id;
      var messageId = body.message_id;

      console.log("Successfully sent generic message with id %s to recipient %s", 
        messageId, recipientId);
    } else {
      console.error("Unable to send message.");
      console.error(response);
      console.error(error);
    }
    });
    }

And I call this function at the beggining

    app.post('/webhook', function(req, res){

    var data = req.body;

    if (data.object == 'page') {
    menuButton();

    data.entry.forEach(function(entry) {
     var pageID = entry.id;
     var timeOfEvent = entry.time;

          // Iterate over each messaging event
          entry.messaging.forEach(function(event) {
         if (event.message) {
           receivedMessage(event);

         }else if (event.postback) {
          receivedPostback(event);
        } else {
         console.log("Webhook received unknown event: ", event);
       }
     });
        });

    res.sendStatus(200);
  }

})

What I have not being able to do is to remove the option of free text input. Facebook claimed now is possible yet have found no instructions or examples on how to do it. Any clues?