Facebook Messenger Bot Using Webhooks

By: Sateesh Kulla

Recently at TrueCar, we tested Facebook’s Messenger platform as a tool for our OEM clients to generate leads and distribute incentive codes to qualifying users. This has two benefits.

First, by allowing users to submit a lead within Facebook Messenger and receive the code instantly, we would avoid the significant redemption rate declines associated with the low incentive email open rates that register through our traditional flow. Second, Facebook Messenger provides the capability to re-target users through in-app notifications, which improve conversion at every stage of the funnel.

In this post, I’ll walk you through building a messenger app using webhooks.

Creating a webhook using Rails

Facebook’s Messenger platform will send notifications to your webhook whenever an interaction with its Messenger bot occurs. The webhook we’ll build is a RESTful API containing GET and POST HTTP methods. The GET method is called to verify your API during the webhook setup configuration, and POST is called when the Facebook messenger platform processes event messages during a user interaction with the bot.

You can download the code from https://github.com/sateeshkulla/bot.

1. Add the routes to routes.rb.

2. Add the necessary environment variables (the example setup uses a .env file): this will add the FACEBOOK_PAGE_ACCESS_TOKEN value during the webhook setup.

3. Create a webhook controller with the index and create methods.

4. Create a service class to process the message and to reply to bot actions.

5. Create a test client to call Facebook’s Graph API in order to send messages to the bot (this example uses the “faraday” gem https://github.com/lostisland/faraday)

Set up ngrok to expose the local server to the Internet, and download https://ngrok.com/download. Run the command ngrok http 3000, which will expose the webhook to the internet. This exposure is necessary for configuring webhooks in the Messenger developer app.

Testing the webhooks

Create a Facebook developer account and page for the bot

The term Facebook Page will be used as the identity of your bot. When people chat with your app, they will see the page name and the page profile picture. To create a new page, visit https://www.facebook.com/pages/create.

A developer account is required to create new apps, which are the core of any Facebook integration. You can create a new developer account by going to https://developers.facebook.com.

Create a new app in the developer account.

Configure the webhook and messenger setup

Visit the app dashboard in the developer account: https://developers.facebook.com/apps

Click on Products (+) and then click on the Messenger Set Up button.

In the Messenger settings page, scroll down to the webhook section, and click on the Subscribe to Events button to configure the webhook created in Setting up webhook using Rails, above.

Enter the webhook URL and enter the FACEBOOK_WEBHOOK_VERIFY_KEY token value from the ENV variable.

Select messages and messaging_postbacks. Click on the Verify and Save button and webhooks will be added to products. This will call the GET method of webhook to verify the URL.

Note: https://cfdc8490.ngrok.io is the local URL exposed by ngrok.

Go to the Access Tokens Section in Messenger settings and select the Facebook page you want to subscribe to this app. This is the page that you want your webhook to receive events for when people on Messenger chat with it. (If there is no page, create a new one by clicking on the Create a New Page link).

Copy the Page Access Token and update the ENV variable to FACEBOOK_PAGE_ACCESS_TOKEN.

Go to the webhook section, select the page from the dropdown, and click on the Subscribe button.

In the NLP section, enable NLP for the page. NLP is used to identify email, city, and postal code information.

Test the bot

Whitelist the Truecar domain. Click Settings at the top of your Facebook page.

1. Click Messenger Platform on the left.
2. Edit whitelisted domains for your page in the Whitelisted Domains section.
3. Add https://www.truecar.com/

Log in to Facebook Messenger and search for the page you just created.

Now when you send a message to the bot, it will reply with a welcome message with two buttons. When you click on either button it will ask to confirm the email you provided on your account page and finally will reply with a URL button linked to https://www.truecar.com/

After testing, submit the app for the review for production use, for more information please visit https://developers.facebook.com/docs/apps/managing-development-cycle/

For Java code, check the Git repo at https://github.com/sateeshkulla/MessengerBot.

References

For a more in-depth explanation of how to build a Facebook bot, check out Facebook’s own quick start guide: https://developers.facebook.com/docs/messenger-platform/getting-started/quick-start.

We are hiring! If you love solving problems please reach out, we would love to have you join us!