How to Build a Facebook Messenger Chatbot in 10 Minutes

DZone 's Guide to

How to Build a Facebook Messenger Chatbot in 10 Minutes

Here's the entire process from beginning to end with pictures. You've got your entire weekend coding all planned out then.

· Integration Zone ·
Free Resource

The new Facebook Messenger platform, announced back in April, lets developers write bots, or automated chat programs, that drive user engagement and provide value in an intelligent and interactive way.

In this series of articles, we’re going to take a look at what it takes to build out a Facebook Messenger chat bot, with Backand serving as the back-end. This article will cover creating the Facebook app, tying it to a Backand, and testing the pairing. Future articles will cover what is happening on the back-end in greater depth, as well as integrating with third-party providers to create even more interesting content for your users.

Tools for Building the Chatbot

One of the great things about choosing a Backend-as-a-Service provider like Backand is that the toolchain necessary to create interactive and exciting programs is very short. Between Facebook’s informative app interface and Backand’s in-browser JavaScript editor, most of your tools are already provided. In, fact, the entire exercise will be conducted in a web browser! While you can always use text editors or IDEs for formatting and organizing the JavaScript portions of this effort, these tools are more of a convenience than a necessity.

This also allows you to iterate more quickly once the app has been wired up. As your server-side action code changes, those changes will be immediately reflected in your Messenger chat bot. With Backand, you don’t have any need to deploy changes to your code. Simply make the appropriate changes and save the action and you are ready to go.

Configuring the App on Facebook

Every Facebook app begins the same way: at the Facebook Developer Portal. If you haven’t registered with Facebook as a developer, you will first be prompted to do so. Once you’ve registered, you’re brought to the app creation page flow. Start by entering the name of your new Facebook Messenger bot:facebook messenger bot name

You’ll be prompted for more info before the ID is finalized. Fill out the specified fields, and click “Create App ID”:
create new facebook app idAt this point, you can go through the provided quick-start wizard if you want. However, for our purposes, we will skip this to end up at the App Dashboard. From here you can manage all aspects of your app and see relevant stats such as the number of users, API calls, and other statistics. To create an app that our backend can communicate with, we need to add a product using the provided “Add Product” link in the navigation bar. This takes up to the Product Setup page. Choose the “Get Started” button for a Messenger app:

facebook product setup page

Now we’re almost ready to create our application’s backend. But first, there is one more step to take on Facebook. Facebook requires that all Messenger applications be associated with a Facebook Page. The page doesn’t need to be complex, it just needs to be associated with your Facebook account – simply create a blank page, and you can flesh it out later if you desire.

Adding Backend Functionality

Facebook messenger bots communicate using Webhooks. Webhooks are a notification of an action taken in your app. In this case, you receive a webhook notification whenever someone sends a message to your bot via Facebook Messenger. The response of your webhook will be converted into a Facebook Messenger message sent back to the user.

To integrate with Facebook’s webhooks, you need to have a backend application that is publicly accessible. Using a traditional approach (without Backand), this would have required five steps: securing a domain, standing up a web server, standing up a database, writing an application to receive the messages, then writing the code to handle the messages and send a response. But we’re going to leverage Backand as our app’s backend, which eliminates four of the above five steps. So the only thing we need to do is the most important one: write the code to handle the webhooks!

Start by signing up for an account with Backand, or sign into an existing account. Accounts are free to start, and the Prototype tier gives you more than enough data storage and transfer to get your app up and running. Once you register, you are brought to the Backand dashboard. Use the provided box to create a new Backand app:

add a new Backand app

Once this is done, you’re brought to your app’s dashboard:

Backand app dashboard

By default, you are given a basic set of objects to work with: items and users. All items in a Backand application are RESTful resources and are publicly accessible for authenticated apps from the moment your Backand application is created. We’re going to use a Custom Action on the “Items” object to control our bot’s integration with Facebook Messenger. To get this set up, first navigate to the Items object by selecting it from the navigation bar:
controlling facebook messenger integrationOnce there, select the “Actions” tab:
Backand actions for Facebook Messenger botThe Actions tab offers us the capability to create automated actions based on each potential database operation that could be performed on this object, driven by the Amazon RDS instance that was automatically provisioned for you when you created your app. Additionally, you can create Custom Actions on an object. These actions respond to messages sent to a specific URL and are ideal for driving our Facebook Messenger bot integration.

