How to show personalized 'Welcome Message' in facebook messenger?

Question

I would like to show 'welcome message' like 'Hi Robert, welcome to my application'. So I need to send:

1. "https://graph.facebook.com/v2.6/USER_ID?fields=first_name,last_name,profile_pic,locale,timezone,gender&access_token=PAGE_ACCESS_TOKEN"

2. using 'first_name' from 1st request, send "https://graph.facebook.com/v2.6/PAGE_ID/thread_settings?access_token=PAGE_ACCESS_TOKEN" request to set 'welcome message'.

However, I need to know user_id before first request.

My questions:

1. What are steps to create 'Welcome message'?
2. How to show 'Welcome message', when user opened facebook messenger window?

I reviewed https://developers.facebook.com/docs/messenger-platform document, and I have still questions.

Answer 1

So you can make this with a "get started" Button. This button is only there if the User Messages the bot for the first time.

With this command you can set the button:

curl -X POST -H "Content-Type: application/json" -d '{
  "setting_type":"call_to_actions",
  "thread_state":"new_thread",
  "call_to_actions":[
    {
      "payload":"USER_DEFINED_PAYLOAD"
    }
  ]
}' "https://graph.facebook.com/v2.6/me/thread_settings?access_token=PAGE_ACCESS_TOKEN"      

As you can see if the Button is pressed your Webhook recieves a "postback"

this is the callback you get:

{
  "sender":{
    "id":"USER_ID"
  },
  "recipient":{
    "id":"PAGE_ID"
  },
  "timestamp":1458692752478,
  "postback":{
    "payload":"USER_DEFINED_PAYLOAD"
  }
}  

So this is from where you can get User id

Now you can code a Function for this. My looks like this:

function receivedPostback(event) {
  var senderID = event.sender.id;
  var recipientID = event.recipient.id;
  var timeOfPostback = event.timestamp;

  // The 'payload' param is a developer-defined field which is set in a postback 
  // button for Structured Messages. 
  var payload = event.postback.payload;

  console.log("Received postback for user %d and page %d with payload '%s' " + 
    "at %d", senderID, recipientID, payload, timeOfPostback);


  if (payload) {

    // When a postback is called, we'll send a message back to the sender to 
    // let them know it was successful
      switch (payload) {
        case 'USER_DEFINED_PAYLOAD':
          startedConv(senderID);
          break;

       default:
         sendTextMessage(senderID, "Postback called");
       }

My startedConv() looks like this

function startedConv(recipientId){
var name;

request({
          url: 'https://graph.facebook.com/v2.6/'+ recipientId +'?fields=first_name',
          qs: {access_token: PAGE_ACCESS_TOKEN},
          method: 'GET'
      }, function(error, response, body) {
          if (error) {
              console.log('Error sending message: ', error);
          } else if (response.body.error) {
              console.log('Error: ', response.body.error);
          }else{
              name = JSON.parse(body);
              sendTextMessage(recipientId, "Hello "+ name.first_name+", how can i help you ? ")
          }
      });
}

Answer 2

You don't need it. Just follow the steps below,

1- Go to your page that related your messenger api.

2- Settings (FB Page Settings)

3- From tabs select Messaging

4- In messaging tab at the bottom you will see "Show a Messenger Greeting" change it from "No" to "Yes". Than you can customize it ;)

Note: To see your greeting message you should delete your previous conversation with the page that you set greeting message. Then start new conversation with the page you should see greeting message.

Answer 3

As of 9/12 you can set the greeting text that shows up before your user hits Get Started and it includes these tokens that will be replaced when the text is rendering:

• {{user_first_name}}
• {{user_last_name}}
• {{user_full_name}}

Take a look at this page of the Messenger Platform docs: https://developers.facebook.com/docs/messenger-platform/thread-settings/greeting-text

Answer 4

Creating a Greeting Text isn't hard at all at this point. I spent some time finding out how to do it and it turned out quite simple. I refactored one of the methods for a POST request that I found in the samples and I'm using NodeJS btw.

function createGreetingApi(data) {
request({
uri: 'https://graph.facebook.com/v2.6/me/thread_settings',
qs: { access_token: PAGE_ACCESS_TOKEN },
method: 'POST',
json: data

}, function (error, response, body) {
if (!error && response.statusCode == 200) {
  console.log("Greeting set successfully!");
} else {
  console.error("Failed calling Thread Reference API", response.statusCode,     response.statusMessage, body.error);
}
});  
}

Then I have another method just so that I keep code readable:

function setGreetingText() {
var greetingData = {
setting_type: "greeting",
greeting:{
text:"Hi {{user_first_name}}, welcome!"
}
};
createGreetingApi(greetingData);
}

Then you use this method in app.listen like this:

app.listen(app.get('port'), function() {
console.log('Node app is running on port', app.get('port'));
setGreetingText();
});

Answer 5

So i guess in messenger this happens for the very first message. If you delete message and start over this is NOT triggered. In Facebook messages you see it working.