Member preview

How to build a Facebook Messenger bot in 30 minutes

…and you can too!

The next big thing.

In early January, Chris Messina wrote an article stating that 2016 would be the year of “conversational commerce.” Chris Messina is a thought-leader in the tech community. He’s also the guy who invented the #hashtag. So when I say thought-leader, I mean it when I say that he’s #awesome.

He wrote this article about chat bots. Messenger, What’s App, or Slack all have functionality now (or coming soon!) that allow users to message a robot (a programmed conversation-style response to users’ texts) for finding information, playing games, the possibilities are endless. Like any new technology, companies are still trying to figure out how best to use it.


If you’re on Facebook Messenger phone app, send someone a basketball emoji (or a soccer emoji, but hey, this is America…) to pull up a game (after tapping on the emoji) where you can compete with that person for the top score. Or type in @fbchess to start a game of Chess with someone.

More subtle, if you mention Uber in a conversation with someone, a notification will pop up and redirect you to the Uber app if you wish. Very cool (and creepy?).

Bots or Apps?

So why would you use a bot over an app? We are all used to downloading iPhone apps, why do those darn computer people have to keep changing things on us? One of my favorite test-cases for bots over apps is a live entertainment. Say you’re at a basketball game and you see an advertisement that says “download the Lakers app for up-date-statistics. I’m fairly unlikely to do that. But simply message the Lakers page on Facebook? I’ll consider it. No downloads required.

Well, let’s make one

Now that you want a bot for yourself, let me teach you how to make one. I made a simple one just for kicks and giggles. My bot is very simple. I write articles for a blog, so I wanted to try to create an RSS feed for the blog and, anytime you message our Facebook page, it would return a random article from the blog to read. It’s a good, simple starting place. Now for some shameless self-promotion: check out the bot here:

Bots arise!

Now that I explained the “what” behind Facebook’s Messenger Bots, I’m sure you’re excited to get started building your own bot. We need to take a few minutes to discuss what tools we will use for this bot. To my knowledge, I haven’t been able to find a good tutorial that details this process in a complete, easy-to-follow fashion. Many of the tutorials assume some level of previous experience with web-servers, Facebook applications, or installing terminal packages. I’ll assume nothing and leave no detail uncovered.

The Facebook Page

Facebook has a page of tutorials, documentation, and descriptions of apps for their platform at There are few different methods to create an app that integrates with Facebook. You may be familiar with websites or iPhone apps that use Facebook to login (sometimes called “single-sign-on”). Other apps allow users to post high scores on their Facebook, or invite friends to compete. Today we will focus on “Apps for pages” which allow us.

You’ll need to create a Page. It’s similar to a personal Facebook page, but generally used for websites or businesses. If you’re not sure what your page should be about, why not create a personal one? Chris Messina, creator of the hashtag, has a personal page here, that integrates with his personal chatbot here. The Page isn’t like Facebook friendship, you have followers who can receive notifications of your Page posts without being “friends” on Facebook. Think of it as a more public version of your private, personal profile.

Facebook Pages

In order to create a Facebook page, you’ll need a personal account (no one will know they are connected, you just need a personal account to manage a public page), go to the sidebar and click “Create Page.” Add some pictures, maybe post a few things. Then head over to and login to register your account as a developer. Excited yet? We’ll come back to this later.

The Server Language

Every time someone messages your chatbot, you’ll need to analyze the input and craft a suitable response, all automatically, with the help of a web server. The easiest way to do this is using NodeJS. You’ll need to download a local version of NodeJS to develop this bot for local testing before we upload it to an actual server. NodeJS is suitable because it uses javascript on the front end and the backend. Many web server languages are more confusing to integrate with front end languages like Javascript, and using the same language on front and back has advantages, not the least of which saving some headaches in learning a new language. NodeJS is becoming more and more popular, with many packages built on top this well-documented platform in the searchable, package manager called NPM (node package manager).

You’ll need to visit the Node homepage and click on the download link to install the Node full installation. When it’s finished, open up the Terminal App and type “which node” and “which npm” and if both commands return an address (/usr/local/bin/node) then you’re good to go.

The Server Hosting

Now that we’ve settled on a platform to build this chatbot in, we need to find hosting. The best option here is Heroku. They have a free tier of hosting for developing apps (assuming we don’t get a large amount of traffic on our small web-app, we will use the free version of hosting). They have amazing integrations for add-ons like database integrations (think MongoDB) or secure sign-in (think StormPath APIs). While we won’t use these today, it might be useful to get familiar with Heroku for your future projects with a bigger scope. We will find some useful graphical inputs for our Facebook app tokens, too.

You’ll want to download the Heroku Command Line Tools. Click here to go to the documentation page to learn how to install the command line tools. When you’re done, open up the terminal application and type “heroku –version” and if the install worked (you may need to restart terminal) you’ll see the version number echoed on the next line.

Let’s get straight to work. We’ll build the entire app in one 30 minute sitting! Here goes nothing:

1. Create a Facebook page.

