How to Build FB Chatbot Using Amazon Lex (Part 2)

In the first part of the blog How to build FB Chatbot using Amazon Lex  we were talking about how to build conversational chatbots using Amazon Lex. We specified the basic conversation flow and Lex took care of the rest. Now, let’s connect the Lex Bot to a Facebook messenger.

Setting up the connection is back and forth process between the Facebook application, Lex Bot and Facebook page. So, be prepared to jump on different pages and setups.

We are going to cover the following topics:

  • Create a Facebook page
  • Create a Facebook application
  • Integrate Facebook messenger with the Lex Bot

Create a Facebook page

 

A Facebook Page will be used in order to access your Lex bot using the messenger option that is available on that page. In order to create a Facebook page, you need to have a Facebook account. From your Facebook account’s Home screen, access Create page option or you can follow this link. https://www.facebook.com/pages/creation/. In both cases the procedure is the same:

  • Choose Page type
  • Enter name and address
  • Choose profile and background image

Now, you have your Facebook page.

Create a Facebook application

 

A Facebook application is what links your Facebook Page to your webhook. A webhook is the core of your messenger bot experience, the place where your code lives and the place where you receive, process and send messages. Now, we will create one Facebook application and configure various settings for the Messenger bot. We will also generate access tokens and choose what events will be send to the webhook.

In order to create a Facebook application, you need to have a Facebook developer account. If you do not have one, you can create it on https://developers.facebook.com/. You need to be logged into your Facebook account in order to create a developer account. For more info, please refer to https://developers.facebook.com/docs/apps/register/

After you register successfully, let’s create one Application:

  • click Add New App from MyApps drop down,
  • insert app name and contact email and
  • click Create App ID.

 

Create Facebook application

Create a Facebook application

 

Now, the Facebook app is created and you can configure the details for your application. We will use two products: Messenger and Webhook.

 

Facebook Application Dashboard

Facebook Application Dashboard

 

In this phase of setting up the Facebook app, we will add only the Messenger product:

  • From the listed Products, select Messenger,
  • Click Set Up

From the Messenger product, go to settings and navigate to Token Generation:

 

App Token Generation

App Token Generation

 

From the dropdown menu, select your page. The form will prompt you to log in with your FB account. Just click accept and a Page Access Token will be generated. Copy and keep this Access Token, because together with the App secret, it will be used when setting up the Lex bot.

Set up the Channels in Lex Bot

 

The Channels in the Lex Bot are used to integrate the Facebook messenger with your Lex bot. For this integration we need two things:

  • Page Access Token
  • App secret

The Page Access Token was generated in the previous step from the Messenger product in the Facebook application. The App secret can also be found in the Facebook application. Navigate to Settings -> Basic and in the upper right corner you will see the App secret. It is hidden so additional authentication is needed in order to see it. Use your Facebook account.

Now, that you have everything for the integration setup, let’s start. Go to Channels on Chat Bot on AWS Lex:

 

Integrate Bot

Integrate Bot

 

In the Verify Token field enter some string value that will be unique. It will be used in the verification of your callback URL. Save that value, because the same will be used in the Webhook setup.

Fill the fields and click Activate. At the bottom of the same page you will have the Endpoint URL that will be used as a callback URL in the Webhook setup.

 

Callback URL

Callback URL

Webhook setup

 

Navigate to your Facebook application and from Product list choose Webhook. You will get to the page where you can do the setup.

 

Webhook Setup

Webhook Setup

 

From the dropdown menu choose Page and enter the callback URL and Verification token from the Lex bot:

 

Verify Token

Verify Token

 

Click verify and save. Now you will get a list of subscriptions. Subscribe to Messages.

 

Choose Webhook Events

Choose Webhook Events

 

The Webhook configuration can be done here and also from the Messenger product setting page. If you navigate there you can edit the events for webhook. In each approach, be sure to select messages and messagin_postbacks at least:

 

Select Events

Select Events

 

And last thing, subscribe your page to the webhook.

 

Subscribe Page

Subscribe Page

 

You haave completed the integration process. Now you can use your Lex Bot via Facebook messenger from your Facebook page.

 

Aleksandar Gjorgievski and Katerina Tashoska

InterWorks