In Slack2Watson(1) and (2) I created a chatbot and integrated it into Slack Slash Commands. Now, let’s integrate the same chatbot into Facebook Messenger. To accomplish this I need to create a Facebook Application, add the Messenger Platform to my Facebook Application, create a Webhook, have admin access to a Facebook Page to generate a Page Access Token so I can send and receive messages send to the Facebook Page, and create the Node-RED flows to integrate the Facebook Messenger with the IBM Watson Conversation.

Steps:

1. Create a Flow to Verify the Request for Webhook Edits in Node-RED,
2. Create an Endpoint for the Redirect URL of the Webhook in Node-RED,
3. Create a Facebook Application for the Messenger Platform,
4. Enable Webhooks Integration with Node-RED,

Create a Flow to Verify the Request for Webhook Edits in Node-RED

To prepare the setup and configuration of the Facebook Application, the Messenger platform and Webhooks to enable a chatbot in Facebook Messenger, I will first create the Node-RED flows to implement the required server workflow.

The first flow is to verify the endpoint for the setup of the Facebook Application, using the ‘hub.challenge’ token.

• Go to your Node-RED application on Bluemix at http://<username>-nodered-slackapp.mybluemix.net/,
• Click the ‘Go to your Node-RED flow editor’ button,
• If you’re not logged in yet, log in now,
• Add a new flow tab and rename the flow ‘Facebook Messenger’,
  
• To verify your endpoint during setup of your Webhook, or when you update an existing topic subscription of your Webhook, Facebook sends a GET request. The request will include:
  hub.mode=subscribe
hub.challenge — a random string
hub.verify_toke
• From the ‘input’ category, drag the ‘http input’ node to your flow, and configure the node,
  • Method: GET,
  • URL: /facebook/webhook,

  

• Add a ‘function’ node that creates the Reponse object with the ‘hub.challenge’ token, and configure the node,
  • Name: verifyRequest,
  • Function:
    msg.payload = msg.payload['hub.challenge'];
return msg;

  

• Add an ‘http response’ node to return the ‘hub.challenge’ token to verify the request,
• Connect the nodes to complete the flow,
  

Create an Endpoint for the Redirect URL of the Webhook in Node-RED

Next, I will add the actual endpoint of the ‘Redirect URL’ of the Webhook.

• From the ‘input’ category, drag the ‘http input’ node to your flow, and configure the node,
  • Method: POST,
  • URL: /facebook/webhook,

  

• Add a ‘function’ node that prepares the IBM Watson Conversation Request and stores the necessary message data, i.e. ‘sender.id’ to call the Facebook Send API, in the global context object of Node-RED, and configure the node,
  • Name: Set Conversation Input,
  • Function:
    context.global.sid = msg.payload.entry[0].messaging[0].sender.id;
msg.payload = msg.payload.entry[0].messaging[0].message.text;
return msg;

  

• From the ‘IBM_Watson’ category, add the ‘conversation’ node, and configure the node with the Watson Conversation credentials,
• In the next step in the flow, I convert the response message from the Watson Conversation service to be sent back to the sender in Facebook Messenger by calling the Messenger Send API,
• Add a ‘function’ node that prepares the IBM Watson Conversation Request and stores the necessary message data, i.e. ‘sender.id’ to call the Facebook Send API, in the global context object of Node-RED, and configure the node,
  • Name: Format Send Request,
  • Function:
    var messageText = msg.payload.output.text[0];
var senderId = context.global.sid;
msg.payload =
{
"recipient": {
"id": senderId
},
"message": {
"text": messageText
}
};
return msg;

  

• From the ‘function’ category add an ‘http request’ node to the flow to send a request to the Messenger Send API, and configure the node,
  • Method: POST
  • URL: https://graph.facebook.com/v2.6/me/messages?access_token=<page_access_token>
  • Enable secure (SSL/TLS) connection: unchecked
  • Use basic authentication: unchecked
  • Return: a parsed JSON object
  • Name: Send API Request

  

• Be aware, that we did not yet generate the Page Access Token, which we will do below, but in the URL, you need to add this token that you can find in your Facebook Application > Messenger > Token Generation,
• From the ‘output’ category, add an ‘http response’ node to the flow,
• Connect all the nodes to complete the flow for now,
• Feel free to add Debug nodes to the flow to help you debug issues or to see the exact messages in your flow,

Create a Facebook Application for the Messenger Platform

• Go to the Facebook for Developers, App page,
• Click the blue ‘Create App’ button, or the green ‘Create a New App’ button,
  
• Enter a ‘Display Name’, e.g. ‘Messenger2Watson’, and contact email, and click the ‘Create App ID’ button,
  
• When the application is successfully created, you are taken to the application’s Product Setup page,
  
• Under Product Settings click ‘Add Product’, under ‘Messenger’ click the ‘Get Started’ button,
  
• If you don’t have a Facebook Page to generate a token for your Messenger App yet, create a Facebook Page first. This could be your Facebook Application’s information page. I am using the Facebook Page of FreeBootcamp.io,
• Under ‘Token Generation’, from the ‘Page’ dropdown select a Facebook Page, e.g. FreeBootcamp.io,
  
• Authorize the Facebook Application to access the Facebook Page, click ‘Continue as <username>’,
  
• Edit ‘Choose what you allow’, and click ‘OK’,
  
• You now should see your ‘Page Access Token’ for the Messenger app, copy this token, you will need it later!

Enable Webhooks Integration with Node-RED

Now you have a Node-RED server that connect to IBM Watson Conversation, and you created a Facebook Application and added the Messenger Platform, you need to connect the two together by enabling integration by enabling Webhooks in your Facebook Application.

• Browse to ‘Webhooks’ and click the ‘Setup Webhooks’ button,
  
• Configure the Page Subscription of the Webhook:
  • Callback URL: https://<nodered-app>.mybluemix.net/facebook/webhook
  • Verify Token: <username>_messenger_2_watson_app
  • Subscription Fields: check ‘messages’, and optionally ‘message_reads’, but we’re not using the latter yet,

  

• Make sure you use SSL in your ‘Callback URL’ by prefixing the URL with ‘https’, as this is required,
• Click the ‘Verify and Save’ button,
• A GET Request is sent to the Callback URL with the following message:
  {
"hub.mode":"subscribe",
"hub.challenge":"1234567890",
"hub.verify_token":"<username>_messenger_2_watson_app"
}
• In the Node-RED server application that processes the request, you should verify the ‘mode’ and ‘verify_token’, and respond with the ‘challenge’ value.
  msg.payload = msg.payload['hub.challenge'];
return msg;
• We already setup the Verification Request flow in Node-RED above, so you should be good,
• In the ‘Webhooks’ section, from the ‘Select a page’ dropdown, select your Facebook Page ‘to subscribe your webhook to the page events’,
  
• Click the blue ‘subscribe’ button,
  
• In the Node-RED flow above we had a missing ‘Page Access Token’, we still need to add this missing ‘Page Access Token’,

Now test out your chatbot, by going to your Facebook Page that your webhook is subscribed to, and type ‘hello’.

• A message request from the Messenger chatbot will look as follows:
  {
"object":"page",
"entry":[{
"id":"1699680046931720",
"time":1493333165138,
"messaging":[{
"sender":{"id":"1361048863973298"},
"recipient":{"id":"1699680046931720"},
"timestamp":1493333164843,
"message":{
"mid":"mid.$cAAYJ2b5g2oBh4t0LK1bsZfC99pJp",
"seq":155197,
"text":"hello"
}
}]
}]
}