IBM Watson Assistant has been proven to be helpful in managing users interactions with your business through different platforms. Like many other platforms, Watson Assistant can be linked to your Facebook page as well. When you link your Watson Workspace with your Facebook page, users can interact with your page whenever they want and get a response in seconds. You do not need to hire representatives to handle inquiries on your Facebook page. Watson Assistant can do that for you in a more efficient and responsive way.

After completing this guide, you can also refer to the Use Graph API to extract Facebook username and set Watson Assistant context in Node-RED how-to so that our chatbot can call the user by name.

Learning objectives

In this guide, we shall go through the steps involved in creating a Node-RED boilerplate available in IBM Cloud and link Watson Assistant to a Facebook Page using Node-RED flows.

Prerequisites

To follow this guide, you need to have:

Estimated time

If you fulfill the prerequisites of this guide then the following steps would take around 20 to 30 minutes.

Steps

Create a Node-RED boilerplate application

Create a Node-RED Boilerplate, by going into the IBM Cloud Catalog and searching for Node-RED.

alt

Click Node-RED Starter, give the application a name, and click Create. Once the application’s status is Running, open the route (URL) of the application.

When you open the route of Node-RED application, you will be directed to the welcome page. Follow the directions there to add credentials for your Node-RED application. These credentials are unique for you and will be required the next time you use this instance of Node-RED.

alt

After you set the password, continue by clicking Next. You will be prompted to enter your credentials, and then you will be directed to the Node-RED Flow window.

Obtain Facebook credentials

Review Facebook’s documentation for Setting Up Your Facebook App and ensure that you have completed each of the requirements.

Go to app dashboard under Facebook App and create a new app.

alt

Click Set Up under Messenger Grid.

alt

Under Token Generation, select the page with which you want to integrate the Chatbot.

Page Access Token will be generated after giving the permission to it.

Copy the token for use in the next two steps.

Create a Facebook Messenger verification webhook

Drag and drop http input, function, http response, and debug node and link them as shown below (ignore the nodes name for now):

alt

Open the function node, and name it Subscribe. Enter the following code, ensuring that you populate the facebookToken variable with the token generated in the previous step:

const facebookToken = '';

var mode = '';
var vtoken = '';
var challenge = '';

if (msg.payload['hub.mode']) {
    mode = msg.payload['hub.mode'];
}

if (msg.payload['hub.verify_token']) {
    vtoken = msg.payload['hub.verify_token'];
}

if (msg.payload['hub.challenge']) {
    challenge = msg.payload['hub.challenge'];
}

if ('subscribe' == mode && facebookToken == vtoken) {
    msg.payload = challenge;
}

return msg;

if ('subscribe' == msg.payload['hub.mode'] && facebookToken == msg.payload['hub.verify_token']) {
    msg.payload = msg.payload['hub.challenge'];
}

return msg;

Double-click the http input node, name it Verification Webhook, and set URL to /mybot.

alt

Setup webhooks

Under Webhooks, click Setup Webhooks.

alt

Provide a callback URL (for example, https://example.com/mybot) that matches the path provided in the previous step.

In the Verify Token text box, provide the Facebook token generated in step 2.

Check the checkbox of messages and click Verify and save.

If you get error when saving, verify that you have provided the right Callback URL and see in the Node-RED flow that your flow is Deployed.

Once it is verified. Select the Page and Subscribe.

Create Node-RED Messenger Listener

Drag and drop Input http, Output http response, Function, and Two output debug nodes. Double-click the function node and set output to 2. Name it Look for Messages and click Done

alt

Wire them like below:

alt

Double-click the input http node and specify the method as POST and the URL as /mybot. Name it Messenger Chat Listener.

Double-click the function node, and enter the following code:

if (msg.payload.object && 'page' == msg.payload.object) {
    if (msg.payload.entry) {
        var entry = msg.payload.entry;

        for (var i = 0; i < entry.length; i++) {
            var pageID = entry[i].id;
            var timeOfEvent = entry[i].time;
            var messaging = entry[i].messaging

            for (var j =0; j < messaging.length; j++) {
                if (messaging[j].message) {
                    msg.messagingEvent = messaging[j];
                    node.send([msg,null]);
                }
            }
        }
    }
}

return [null, msg];

Double-click the second debug node (msg.payload). In the Output field, enter msg.messagingEvent, and name it MessengingEvent from Messenger and then click Done.

alt

Click Deploy and Go to the page and send a message. Check the Debug sidebar and you should be able to see the message now sent from the Messenger.

Current flow should look like this:

alt

Create Node-RED Messenger Writer

Install Facebook-Messenger node first. From the hamburger menu on Node-RED, go to Manage Palette. Search for “Facebook” and install the writer node.

alt alt

Now drag and drop function, facebook messenger, and debug node and wire them as shown below:

alt

Open the new function node and rename it to Set up response. Enter the following code:

msg.facebookevent = msg.messagingEvent;
msg.payload = 'Hello, this is all I say for now.';
return msg;

Provide your facebook token in the facebook node.

Deploy and send a message on the page and you should now be able to see the response.

Integration with Watson Assistant

Remove the wire from the highlighted Listener and Writer nodes.

alt

Drag and drop function and output link node.

Code for the function:

msg.fromMessenger = true;
msg.payload = msg.messagingEvent.message.text;
return msg;

Connect the Look for messages node, new function and output link node.

alt

Also, remove the line that contains This is all I say for now from the Set up response Node.

Create a new work flow, drag and drop input link, Assistant, function, and output node.

alt

Double-click the Assistant node and enter the credentials of the Assistant service from the Dashboard of IBM Cloud (Username, Password, Workspace-ID).

Code for function:

output = msg.payload.output.text.join(' ');
msg.payload = output;

if (msg.fromMessenger) {
    return [msg,msg];
} else {
    return [msg, null];
}

Double-click the output node of Flow 1, as shown in the picture.

alt

Click the checkbox that links to Flow 2 and click Done.

Drag and drop Input link node in the Flow 1 behind the Set Response Node.

alt

Now go back to the Flow 2 and double-click the output link and check the checkbox of input link of Flow 1.

alt

alt

Click Done and Deploy the App.

Now, when you interact with the Page, you will get responses from Watson Assistant.

Summary

In this tutorial, we learned how you can get started with the Node-RED Starter Boilerplate. We also learned how to make productive use of the Node-RED tool and integrate Watson Assistant with the Facebook Page.