Developing chatbots for Facebook messenger platform

Introduction

Before E-commerce online shops are invented we always had an opportunity to talk to a sales representative or distributor when choosing goods or services. After moving to digital world, this area became silent. Is that convenient for customers? I think not. It is much easy to ask a question for sales rep or dealer about desired product or service onstead of searching through multiple catalogs and stores. Today, almost every 'modern' person is using messenger application - WhatsApp, Facebook messenger, Slack, Yahoo, etc. Facebook is giving wonderful ability for developers to make e-commerce, online shops, services and other distribution agency more friendly to their customers - enabling live dialogs - talking with simple AI representative like with a real dealer at the shop.

Background

Apparently, most of Internet users have negative associations with word 'chatbot'. This article has nothing to with spam bots, it's only about useful tiny programs which are designed to simplify life for customers by making online sales and goods distribution interactive.

Designing a chatbot

Normally, chatbot is a tiny application, in case of Facebook messenger ( this article concerns only Facebook chatbots ) it is called webhook. It's basically a web endpoint, which is accepting messages sent from facebook. The webhook is processing incoming message - which is a chat message received from Facebook page, analyses it and sends back a response based on the message content. The response could be just a string - message chatbot reply or extended content like images, web links, audio, video, etc. Basically, we can define major steps to develop a facebook messenger chatbot:

1) Creating a Facebook page which will use chatbot webhook for chatting with customers. (when developing chatbot for existing page, this step should be obviously omitted). For example: https://www.facebook.com/sskotugoroshko

2) Registering Facebook app for the messenger chatbot https://developers.facebook.com/apps

3) Building or renting hosting place for the webhook with some DNS name, for example: http://fbwebhookbotsem.herokuapp.com . The webhook can be done using .Net, PHP, Java or Node.Js whicheve you like, the hosting environment should be appropriate.

4) Preparing flow cases or chat diagrams in format of message - response for constructing a dialog.

5) Choosing which one Artificial Intelligence engine to use. The possible options are following:

• Self coded string parsing with primitive if-else logic. The advantage is that it's highly customizable.
• Using self-coded chatbot core based on ELIZA AI architecture. The eliza is epic, basic AI architecture for any chatbot. It defines the basic principles and turnovers to support a human like conversation ( chat ).
• Building own Artificial Intelligence engine, using NLP or similar, which requires strong, advanced knowledge in developing human like intellect (neural networks, machine learning, etc.).
• The most popular nowadays is using external Artificial Intelligence engine - through web API, for example Wit.AI, or RecastAI there are many others open, modern AI APIs coming on the way.

6) Implementing the webhook using selected AI engine.

7) Doing live tests, to make sure that the bot is supporting conversation as desired. Adding and monitoring chat logs, to identify and fix difficult chat cases.

For me, the best technology for implementing webhook is Node.Js, it's very intuitive, simple, easy to deply and hosting is cheep or even free. In this article I'm going to use code sample provided by facebook when explaining the chatbot webhook behaviour. The code sample can be downloaded from the official GitHub page: https://github.com/fbsamples/messenger-platform-samples. This example is done using Node.Js, it supports very simple commands to show capabilites of FB messenger platform. In case if Node.Js is choosen for the webhook backend, Heroku can be used for hosting. Heroku provides free hosting plans with limited traffic for different platforms, including Node.Js. 

Creating a page.

Facebook chatbots are designed to operate in page chats, that's why when starting new chatbot needs to set out which page it will be running on. Page Create menu is in the right top corner of the facebook page. If page already exists, just need to know that page ID.

To find Page ID :
1. Go to your page
2. Click "Settings"
3. Click "Page Info"
4. you can see "Facebook Page ID"

For example, I've created a page, for shoes online shop https://www.facebook.com/sskotugoroshko

When page ID is ready, next step is to create Facebook app. It should be done on the following page: https://developers.facebook.com/apps

when the app is created, it needs to configure connection between webhook endpoint and page, called 'Subscribe App to Page' it's well explained in the following document https://developers.facebook.com/docs/messenger-platform/guides/quick-start . When is done, the app settings screen should look like this:

Very important! After the setup is done, after implmeneting the webhook and passing all chat tests, don't forget to turn your app ON for public access. Facebook App page -> Settings tab. Othervise, no one from public would be able to chat with your bot.

Creating account on heroku for NodeJs. 

The following article describes in details how to create heroku account and deploy NodeJs application https://scotch.io/tutorials/how-to-deploy-a-node-js-app-to-heroku. Account setup and deployment are fairly easy, I did it in less than one hours, should take about 30 minutes. Heroku account is free to use.

Conversation flow chart or chat cases.

This is the starting point when writting code for the chatbot. Your customer have to provide chart diagram of chat cases to describe desired behaviour of the chatbot. Example of the chat cases can be found on my intro page http://fbwebhookbotsem.herokuapp.com/

Writing the chatbot webhook code.

Now, page is ready, Facebook App is completely setup, hosting environment is created, chat cases are considered, it's time to write code of the chatbot itself. To implement the bot, you would need to follow the chat cases provided by your customer. I'd recommend to use Eliza core, it's available on the GitHub https://github.com/modInfo/Eliza.js-chatbot-in-NodeJS/blob/master/eliza.js OR Wit.AI web interface. On the webhook side the app should listen for posted data at the appropriate address, for example Node.Js code of the server running process:

/*
 * All callbacks for Messenger are POST-ed. They will be sent to the same
 * webhook. Be sure to subscribe your app to your page to receive callbacks
 * for your page. 
 * https://developers.facebook.com/docs/messenger-platform/product-overview/setup#subscribe_app
 *
 */
app.post('/webhook', function (req, res) {
  var data = req.body;

  // Make sure this is a page subscription
  if (data.object == 'page') {
    // Iterate over each entry
    // There may be multiple if batched
    data.entry.forEach(function(pageEntry) {
      var pageID = pageEntry.id;
      var timeOfEvent = pageEntry.time;

      // Iterate over each messaging event
      pageEntry.messaging.forEach(function(messagingEvent) {
        if (messagingEvent.optin) {
          receivedAuthentication(messagingEvent);
        } else if (messagingEvent.message) {
          receivedMessage(messagingEvent);
        } else if (messagingEvent.delivery) {
          receivedDeliveryConfirmation(messagingEvent);
        } else if (messagingEvent.postback) {
          receivedPostback(messagingEvent);
        } else if (messagingEvent.read) {
          receivedMessageRead(messagingEvent);
        } else if (messagingEvent.account_linking) {
          receivedAccountLink(messagingEvent);
        } else {
          console.log("Webhook received unknown messagingEvent: ", messagingEvent);
        }
      });
    });

    // Assume all went well.
    //
    // You must send back a 200, within 20 seconds, to let us know you've 
    // successfully received the callback. Otherwise, the request will time out.
    res.sendStatus(200);
  }
});

For more details, please check the official tutorial repository https://github.com/fbsamples/messenger-platform-samples

Testing the chatbot.

When the chatbot is implemented, it needs to make sure that it behaves according to requested flow. For that you can configure test users, who can chat with bot, while it's in development or test stage, but not live yet (Facebook app settings page, Roles tab, Roles menu):

Working example of a chatbot can be found on my Facebook page: https://www.facebook.com/sskotugoroshko/messages or directly on the messenger page https://messenger.com/t/sskotugoroshko. 

The intro page of the bot: http://fbwebhookbotsem.herokuapp.com/

History

Published by Sem on Wednesday, 11th of January