Steps to Create Your Own Facebook Messenger Chatbot
Shane Barker
Founder @TraceFuse.ai | Amazon Expert | E-commerce Strategist | Influencer Marketing Specialist | Speaker
It’s been over three years since Facebook announced the launch of Facebook Messenger chatbots. Since then, loads of brands have created their own chatbots and added them to Facebook Messenger in a bid to improve their customer service.
By 2018, there were more than 300,000 chatbots on Facebook Messenger. This marked an increase of 100,000 chatbots in just one year.
From these numbers, it’s evident that Facebook Messenger chatbots are beneficial for brands. They help improve the quality of customer service by solving the customer’s queries within minutes.
A Facebook Messenger chatbot can instantly reply to any message, thus removing the waiting time for customers. Additionally, it’s available 24×7, unlike human customer support, which may not be present round-the-clock.
It can also help brands save on recurring expenses such as the salaries of their staff. You can even use one to market new products and simplify the purchasing process.
With the advent of AI-powered chatbots, you can expect your customer experience to skyrocket on implementing them.
While it may seem difficult to develop your own Facebook Messenger chatbot, it’s not as hard as you may think. There are thousands of platforms out there that can help you build a Facebook Messenger chatbot.
You can even find many online chatbots that you can directly integrate into Facebook Messenger.
Now, let’s take a look at how to develop a Facebook Messenger chatbot from scratch. Here’s how you can do it.
1. Choose Your Platform for Facebook Messenger Chatbot
The two major platforms that you can use to build your Facebook Messenger chatbot are Dialogflow and Wit.ai. Dialogflow is a service by Google while Facebook owns Wit.ai. Let’s take a look at them:
a. Dialogflow
This platform allows you to natural language processing, speech to text, and artificially intelligent systems. You can train them by creating your customized functionality.
Through machine learning, this tool can understand what users are talking about. The best parts about this platform are that it can recognize over 15 languages, is free, and makes it easy to create a chatbot.
However, it’s not very customizable, and you may find it challenging to do platform implementations.
Image via Ignite Visibility
b. Wit.ai
Wit.ai is also similar to Dialogflow and helps you process natural language. In addition, it can filter out useful data such as context and intent.
The user-friendly UI makes it easy to develop your first Facebook Messenger chatbot. Just like Dialogflow, it’s free, adaptable, and integrates NLP. However, it may take you some time to learn how to implement it and isn’t very visual as well.
While Wit.ai is a great platform, Dialogflow is better for beginners and has extensive documentation to guide you through as well.
HANDPICKED RELATED CONTENT:
Hence, we’ll take a look at how you can develop your Facebook Messenger chatbot using it.
Image via Gupshup.io
2. Set up the Development Environment
You need to start by creating a webhook that provides other apps with real-time data. Unlike other APIs, it continuously keeps sending data to other applications. To create this webhook, you can use Express.js.
Start by creating a directory called “Facebook Messenger chatbot.” On creating this, you can go to the terminal and initialize Node.js. Once you’ve done this, you can install Express.js to create a server. You’ll also create a middleware called body-parser for parsing new incoming requests.
For this, you need to type the following in the terminal:
npm install express body-parser –save
Post the installation, go to the directory and make a file called index.js. After that, start the Express server and set the listening to port 3000. Save it.
To check if it’s working, you can run the following in the terminal.
node index.js
If it’s working, you should get a message that says, “Webhook server is listening, port 3000.”
Now, you need to create two endpoints. The first is for the initial verification of Facebook. You’ll need to get a token as you’re connecting a Facebook page with the webhook server.
This token shall be matched with the webhook server’s response to ensure it’s the same server. The second endpoint is for all the other messages that you receive from Facebook Messenger.
To simplify things, separate your code in two folders. You can name them controllers and helpers. The first endpoint should be created in controllers and be named verification.js. The code for it is:
module.exports = (req, res) => {
const hubChallenge = req.query[‘hub.challenge’];
const hubMode = req.query[‘hub.mode’];
const verifyTokenMatches = (req.query[‘hub.verify_token’] === ‘mynewbot’);
if (hubMode && verifyTokenMatches) {
res.status(200).send(hubChallenge);
} else {
res.status(403).end();
}
};
You can change the string called “mynewbot” to anything you wish. Do keep it in mind as you will need it later while setting up the Facebook app.
The second endpoint too goes in the controller folder and is called messageWebhook.js. The code for it is as below:
const processMessage = require(‘../helpers/processMessage’);
module.exports = (req, res) => {
if (req.body.object === ‘page’) {
req.body.entry.forEach(entry => {
entry.messaging.forEach(event => {
if (event.message && event.message.text) {
processMessage(event);
}
});
});
res.status(200).end();
}
};
Once you’ve done this, stop the console by typing:
node index.js
HANDPICKED RELATED CONTENT:
3. Setup Proxy Server
It is necessary to setup a proxy server because our local Express server isn’t available for everyone on the internet. Additionally, the server doesn’t support HTTPS, however, you need it as it’s a necessity for Facebook Messenger. For this, you can set up a grok server.
To set up a grok server, you can use ngrok. It helps in setting up secure tunnels from public endpoints to your local network. After installing ngrok, you need to open the terminal and then type the following
Continue reading this article on Shane Barker's blog.