Visit page

Getting started w/ Messenger Bots

In this project, I tried to build a Messenger bot. I just wanted to develop something to have fun with. This bot is the result.

Lets start building it.

We have to build a Node JS server for the bot to function first. And later add API.AI integration (like, adding intelligence) to it. API.AI provides us the natural language processing.

We add this bot that we develop to a Facebook page and let it chat with people on its own. Here is how it performs. When someone messages to your page, those are sent to the NodeJS server. The logic at the server processes it and sends a reply on behalf of your page.

You can build bots for your brand or company or just for fun like me. Something like making a personal assistant of your own. Jarvis? *Wow*

You should have some knowledge on JavaScript, or exactly NodeJS for building the server. Don’t worry if you don’t. I guess we can code it in PHP or Flask (python) too. I haven’t tried.

Creating a new app

Let us start with creating a Facebook page (if you don’t have one). After creating, you have to go to developers.facebook.com and create a new app.

Step 1

Choose a display name and category(Apps for messenger). Click on “Create App ID” to continue.

Step 2

In the token generation section, under ‘messenger settings’, choose your page to generate Page access token and save that token.

We will continue the process after we build a function test server.

Fuelling the server

To start off, we can download a sample project from facebook’s github which demonstrates the basic sample. After cloning/downloading it, change the package.json to your values (don’t edit the dependencies and scripts values) and delete the .git folder.

Here we have to change the values in config/default.json to our values. We will get the server url after we depoly it (to heroku). App Secret can be found in Settings section for our app in developers.facebook.com. Page access token from Token Generation in Messenger section. Validation token is some thing that is like a secret key between server and the Facebook App. Set it to ‘hello’ for now.

As the server is in NodeJS, we use Express library, mainly express.Routter() to build it.

I know there is a lot of code here. But the thing that we need to understand is how the control flows. Lets see what happens when we send a text message to our bot.

Now look at app.js file.

All the requests will be directed to app.post(‘/webhook’, function(req, res)). From there it shifts to the messaging events. If we send a text message, receivedMessage(messagingEvent) gets triggered (Line 99).

In that receivedMessage() function (Line 218), we take the values like senderID, message etc. message is an object in itself and it contains text, attachments and several other properties. This function then calls sendTextMessage(senderID, messageText) (Line 311). senderID the person whom to send and messageText is the same message that we received. Its because we are echo-ing whatever we receive. sendTextMessage(senderID, messageText) function (line 521) prepares the messageData object and sends it through callSendAPI().

Deploy to heroku

There are few ways to deploy and its very easy. You can either install heroku-cli and push the repo or push it github repo and link it here. Copy the url of your app

Finishing up

Now in developers.facebook.com, under Messenger tab, Webhooks section, click on setup web hooks. The Callback url is your deployed heroku app’s url and verify token is the validation token (‘hello’) the we entered in the config.json file. Subscribe to everything and click on verify and save.

We are done!

Also read: How to build a REST API w/ NodeJS.

Keep on Hacking!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.