Advanced features

In this section, we will go see some useful things that can help you enhance your Facebook Messenger bot.

Getting user data from Facebook Messenger

With each incoming message, we are filling the user_data object with the following fields coming directly from the Facebook profile of the user:

{
    "first_name":"Anakin",
    "last_name":"Skywalker",
    "profile_pic":"https://scontent.ftun3-1.fna.fbcdn.net/v/t1.0-9/18057955_1697168273645572_7528083323191086401_n.png?oh=ca6b53926e08b23c590bea756405b1fe&oe=598B4F5C",
    "locale":"fr_FR",
    "timezone":1,
    "gender":"male",
    "sender":"1310677675254316"
}

This allow you to have personalized greeting messages.
You can use the following code to get the name for instance.

var first_name = messenger_user.first_name;
output.answer = "hello "+ first_name + " How are you today?"

There is also an additional object called messenger_request that you can make use of.

{
  "recipient":{"id":"1696999743662425"},
  "timestamp":1493138028508,
  "sender":{"id":"1285562291541696"},
  "postback":{"payload":"GET_STARTED_PAYLOAD"}
}

Build dynamic responses

The process to send to send dynamic objects to the webchat is pretty simple:

prepare a message
send it with the messenger_answer.push() function

You can send multiple images, buttons, carousels etc…

Below is a very simple text example:

var message;

//Sending the first message
message= 
{
    "text":"hi there"
};
messenger_answer.push(message);

//Sending the second message
message= 
{
    "text":"All good?"
};
messenger_answer.push(message);

and the result:

📘
Delay between multiple messages
While sending multiples messages, we apply a by default delay of 2 seconds

Now, let's see the code for a more complex object.

var message = 
{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"generic",
        "elements":[
           {
            "title":"Welcome!",
            "image_url":"https://banner2.kisspng.com/20180602/ouc/kisspng-fedora-fashion-clothing-accessories-business-casua-fancy-hat-5b12bc44bdae25.3067421515279545007769.jpg",
            "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"
              }              
            ]      
          }
        ]
      }
    }
};
    
messenger_answer.push(message);

The result for the following code will be the object below:

For a complete reference, please check our Rich Messages section.

How can I add a persistent menu to my bot?

Faxebook allows you to personnalize the custom menu of your bot.
To do so, you will have to make an api call, of type POST to this url:

https://graph.facebook.com/v2.6/me/messenger_profile?access_token=YOUR_ACCESS_TOKEN

where YOUR_ACCESS_TOKEN is the same token used to create the integration.
In the Body of the API call, put your new persistent menu following the syntax below.

{
    "persistent_menu": [
        {
            "locale": "default",
            "composer_input_disabled": false,
            "call_to_actions": [
                {
                    "type": "postback",
                    "title": "Talk to an agent",
                    "payload": "CARE_HELP"
                },
                {
                    "type": "postback",
                    "title": "Outfit suggestions",
                    "payload": "CURATION"
                },
                {
                    "type": "web_url",
                    "title": "Shop now",
                    "url": "https://www.originalcoastclothing.com/",
                    "webview_height_ratio": "full"
                },
            		{
                  "type": "postback",
                  "title": "Restart the conversation",
                  "payload": "GET_STARTED_PAYLOAD"
            		}
            ]
        }
    ]
}

You can find more information on Messenger's persistent menus in the following section of Facebook Messenger developers portal: Persistent Menu

Can I add a restart button in my persistent menu?

Sure! Just make sure to have an option that sends the GET_STARTED_PAYLOAD
Here is an example below:

{
    "persistent_menu": [
        {
            "locale": "default",
            "composer_input_disabled": false,
            "call_to_actions": [
            		{
                  "type": "postback",
                  "title": "Restart the conversation",
                  "payload": "GET_STARTED_PAYLOAD"
            		}
            ]
        }
    ]
}

Getting user data from Facebook Messenger

Build dynamic responses

📘Delay between multiple messages

How can I add a persistent menu to my bot?

Can I add a restart button in my persistent menu?

📘
Delay between multiple messages