On April 2016 facebook has announced Bots for Messenger Platform, which helps many business peoples and developers to build their own Responsive Facebook Messenger Bot to attract their customers and clients.
What is Chatbot?
Chatbot is a computer program that reads human conversation through voice commands or text chats and responds to the command accordingly.
Why a Facebook Messenger Bot?
Facebook attracts all generations of people. So it is important that every business page needs something interesting and different to cover more customers. Therefore the Facebook Messenger Bot allows you to send automated or pre-compiled messages to the facebook users who sends message to the facebook business page. Several pages developed interactive messenger bot that allows you to order pizza, book movie tickets, see menu, health tips etc. Which helps to enhance your business to next level.
How to Build Responsive Facebook Messenger Bot?
The chatbot responds according to the pattern that user types, when user types a keyword the bot recognize it as a pattern and sends the template (pre-compiled messages). To build a complete responsive facebook messenger bot we need the followings.
Step 1: Create a Facebook Business Page
Goto https://www.facebook.com/pages/create/ to create a facebook page, Choose your page type/classification and fill up the details accordingly.
Once you have created your facebook page it looks like a following image. Now complete all the basic information like Upload Picture, Add a Cover Picture, Username, About Section etc.
Step 2: Create a Facebook Developer App
Visit developers.facebook.com and login with your facebook ID. Click Create a New App to create facebook app ID. Enter the Display name for your app and your contact email.
When everything goes right the following page will appear on next step.
Select Messenger on left sidebar of the page. This will bring token generation dialogue.
Now select the page in which you want to install the messenger bot. This will popup a Facebook App Permision page
Click continue as your Facebook name .
As a result this will generate a unique access token for your page. Now copy the access token which we’ll be using it in PHP script in future.
Step 3: Build a Web Site
I’m not going to explain how to build a website. I recommend you to google about it. To build a website you need to choose a domain name and a better hosting service.
Step 4: Add Free SSL to your Web Site
Facebook recommends to use only SSL website to setup webhook. Therefore it is important to have a secure https enabled website. Learn here How to Setup Free SSL Cloudflare For Your Website.
Step 5: Install Program O
The next step is to install Program O Chatbot. Program O is an open source Artificial Intelligence Chat bot written in PHP with MySQL. It has in-built Chatbot API. Therefore it is helpful to integrate with our messenger bot. Read our full guide How to Install Program O – PHP | AIML Chatbot.
Step 6: The PHP Script
Setup Webhook Script
Now we need to setup php script that integrates with Program O and Messenger bot webhook. The following gist will do the work you need to replace with
- ‘ACCESS TOKEN‘ with Facebook Page App access token.
VERIFY TOKENenter any string as verify token we will be using it in facebook app webhook.
- bot_id with your Program O bot id and
- siteurl with the url where you’ve installed Program O.
Note: Make sure that you’ve uploaded AIML files in Program O to put your bot to work.
Upload Script to Server
Once you have setup the PHP script upload it to the server. It is recommended to choose a secret URL to your php script. For example1https://example.com/kjnhsdfs54sdfsksdfh75dsfsf5sfd64haddsf/fbpagebot.php
Test Script with Facebook Webhook
Now go back to your facebook app and again choose Messenger from Products in sidebar and click setup webhooks.This will pop up a New Page Subscription dialog box. Now enter the callback url it is the secret location where you have saved your php script. Ex: https://example.com/kjnhsdfs54sdfsksdfh75dsfsf5sfd64haddsf/fbpagebot.php
Now on next input box enter the name of your verify token that you have in the PHP script Ex: lifeofgeek
And Finally select the following Subscription Fields
- messaging postbacks
and click Verify and Save. If everything is good it will show complete message with green tick as following image.
If it still persists any error, please double check your php script that you’ve entered the correct information or check the callback url.
Alright its time to Test your Responsive Facebook Messenger Bot.
Step 7: Test your Facebook Bot
Before you test your bot, check you’ve installed program o successfully and uploaded all the required AIML files.
Now go to your facebook page and click send message button or directly go to https://m.me/<YOUR_FACEBOOK_USERNAME> and start sending message. If your php code was correct then you can see your bot in action!
In this way you can create your own style of responsive bot with the AIML. Show up your creativity with AIML or by Program O custom tags. I’ll share how to create custom tags in Program O in future, stay updated with our blog!
Step 8: Get Approved from Facebook
As you might see the messenger bot responses only to you and it won’t respond to other members on this page. This is due to your app is not available to all users you need to submit the app for review and get approved.
Note: Before you submit your bot for review please ensure usage of your bot and does your bot responses for all the messages user sends
You should also consider the following image.
To submit your app for review go to App Review on left sidebar and Click Start a Submission. Now the prompt will ask you to add items for submission, select pages_messaging and click add items and Finally click Submit for Review. That’s it facebook will check your bot response and verifies it for all users.
You can test our bot @m.me/lkgpasanga
If you have any questions or queries, feel free to ask in the comment box below. 🙂