A framework designed to ease the development effort of chatbots. An effort to give a platform to new developers to build their own chatbot with easy steps.

1. Ram Murat Sharma, @rammrms
rammurat.rms.sharma0@gmail.com

2. Agenda
 Introduction
 Bots
 Facebook bots
 Prerequisite
 Demo
 CNN
 Installations
 Facebook page
 Ngrok (Secure tunnels to
localhost)
 Node server
 Facebook presentation layer
(Structured Messages)
 Facebook templates
 Do we need a framework
 Framework design
 Framework application
flow
 File structure
 WIT API
 Firebase database
 Future of bots
 Framework source code

3. Introduction to chat bots
 Bots are simple artificial intelligence systems that you interact with via
text. Those interactions can be straight forward, like asking a bot to give
you a weather report, or more complex, like having one troubleshoot a
problem with your internet service.
 Short for chat robot, a computer program that simulates human
conversation, or chat, through artificial intelligence.
 Chat bots are used in applications such as ecommerce customer service,
call centers and Internet gaming. Chat bots used for these purposes are
typically limited to conversations regarding a specialized purpose and not
for the entire range of human communication.

4. Introduction to FB Bots
 The Messenger Platform gives you the ability to have conversations with people on
Messenger. We've added new tools for you to build and promote your bot so you can
create a custom experience for your unique audience.
 Why Facebook bot?
 Web plugins - Using plugins, codes and links people can discover your bot and start
conversations.
 Customer Matching - Customer matching allows you to reach people in Messenger if
you have their phone number and their consent to be contacted by you.
 Structured Templates - You can format your messages in a variety of ways. Send
simple text and images, or use our structured templates to customize your message
bubbles.
 User Controls - Provides people with even more ways to control the conversation and
make sure they can reach the businesses they care about.

5. Prerequisite
 Good JavaScript knowledge
 Ngrok installed(Secure tunnels to localhost)
 Facebook page
 Node server running
 WIT account (NLP)
 Firebase account (Google database)
 Browser

6. Demo (CNN - https://www.facebook.com/cnn/)
CNN was among the first publishers to launch a bot in April, which is available to its global
audience. CNN currently has a Facebook audience of 22 ML people, and CNN International has 12
ML. You can ask for news as per your interest by writing, for ex: “Latest on Donald Trump”

7. Let’s do some
installations first

8. Installation : Facebook page
 Go to your app dashboard page - https://developers.facebook.com/apps/
 Create new app by clicking messenger tab
 Generate your access token
 Subscribe your page for webhook
 Create your callback url after installing ngrok and set your token in config file
 Update your webhook details as shown below under webhook tab on Facebook
page
You must need a Facebook page to start with, which provides you complete
features including a button to start your chat.

9. Installation : Ngrok
You also need to setup a secure tunnel to your localhost server. Ngrok is a tool
that allows you to easily expose your localhost server to the outside world.
Make sure your firewall won’t block this.
 Download ngrok - https://ngrok.com/
 Open command prompt and run “ngrok http 80”
 Copy randomly generated domain name to link with Facebook
webhook, here it is “https://9d71cd26.ngrok.io”

10. Installation : Node server
You also need to setup a node server on your localhost, which is responsible to
handle and respond all the client/user requests. This server will act as a
webhook or callback handler to Facebook API.
 Download nodejs - https://nodejs.org/en/
 Download framework from github
 Go to synced folder
 Open command prompt and run “npm install”
 “/webhook/” with post request is implemented to handle all the
request.

11. Facebook
Messenger Platform

12. Facebook Presentation layer
Template types
 Text message
 Audio message
 Video message
 Option List
 Carousel
 Quick replies
 Persistent Menu
 Airlines templates
Facebook messenger platform provides presentation layer, which has all the
required templates. You don’t need to write any HTML or CSS for this.
Structured Messages :- Structured messages support multiple templates to enable
different kinds of use cases. The button and generic template can render buttons
that open a URL or make a back-end call to your webhook. And the receipt
template can be used to send the receipt.

13. Facebook Presentation layer
These templates contains Normal text, Option list, Quick replies and share location.

14. Facebook Presentation layer
These templates contains Order receipt, Dialog popup and Airlines design.

15. Do we need a Framework?
Imagine, you need to develop couple of chatbots which will
help you to book movie tickets, order food like pizza or burger
and book your table in some restaurant.
Problem : You need to setup server, client, configuration file,
define templates, structure your code, integrate your chatbots
with NPL processors/engines and store chat history somewhere
to cloud server.
Solution : This framework provides pre-designed Facebook
templates, built-in integration of system with WIT (NPL engine)
and cloud database (Google Firebase) with your application. All
you need is to put your questions in some JSON file, and load it
in JavaScript object and run your application. You can further
map your questions with WIT API as per your application flow.
The framework will automatically save the chat history on cloud
server i.e. firebase.

16. Facebook Templates
 Text message template
In this template all you need is “message” that you want to send and a 16
digit user’s Facebook id like “1100223344556677” to identify the user
 Option list template
The list template is a template that allows you to present a set of items
vertically. It can be rendered in two different ways. One list comes with action
buttons, for ex:- Add to cart, Buy now etc. while the other one comes with
normal list, with or without a product image
 Carousel list template
 Carousel list template is generic template and follows almost the same
structure of option list, but it displays it’s data in carousel instead.
 Receipt template
 Receipt templates are used to send order confirmation to the API, with the
transaction summary and description for each item.

17. Facebook Templates
Option List Template Receipt Template

18. Framework Design
 Presentation layer
Presentation layer is provided by Facebook
only, no need to create any html or style.
 Application Layer
Application layer plays the role of webhook
handler, means it handles all the postback
reply and direct text messages of user.
 WIT layer
WIT layer or API is used to process human
natural language
 Service Layer
Service layer is responsible to send messages
to the user, process user request and apply
specified template as per requirement.
 Data Layer
Data can be drive either from any static JSON
file or firebase, both methods are available
with the framework.

19. Framework Application Flow

21. Framework files description
 Configuration file
This file is created to store all the configuration of framework including Facebook access token,
WIT API token, firebase option settings, server details like port, IP address and application flow
mapping.
 Chat response handler
This handler is the main handler which handles all the requests from Facebook including post-
back and direct text request. This handler also manages what could be the next question to ask.
 Template manager
Template manager contains all the pure functions and return templates as per Facebook
guidelines.
 Service handler
This handler is responsible to save user conversation, send messages, and map Facebook
templates.
 Data origin/load
Data can be provided to system either from static JSON file or any database like firebase. This
framework has an option to ingrate anyone of the these option.
 User class handler
User class is created to store user information and his/her activities after he/she start the chat
session.

22. Utterance (WIT.AI)
 Wit.ai makes it easy for developers to build applications and devices that you can talk or text to.
Wit.ai learns human language from every interaction. They have recently extends their previous
intent-oriented approach to story oriented approach.
 In Wit.ai we can use Entities, Intents, Context and Actions concepts that together form the model
based on Machine Learning, and statistics can be used for understanding the language.

23. Database(Google Firebase)
Firebase is a mobile platform that helps you quickly develop high-quality apps, grow your user
base, and earn more money. Firebase is made up of complementary features that you can mix-
and-match to fit your needs. The company was acquired by Google in October 2014, and added a
significant number of new features in by May 2016. Firebase can be the fastest and one of the
recommended option for chatbot applications, whenever you want to save your chat history.

24. Framework Source Code
For more information or quick documentation and source code, you can
check out the below link on GitHub.
https://github.com/rammurat/facebook-bot-framework

25. Thank You