Facebook Messenger BOT

Facebook Messenger BOT

On Tuesday 12th, April 2016, Facebook launched the messenger API which allows businesses build BOT that can relate with the customers and prospective customers from the messenger app for both android and ios. What does this mean for small business and brand? It means that their customer can request for quote, product prices, services, service receipt, etc. Trust me the use cases are out of this earth. So I decided to give it a try. Follow the steps below to create you first Facebook Messenger BOT

  • Create a Facebook App and Facebook Page
  • Setup Webhook
  • Get Page Access Token
  • Subscribe the App to the Page
  • Set welcome Message

For the sake of this lesson , I am going to assume that you already manage a facebook page. If you don’t then follow this link to create one. I am also going to assume that you have a facebook developer account. To create our test app click here. Now that we have created the app, click on messenger on the left menu of the dashboard like below. Click on select pages and select the page you want to link to your BOT app, this automatically generates a page token for you.

Facebook Messenger BOT Settings
Facebook Messenger Settings

Setup Webhook for your Messenger BOT

Before we can set up webhook for the messenger BOT we need to build our app so we can point the webhook URL to a live web app.  Download this starter app and host it on Heroku. After hosting it create the following environment variable:

  1. ACCESS_TOKEN
  2. PAGE_TOKEN
  3. PORT

ACCESS_TOKEN is any random string for the sake of this lesson let us make this “my_facebook_messenger_bot_token”. PAGE_TOKEN is the token facebook displayed when you selected the page that would be linked to our app. Finally, PORT is the port you want your app to run on. Now that we have hosted the starter app on Heroku and set the necessary environment variable, click on “setup webhook” on the app dashboard as shown on the image above. Clicking the setup webhook button should show the below dialog:

Facebook Messenger Bot webhook setting dialog
Facebook Messenger Bot webhook setting dialog

Replace the callback URL with your Heroku app URL slash webhook i.e if our Heroku app URL is https://testbot.herokuapp.com then our callback URL would be https://testbot.herokuapp.com/webhook. Replace the Verify token with whatever value you configured for the environment variable ACCESS_TOKEN in our case it should be “my_facebook_messenger_bot_token”.  Check all the subscription field and press the “verify and save ” button.

Subscribe the App to the Page

Before we can start sending and receiving messages on facebook messenger we need to subscribe the app to the selected page.  To do this all we have to do is make a POST request https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=<PAGE_TOKEN>. Replace <PAGE_TOKEN> with the token facebook automatically generated when you selected a page from step 1, you should get a success response.

Set welcome Message

Users may enter messenger in multiple ways including clicking on the message us button on the page. Since the user is chatting with your BOT for the first time, it would be nice to show a welcome message. Setting this up is as easy as making a POST request to https://graph.facebook.com/v2.6/<PAGE_ID>/thread_settings?access_token=<PAGE_TOKEN>. Replace <PAGE_ID> with your page ID and replace <PAGE_TOKEN> with your page token. Send the below as your post parameter, do not forget to change Content-Type to “application/json”.

{
    "setting_type":"call_to_actions",
    "thread_state":"new_thread",
    "call_to_actions":[
        {
            "message":{
                "text":"Welcome to My Test Bot!"
            }
        }
    ]
}

By doing this when users chat with you for the first time they get that message “Welcome to my Test Bot!”. The starter package already handles messages sent via you Messenger Bot by replying with “Did you just say ” + WHAT THE USER SAID. In my next post, I would dig down into handling all sort of messages, sending text and structured responses, handling postback from structured responses and links etc.

The starter package already handles messages sent to your Messenger Bot by replying with “Did you just say ” + WHAT THE USER SAID.  In my next post, I would dig down into handling all sort of messages, sending text and structured responses, handling postback from structured responses and links etc.