You’ll need to log into Facebook (from your personal account, the same account that you plan to use to manage this messenger bot) and on the left sidebar click: +Create Page. The next screen invites you to select the page type. I chose a “community” page, with the idea that I could create a community of people interested in Facebook Messenger bots. You might want to choose a different category. If you’re not sure, why not choose “Brand” and try to build a bot that is true to your personal ‘brand’ — use that to market yourself as a forward-thinking tech person who has their own bot.

Add a description and profile picture to your Facebook page and you’re ready to roll. Mine is, what’s yours?

2. Setup the Facebook developer account.

Go to You’ll be prompted to login (be sure to use the same account that you used to set up the page). Click on the top right menu (“My Apps”) and select “Add a new app.”

You’ll be prompted to input your Display Name and a contact email. Be sure to select the category “Apps for pages” as we’ll be connecting this app to our Facebook page. Are you excited yet? Click “Create App ID”

Now, you’ve landed on the Product Setup page on the Facebook dev center. Scroll down until you see “Messenger” and click “Get Started.” Read the information panel and click Get Started once again.

Page token is required to start the API communication between the web server that we will create in a minute and the Facebook page. Click the drop down menu to select the proper page to connect (i.e. “Testbots” from Step 1) and you’ll have to authorize with a Facebook sign-in. It will generate a token. This is important, but we’ll use it in a bit. You’ll come back to this page during step 4, to generate a Webhook, but first we have to setup our server.

3. Setup a Heroku server.

Heroku is amazing. Lots of scalable functionality in distributing web apps. Go to to setup an account and click “New -> Create new app” in the top right corner. Name your web app (why not keep it the same and call it “testbots”?). Well shoot, that name is taken (each Heroku web app must be unique), so I’ll settle for “testbots-jeffrey” instead.


Generally, I use the GitHub deployment method for Heroku apps. The reason is because GitHub has a dope GUI application ( and I’m lazy when it comes to remembering git terminal commands. Click on the GitHub option in the Heroku new app panel that we’ve been working on. Create a new repository through the Desktop Application or the website ( and then head back to to select that repo. Click connect and get ready to roll.

It’s good to enable automatic deploys on Heroku, too. You can either select a particular branch to automatically deploy, or just keep your master branch as the automatically deployed (which is what I do).

4. Local development in Nodejs.

Open up the Terminal App. I had asked you all to install NodeJS in the previous tutorial, but if you haven’t go to, restart your terminal and type “which node” and “which npm” to verify that install.

Next, navigate to the local version of your GitHub repo. We’ll add three files here:




I’ve linked each of these to my personal repo that I used to make this tutorial. You can download them, move them into your local repo and push it to GitHub when you’ve made the appropriate changes!

The index.js is where the main functions for our web server go: we’ll add a simple POST for the /webhook page here, and begin to tell the server how to communicate with the Facebook app we’re setting up on On line 17 of this, you’ll need to update your token:

if (req.query[‘hub.verify_token’] === ‘pick_a_good_token_name’) {

After that, push your app to GitHub, and if we’ve used the automatic deployment with Heroku described earlier, it will push automatically, within a few seconds. Go to your homepage (go back to your Heroku dashboard and click “open app” or go to the URL, which was ( for me. If it worked, you’ll see the text “This is a TestBot Server.” The /webhook URL still doesn’t work, because we have to add the token to Heroku as well.

We’re almost done! Click here to go the second page of the tutorial.

This is a continuing series that Jeffrey is writing on how to build Facebook Messenger bots. For part 1, go here, and for part 2 go here. For part 3 go here.

5. Add config variables to Heroku

Go back to the Heroku Dashboard, click on Settings for the app, scroll down and click “Reveal Config Vars.” You’ll want to type in “PAGE_ACCESS_TOKEN” for the key (no quotes) and your Token generated way back in step 2 on I’ll show another screen shot here just in case you forgot.

6. Setup web hooks.

We’ll need to head back to and click on the Product->Messenger->Settings to add some web hooks to get Heroku and Facebook to talk to each other. Click on the “Setup Webhooks” button.

Your callback URL is something we’ll have to create on the server, but we now know the name of the web app that we just created on Heroku. I called mine “testbots-jeffrey” remember? So the format of the callback will be []. Choose a token name (no spaces allowed). This doesn’t matter, but you’ll have to remember it and place it in code later. I used “pick_a_good_token_name” (Okay, I changed it after I took a screenshot. No I didn’t. Maybe I did, maybe I didn’t.). When we try to click “Verify and save” it doesn’t work. Why? Because we don’t have a page at /webhook. Let’s add that now.

Subscribe the custom web hook to the Page

After adding the key and value pair to Heroku, you’ll need to subscribe your custom web hook to the Page events by issuing a post request. The simplest way to do that is to open up your terminal and type the following:

curl -X POST “”

(be sure to update your PAGE_ACCESS_TOKEN to your unique identifier. You should get a {“success”: true} response)

7. Subscribe

Subscribe the app to the correct page.

Now to test!

Go back to your Facebook Page and click on “Message” or the shorthand is to go to the URL Type anything and it will reply!

Right now the functionality of the app is extremely limited. Tune in next time and we’ll add some functionality!

I would love to hear from you all. You can get in touch with me via my personal website (, also hosted on GitHub Pages!) with recommendations for new tutorials and questions about this one. Tweet @ me!

One clap, two clap, three clap, forty?

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