Free Facebook Messenger ChatBot created using RedBod and Node-RED

Node-RED RedBot Facebook Messenger example

You might have a small business or simply want to automate your way of controlling your home through Facebook Messenger and Node-RED is a great tool to start creating a chatbot as you can automate many things, including sending and receiving emails, creating an interface, and so on which can help you to automate responses to your customers, control your machines at home or workplace and, create specific messages using a database.

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:

                sudo apt update
sudo apt install snapd
sudo reboot
            

  • Reconnect and install ngrok:

                sudo snap install ngrok
            

3. Connect your ngrok client to the account:

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

Setup ngrok authentication token

Setup ngrok authentication token

Setup ngrok authentication token

Setup ngrok authentication token

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

                nano /home/pi/snap/ngrok/current/.config/ngrok/ngrok.yml
            

  • Append 🟦 settings to tunnel 1880 port.

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

                tunnels:
    default:
        proto: http
        addr: 1880
            
Modify ngrok configuration to tunnel 1880 port of Node-RED

Modify ngrok configuration to tunnel 1880 port of Node-RED

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

                sudo nano /etc/systemd/system/ngrok.service
            

  • Use service configuration as below:

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

                [Unit]
Description=ngrok
After=network.target
StartLimitIntervalSec=400
StartLimitBurst=3

[Service]
User=pi
Group=pi
WorkingDirectory=~
ExecStart=/snap/bin/ngrok start --all
ExecReload=/bin/kill -HUP $MAINPID
KillMode=process
IgnoreSIGPIPE=true
Restart=always
RestartSec=5
Type=simple

[Install]
WantedBy=multi-user.target
            
Create a systemd service for ngrok

Create a systemd service for ngrok

6. Next enable service to start at boot:

                sudo systemctl enable ngrok.service
            

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

                sudo systemctl start ngrok.service
            

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:

Get your tunnel URL which let you access Node-RED through the internet

Get your tunnel URL which let you access Node-RED through 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”:

Configure a new Facebook app of type “None”

Configure a new Facebook app of type “None”

Configure a new Facebook app of type “None”

Configure a new Facebook app of type “None”

Configure a new Facebook app of type “None”

Configure a new Facebook app of type “None”

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

Set up Messenger inside the app

Set up Messenger inside the app

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

Connect a Facebook Page to the app

Connect a Facebook Page to the app

Connect a Facebook Page to the app

Connect a Facebook Page to the app

Connect a Facebook Page to the app

Connect a Facebook Page to the app

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

Generate a token and save it to bind the RedBot with the app

Generate a token and save it to bind the RedBot with the app

Generate a token and save it to bind the RedBot with the app

Generate a token and save it to bind the RedBot with the app

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:

Flow created before finishing Facebook App set up

Flow created before finishing Facebook App set up

  • 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”:

Set up your token and create a random one for the webhook

Set up your token and create a random one for the webhook

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

Select “Messenger” bot configuration for the “Facebook Sender” node also

Select “Messenger” bot configuration for the “Facebook Sender” node also

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”.

Create a webhook for the Messenger bot and use the token you pick above

Create a webhook for the Messenger bot and use the token you pick above

Create a webhook for the Messenger bot and use the token you pick above

Create a webhook for the Messenger bot and use the token you pick above

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

“Add subscription” to the webhook which will call it when what you pick happens e.g. receive “messages”

“Add subscription” to the webhook which will call it when what you pick happens e.g. receive “messages”

“Add subscription” to the webhook which will call it when what you pick happens e.g. receive “messages”

“Add subscription” to the webhook which will call it when what you pick happens e.g. receive “messages”

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”:

Set “Conversation” node “Bot Configuration” as the bot configuration “Messenger”

Set “Conversation” node “Bot Configuration” as the bot configuration “Messenger”

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

Edit the “Text” node to send a replay message for the test

Edit the “Text” node to send a replay message for the test

3. Test if your bot works:

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

Example of test for the Facebook Messenger bot

Example of test for the Facebook Messenger bot

Example of test for the Facebook Messenger bot

Example of test for the Facebook Messenger 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. .

Example of a quick menu added to the Facebook Messenger bot

Example of a quick menu added to the Facebook Messenger bot

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”:

Add multiple nodes and “Rules” to the flow to make the bot a bit more complex

Add multiple nodes and “Rules” to the flow to make the bot a bit more complex

Add multiple nodes and “Rules” to the flow to make the bot a bit more complex

Add multiple nodes and “Rules” to the flow to make the bot a bit more complex

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:

Add options to the first “Quick Replies” node

Add options to the first “Quick Replies” node

  • 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”:

Create a template to respond when asking for a product

Create a template to respond when asking for a product

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

Use a random “Document” URL to send through Messenger

Use a random “Document” URL to send through Messenger

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

“Text” replay when asking for privacy information

“Text” replay when asking for privacy information

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

“Image” replay when asking for a random image

“Image” replay when asking for a random image

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

“Quick Replies” commands when you send any random message

“Quick Replies” commands when you send any random message

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

Parse for email and phone number

Parse for email and phone number

Parse for email and phone number

Parse for email and phone number

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

Send a replay “Text” confirmation message with an email or phone number received

Send a replay “Text” confirmation message with an email or phone number received

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:

How “Quick Replies” looks inside Messenger conversation

How “Quick Replies” looks inside Messenger conversation

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:

Example of replays for “Contact” option

Example of replays for “Contact” option

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

“View a product” would give you a replay of an image, text, URL, and call button

“View a product” would give you a replay of an image, text, URL, and call button

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

Example replay of “Document” node

Example replay of “Document” node

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

“Random image” output

“Random image” output

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

In the backend, Node-RED would receive the postback (buttons) value you set, not the text you see in Messenger

In the backend, Node-RED would receive the postback (buttons) value you set, not the text you see in Messenger

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:


Only registered users can post comments. Please, login or signup.

Start blogging about your favorite technologies and get more readers

Join other developers and claim your FAUN account now!

Stats
14

Influence

404

Total Hits

1

Posts

Discussed tools