How to build Responsive Facebook Messenger Bot & Get Approved

Responsive Facebook Messenger Bot

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.

Create Facebook Page

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.

Facebook Page

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.

Facebook App ID

When everything goes right the following page will appear on next step.

Fb app setting page

Select Messenger on left sidebar of the page. This will bring token generation dialogue.

Token Generation

Now select the page in which you want to install the messenger bot. This will popup a Facebook App Permision page

Continue App

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

    1. ACCESS TOKEN‘ with Facebook Page App access token.
    2. VERIFY TOKEN enter any string as verify token we will be using it in facebook app webhook.
    3. bot_id with your Program O bot id and
    4. 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 example

  • Test Script with Facebook Webhook

Now go back to your facebook app and again choose Messenger from Products in sidebar and click setup webhooks.Setup WebhookThis 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

Messenger Hook

And Finally select the following Subscription Fields

  • messages
  • messaging postbacks
  • messaging_optins
  • message_deliveries

and click Verify and Save. If everything is good it will show complete message with green tick as following image.

Success

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!

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!

Also Read: How to Build Fully Responsive Telegram Bot – PHP Tutorial

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.

App Review

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.

Bot review considerations

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. 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.