Use Watson Assistant and Botkit to create a Facebook Messenger chatbot

In this blog, we will demonstrate how to build a Facebook messenger chatbot using the Watson Assistant service and Botkit middleware. The Watson Assistant service allows you to quickly build conversations for chatbots and virtual agents. Botkit is designed to ease the process of designing and running useful, creative bots that live inside messaging platforms, such as Slack, Facebook, and Twilio. The Botkit middleware we use is created by the Watson Developer Cloud team as a plugin to Botkit. It allows developers to easily integrate a Watson Assistant workspace with the messaging platforms supported by Botkit.

Prerequisites

Configure Watson Assistant service and create a conversation

The first step, is to create a Watson Assistant service in IBM Cloud. Then, create a new Watson Assistant workspace, and begin to define Intents, Entities and the Dialog. Finally, let’s build a simple chabot by following this getting started guide. This conversation forms the basis for our integration with Facebook messenger.

Take note of the Watson Assistant credentials when creating the service. We will need the USERNAME, PASSWORD and WORKSPACE ID in later steps.

Create a Facebook page and configure Facebook Messenger

  1. Create a Facebook page to deploy the Facebook messenger bot. If additional help is needed, refer to Facebook’s How do I create a Page? documentation.
  2. Go to Facebook for Developers, click on My Apps, and select the Add a new app option.fb-dev-1
  3. Create a new app ID by entering a Display Name and Email.fb-dev-2
  4. Once the app is created, go to your app’s Settings, and under PRODUCTS, click Add Product. Select Messenger, and choose to Set up the messenger product.fb-dev-3
  5. Create a page access token to start using Facebook APIs. This page token has all messenger permissions, regardless of whether your app is approved to use them or not. Select your page and choose to generate a token. Make note of the token, as it is required in a few steps. Note that these tokens do not expire.fb-dev-4

Configure Botkit middleware

  1. Fork and clone the Botkit middleware repository.
    git clone https://github.com/watson-developer-cloud/botkit-middleware.git
    cd botkit-middleware
    
  2. Navigate to the folder examples/multi-bot within the repository. You can choose to either deploy your bot to a single platform (Slack, Facebook, or Twilio), or choose multiple platforms. For this exercise, choose to deploy to Facebook Messenger only.
    cd examples/multi-bot
    
  3. Edit the .env file by updating the Watson Assistant USERNAME, PASSWORD and WORKSPACE ID.
  4. Still in the .env file, specify the Facebook related variables FB_ACCESS_TOKEN, FB_VERIFY_TOKEN, FB_APP_SECRET and USE_FACEBOOK.
    FB_ACCESS_TOKEN=<token you had generated in the token generation step>
    FB_VERIFY_TOKEN=<random token that you can generate>
    FB_APP_SECRET=<secret key which Facebook provides available in the facebook developer dashboard>
    USE_FACEBOOK=true
    
  5. Upload your application to IBM Cloud from your working directory (examples/multi-bot). Follow the steps for Uploading your application to push your application to IBM Cloud through the CLI.
  6. You can check your IBM Cloud dashboard to view the application after it starts running successfully. Take note of the application URL as that is required in a few steps.
  7. Go to the Facebook apps page, configure the Webhook with your IBM Cloud application URL, and verify the token.
    Callback URL: https://<your_unique_url>.mybluemix.net/facebook/receive
    Verify Token: random token that you specified in step 4
    

    Ensure the messages and messaging_postbacks options are selected. Click Verify and Save.

    fb-dev-6

  8. In order for your webhook to receive events for a specific page, you must subscribe your app to your page. You can do this in the Webhooks section under the Messenger tab.fb-dev-1

Your Facebook messenger chatbot is now ready! You can test it by using Facebook messenger!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s