Free Facebook Messenger ChatBot created using RedBod and Node-RED

First, search and install “node-red-contrib-chatbot” from the Node-RED palette. Here you can see more details about loading RedBot and installing Node-RED: “Install the RedBot plugin in the Node-RED”.

Ngrok or port forwarding with SSL certificate

To use Facebook Messenger API, you need a valid non-self-signed certificate to use your link to the Node-RED as a webhook.

You don’t need to do this if you use the IBM Cloud or Heroku, for example, because you probably already have access to Node-RED through https://.

For the sake of simplicity, I will show you how to set up NgrOK on Raspberry Pi as the alternative is to use certbot and port forwarding.

If you already connect to your Node-RED through https://, skip to here.

1. Create an account to ngrok using the sign-up page.

2. Install ngrok using Snapcraft or manually:

Using your console or terminal to the Raspberry Pi.

• Install the Snapcraft and reboot the Raspberry Pi:

• Reconnect and install ngrok:

3. Connect your ngrok client to the account:

• Navigate to “Your Authtoken”;
• Copy and paste 🟪 “Command Line” to the Raspberry Pi terminal.

4. Now you have to edit the ngrok config 🟧 file created above:

• Append 🟦 settings to tunnel 1880 port.

Nano — paste with right-click, save and exit: CTRL + S then CTRL + X.

5. Create a systemd service to start ngrok at boot:

• Use service configuration as below:

Replace “pi” from “User=” and “Group=” if your Raspberry Pi has a different username (use whoami command).

6. Next enable service to start at boot:

7. Start the service in order to check if it works:

8. You should be able to see inside the “Endpoints” menu the URL 🟨 which you can use to connect to your Node-RED over the internet:

Good, now you are ready to set up a webhook for the Messenger API.

Remember this ngrok URL as it is used in the configuration below.

Create a Facebook Page

If you don’t already have a Facebook Page, you need to create one in order to use the Messenger API.

Create a new page using this link.

Get started with the Facebook Messenger API

After you install the RedBot plugin, in order to use the nodes you need to generate an API key from Facebook.

1. Navigate to “META for Developers” and 🟦 create a new app of type 🟩 “None”:

2. Set up a new 🟥 “product” of type “Messenger”:

3. Select your Facebook page to be linked with your app from the 🟧 “Access Tokens” tab, then press 🟨 “Done”:

4. Generate a token 🟦 and save it 🟩 as will be used later:

Don’t close this page yet, you still need to configure the “Webhooks”.

5.Create a configuration inside Node-RED:

In order to validate the webhook from the next step, we need to create a simple configuration inside the Node-RED.

Connect to the Node-RED web interface by accessing your Raspberry IP and append :1880, e.g.: http://192.168.0.156:1880, http://raspberrypi.local:1880/ like here or by using ngrok URL.

• Make your flow look like this, with 🟨 “Facebook In”, “Facebook Out”, “Text”, “Conversation” and one 🟧 “debug” node then edit 🟪 “Facebook Receiver” settings to create a 🟫 new configuration:

• At configuration, set a 🟥 “Bot Name” then at the 🟩 “Token” use the one generated above at “Access Token” above and at 🟦 “Verify” create your own random token and save it as it is used at step 6 then press “Add”:

• Modify the 🟪 “Facebook Sender” node 🟧 “Bot configuration” to use the one we’ve just created then 🟫 “Deploy”:

6. Go back to the app set up and 🟪 “Add Callback URL” from the “Webhooks” tab:

• 🟩 “Callback URL” is the ngrok URL (or your https:// Node-RED URL) from above with /redbot/facebook at the end;
• 🟦 “Verify token” is the token you pick inside the Node-RED Facebook node configuration at the “Verify”.

7. 🟥 “Add subscriptions” to the webhook you just created of type 🟧 “messages” and “save”:

You finished the default setup for the Messenger API, now it’s time to go back to the Node-RED and put a simple text message.

Configure a simple Facebook Messenger bot in Node-RED

You already have a simple flow for your Facebook Messenger bot, now let’s add a simple text message to make it usable.

1. Modify the 🟪 “Conversation” node to use created Messenger 🟩“Bot Configuration”:

2. Add a message 🟦 you want to see as a replay inside the 🟪 “Text” node then 🟫 “Deploy”:

3. Test if your bot works:

• Navigate to your Facebook page;
• Using the 🟨 🟧 “Send Message” button sends a message to the bot:

You can see the bot has replayed 🟩 the message we’ve picked.

Also, the message is shown inside Node-RED 🟥 debug window through the “debug” node. You can access the content through “msg.payload.content”.

Make Messenger bot an interface and functions

Probably you want your users to make some operations easier, like sending phone, email and responding with an image, selecting from a precompiled response list, etc. .

I’ll show you how to make some of these with a few clicks using RedBot.

1.Modify flow to use the “Rules” node:

• Add a new 🟪 “Rules” node after “Conversation” and define commands of type 🟦 “Message is command …” — “/contact”, “/product”, “/product_details”, “/privacy”, “/image”, and at the end, a rule of type “If nothing above”;
• Connect 🟨 “Quick Replies”, “Messenger Template”, “Document”, “Text”, “Image” and “Parse” nodes to the “Rules”:

As you can see, the “Rules” node creates multiple outputs for each command you put in, in the same order.

2. Modify the settings of each new node in accordance to:

• For the first 🟪 “Quick Replies”, type a 🟩 “Message” and 🟦 “Add buttons” like 🟦 “Postback” with /privacy value, “Phone number” and “Email”. You can optionally put an icon for the “Postback” type of button:

• Create a 🟪 “Messenger Template” of 🟩 type “Generic” and also put a “Title”, “Subtitle” and a random “Image URL”, then 🟦 “add” two buttons, one of type 🟦 “URL” and another one of type “Phone Call”:

• “Document” 🟪 node should have a PDF or another type of 🟩 document URL:

• Put a 🟦 message for the 🟪 “Text” node of the “/privacy” command:

• For the 🟪 “Image” node put a random image 🟦 URL:

• Edit the second 🟪 “Quick Replies”, put a 🟩 “Message” and 🟦 “Add buttons” of type 🟦 “Postback” with values “/contact”, “/product”, “/product_details”, “/privacy”, and “/image”:

• Edit first 🟪 “Parse” node to type 🟦 “Email”;
• Edit second 🟪 “Parse” node to type 🟦 “Integer number”:

• Last touch — Edit the 🟪 “Text” node to a message that includes 🟦 “{{firstName}}”, “{{lastName}}” and “{{payload}}” then 🟫 “Deploy” everything:

Great, now let’s make some tests to see how it looks 😀.

Send a message and you should see a list of 🟩 “Quick Replies” options inside the Messenger:

Let’s see what each option outputs:

• “Contact” and 🟦 “Privacy”, you can see the “Privacy” has 🟥 an icon image and if you click one 🟩 of your contact information you get another message for confirmation:

• “View a product” would give as response one card with a phone call button and a link to a page:

• “Product details” would let you download a PDF:

• “Random image” like it says, would give you a random image as a response:

Each time you select an option, you should receive the “Postback” button content value in the backend, at Node-RED, inside “msg.payload.content”:

Add more actions

You can also connect RedBot with many things like a database, firebase, send and receive emails, and so on to make it interactive and user-specific.

This is not the subject of the article, but if you want to see a custom way of using this bot, let me know in a comment and I’ll try to respond or create a specific article about anything you need.

Super!

You just created your first Facebook Messenger bot.

Stay tuned to see how you can improve it and make some complex functions work.

Check out here for a complete list of more Node-RED articles made by me: