Quickstart Bots for Messenger from Localhost

In this post we will see how to configure and quickstart bots for Messenger using your Localhost as an external SSL webhook endpoint server thanks to ngrok.

Get the Facebook Messenger Platform Bot sample

First of all you’ll need to get the Facebook Messenger Platform sample (it’s just a node server pre-configured to bootstrap your Bot project).

$ git clone https://github.com/fbsamples/messenger-platform-samples.git
$ cd node && npm install

Register your Facebook Messenger Bot

For the next steps, you’ll need a Facebook Developer Account, don’t worry if you haven’t already one Facebook will propose you to create a new one.

Step 1 — Create a new Facebook Page for your Bot https://www.facebook.com/pages/create

Give some basics informations about your Bot and create the page.

Step 2 — Create a new Facebook App for your Bot https://developers.facebook.com/quickstarts/?platform=web

Choose a name for your App Bot and go !
Fill some basics informations about it.
Click on “Skip Quick start” we just don’t care.
Click on “Add Product”
Setup a new Messenger Product by clicking on “Get Started” in section “Messenger”
Setup webhook by clicking on “Setup Webhook”

Ngrok

What is Ngrok ? Ngrok allowing you to expose a local server behind a NAT or firewall to the internet.

Why we need to use it ? Cause Facebook Messenger Bots works by sending requests to an external server when an action is performed (that is called a Webhook).

First, download ngrok here → https://ngrok.com/download

Launch it in your favorite Terminal (we use port 5000 cause the Messenger Bot Node server is running on this port).

$ ./ngrok http 5000
After launching ngrok, you will see this output.

Configure and init your Bot

Open “./messenger-platform-sample/node/config/default.json” and fill it with your app informations, example:

{
“appSecret”: “MY_APP_SECRET”,
“pageAccessToken”: “MY_PAGE_ACCESS_TOKEN”,
“validationToken”: “CHOOSE_A_PERSONNAL_TOKEN”,
“serverURL”: “https://YOUR_SERVER_URL"
}

To get your personnal“appSecret”, “pageAccessToken”, go back to your “Facebook Bot Setting”:

To get your “pageAccessToken” select your Bot’sFacebook Page you have created before, a token will be generated, copy-past it
To get your “appSecret”, go to “Dashboard” and click on “Show”, copy-paste this code

That’s it ! You have filled all the informations for your bot.

Init the bot

Start the bot node server from “messenger-platform-sample/node” folder.

$ node app.js

Finalize Facebook Messenger Bot registration

Know we have a valid https server endpoint who forward the traffic to our localhost node server who contains the logic of our Bot.

Replace Callback URL by your own ngrok generated url (don’t forget the ‘/webhook’ at the end of the url). VERIFY_TOKEN by your own personal validation token filled in ‘default.json’ before.

Also, be sure to have check:

  • message_deliveries
  • messaging_optins
  • messaging_postbacks
  • messages

Last step

→ you have to select page name (of your bot) in the Webhooks section “Select a page to subscribe your webhook to the page events”.

Check the Webhook connection

Click now on “Verify and Save”, if all is alright, your bot is now up !

Have a check by sending a message to him and by looking on your node server log and ngrok log, if everything is alright you will see some details…

Send some messages to your bot, he will answer to them !
You will see the Facebook Webhook call to your localhost ngrok endpoint.
And of course, you will see the request emitted by Facebook !

Et voilà !

Thank you for reading me, hope that you have enjoyed this Quickstart Bot Messenger from Localhost !