Build your own chatbot with Watson Assistant for Facebook Messenger

Watson Assistant (formerly Watson Conversation) is the natural language interface from IBM to automate interactions with your end users. I will showcase how you can integrate Watson Assistant with Facebook Messenger.

I’ve hosted my code on the glitch platform, so it can be easily remixed, and extended to your needs. The chatbot will be able to respond to the user depending on the user’s intent.

Watson Assistant allows little logic integration. Due to this, we need a middleman between Assistant & Facebook to handle more complex logic. In good programming jargon, we call this middleman an orchestrator. Such limitation forces us into separation of concerns, and that’s a good thing. The assistant is only focusing on interpreting a message, the orchestrator for logic execution and Messenger for the message delivery to our user.

No pre-requisites are needed to follow along, but you will need some Javascript and Node skills if you would like to take it a step further (and you should!) in terms of functionalities.

What you will need:

1. Remix the starter code from https://glitch.com/edit/#!/facebookbotandwatsonassistant (Top left on the name and in the dropdown you will find the remix button)
2. A Facebook account, to create a Facebook page
3. A Facebook Developer application on https://developers.facebook.com/apps/
4. An IBM Cloud account (it’s free!) at https://console.bluemix.net/

Glitch.com

https://glitch.com will allow us to deploy our Node.js app without hassle. It has some nice functionalities: code remix (like you have done), code collaboration and sharing through the community are some of them.

All the code is available and ready to be used at https://glitch.com/edit/#!/facebookbotandwatsonassistant

The code requires no adaptation, except the .env file that will require your own environment variables. You will need to remix the project at this point to follow along.

There are improvements possible to the code, but the purpose here is to let you understand the picture immediately.

App.get will allow us to validate the webhook from Facebook with the verify_token we provided to both Facebook & the .env file

At every user’s message from Messenger, we check if it’s indeed a message. There are different types of messages(postback, attachment) For the sake of this tutorial, we only focus on the textual version of message.

At every message, we prepare a payload that we send to the assistant object (which contains the Watson.ConversationV1 SDK) The response of this object is the interpretation of the user’s message (contained in event.message) through Watson Assistant. The result (data) is then being sent back to Facebook through the receivedMessage function

Creating of a Facebook page

You can access the Facebook page creation at https://www.facebook.com/pages/creation/

This will be the page we will be interacting with. To allow easier reach of the contact button on your page, you can add messenger via Add a button -> contact you category

Now, by hovering over your Send Message button, you can click on test button to talk to you page via Messenger.

Creating of the Facebook developer application

Access Facebook for developers at https://developers.facebook.com/apps/ and create an application. Inside our application, we will need two products: Messenger and Webhooks. You can add them to your application by clicking on their respective set-up button.

The messenger product will require access to you page you just have created, to generate a token and provide it to our orchestrator.

Inside the messenger product settings, in the token generation section, select the page you created before and copy the token generated.

Going back to your Glitch project, in the .env file paste the page_access_token that you just have copied, and don’t forget to fill in the verify_token with something. I have “tutorial”. All variables in the .env should be surrounded by quotes!

Facebook Developer application webhook

Going back to the Messenger settings, where you have copied the page token, you will see the Webhook section underneath. The webhook will link our orchestrator app to our messenger bot.

The callback URL is the link from your glitch project, you can reach it by clicking “Show Live”. Use this link as callback URL and add /webhook
If you have the same verify token, fill in “tutorial” in the second textfield.

Make sure to select messages & messaging_postback too, as these are the fields we will use for our tutorial. Also select your page you have created and subscribe to it

Watson Assistant

So now we have the orchestrator (our Node app) in charge of handling the logic & Facebook for receiving and sending messages. Time to introduce Watson Assistant to interpret the messages!

Once you have created your IBM Cloud account, you will create an instance of Watson Assistant https://console.bluemix.net/dashboard/apps/

Create ressource → Watson Assistant

You can deploy it in UK or Germany region. Select Lite and create. Before launching the tool, save the service credentials inside Glitch.

Copy the URL, username & password and paste the content inside your .env file in your glitch project. Your .env should look like this

PAGE_ACCESS_TOKEN="page_access_token"
VERIFY_TOKEN="tutorial"
ASSISTANT_URL="https://gateway.watsonplatform.net/assistant/api"
ASSISTANT_USERNAME="username"
ASSISTANT_PASSWORD="password"
ASSISTANT_WORKSPACEID="workspace_id"

Create the workspace that will host our assistant. Before continuing, go back to the workspace overview, so we can copy the workspace ID. You can copy it after clicking on the three dots and view details button.

Watson Assistant is quiet straightforward to understand.
There are 3 main components

1. Intents
   Intents are the way to of recognising the user’s input. The more examples you provide to an intent, the more confident the Assistant will be in giving an answer to a user’s request.
2. Entities
   An entity is a portion of the user’s input that you can use to provide a different response to a particular intent. Let’s take an example: trains. If we would build a bot where a user request his train schedule, the assistant would need to recognize the departure and arrival station in the user’s request. Entities could be used for this.
3. Dialog
   This is the playground where you will architect your dialog tree. Your dialog will consist of multiple nodes that are triggered when the assistant has enough confidence matching a particular intent with it.

Since a couple of versions, Watson Assistant allows us to integrate pre-existing content. Let’s use this as a starting point. Browse the content catalog and add the general intent inside the workspace. This content integrates recognizing of greetings, personal attributes like language but as well request to talk to a human agent for example.

Opening the dialog tab, let’s add two other nodes next to the existing ones.
Let’s create a node below the welcome one and make it detect #general_greetings. Let the bot answer something like “Hello there!”
And another node detecting #General_Agent_Capabilities As an example answer, you can write “I’m able to detect the intents behind your request.”

Make sure that Glitch is still running (the server pauses after a few minutes if it detects no usage) and go test the bot out on Facebook! It should answer appropriately

This example is very simple, but as the integration now works, you can integrate all your logic inside the orchestrator with ease. Go ahead and make something great!

Thanks to this quickstart you get the possibility to add all the functionalities you need to your rockstar chatbot. The possibilities are endless: interaction with a database, a payment gateway, integration of npm librairies,..

Want to continue?
There is a larger starter code available here https://github.com/watson-developer-cloud/assistant-simple