Custom actions can consist of sending an email, executing a Transactional SQL script, or running custom server-side JavaScript code. We’re going to use the latter, but via a handy template provided in the Backand interface. To get started with our bot’s custom action, select the “Facebook Messenger Bot” template from the provided examples:

facebook messenger bot backend templateThis step automatically configures the action to be performed on demand, and provides you with sample JavaScript code to integrate with the Facebook messages you will shortly receive. Save the action for now, without any modifications. At this point the backend is ready – all that is left is to tie the Facebook app we created to the Backand app we will be using to power it!

Tying it Together

Navigate back to the Facebook app page. The first thing we need to do is generate a key that the app can use to authenticate with outside communicators. This is done in the “Token Generation” section. Simply select the page you created while configuring the Facebook app, and the token will be automatically generated:

facebook app token generation

Once you have the token, you need to paste it into your application’s JavaScript code. There is a variable named PAGE_ACCESS_TOKEN defined in the template code. Simply change this variable’s value to the key you copied from Facebook:
facebook page access token variableAfter this is finished, you need to configure Facebook to send the correct webhooks to your application. This is managed in the “Webhooks” section. Click the button marked “Setup Webhooks” to get started:

facebook app setup webhooks

This brings up the New Page Subscription dialog. In this dialog, you need to provide the URL for your Backand application’s custom action, a Verify Token, and select the webhooks you wish to receive. First, let’s retrieve the action URL. Navigate back to your app’s Backand dashboard, and pull up the action. To find the URL, we simply need to send a test object to our action. Click the “Test Action” button:

facebook app verify token for webhooks on backand

This brings up the testing sidebar. Within this sidebar, select “Test On Demand Action”:
facebook messenger chatbot test actionThe test results are revealed below, along with the URL used to make the request:
facebook messenger bot action test resultsAs you can see, this URL is of the form https://api.backand.com/1/objects/action/<OBJECT_NAME>/?name=<ACTION_NAME>. You can use this format as a reference for future Backand actions. To ensure that the action is properly authenticated, we also need to configure the URL to use your application’s master token. To find this, navigate to the “Security & Auth” section in the Backand dashboard and load the “Social & Keys” section:

facebook messenger chatbot master token authentication

You will also need a user token – this is generated in the “Team” section of the “Security & Auth” configurations. Simply click the key icon next to any admin user to get a user token dialog:

facebook messenger bot user token

Copy the key provided–we’ll use it to construct the final action URL. Action URLs are of the following format:


Replace <ACTION_NAME> with the name of your action, <MASTER_TOKEN> with the master token, and <USER_KEY> with the user key. Paste the final URL into the New Page Subscription dialog on the Facebook configuration page, then select “message_deliveries,” “messages,” “messaging_optins,” and “messaging_postbacks” from the Subscription Fields. Next, set the value of field “Verify Token” to “my_test_token”. Finally, click “Verify and Save”. When you are done, the dialog will look as follows (all identification information has been removed from the URL for security reasons):
facebook messenger bot security and authenticationOnce saved, you need to select the page to subscribe to your webhooks. Set this to your Facebook page, and your app should be successfully configured! Navigate to the page you created and start a messenger chat:

facebook messenger chatbot application

And with that, our Facebook chat bot is completed! Facebook took the message “Test” that we sent to the page, and forwarded it to our back-end application. The back-end application parsed the message, appended its own data (“Back& bot says:”), and returned data to the user. With this base, the entire power of a web application is available to you.


The above tutorial walked you through creating a Facebook Messenger bot from the very beginning. We built a simple web application with Backand as the backend, hooked it up to a Facebook page, authorized it, and then tested it all without having to write or deploy significant code! In our next article, we’ll look at expanding the bot’s functionality, as well as what exactly is going on with our custom action. Stay tuned!

bots ,messenger ,chat ,facebook

Published at DZone with permission of Itay Herskovits , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}