Building Chatbots using Existing Platforms with

NodeJS!Ashish!!

!!Linkedin: https://www.linkedin.com/in/ashkmr!

What are chatbots ?!•  Tools whom you can message and it replies back

accordingly.!

Chatbots: Latest Trend!•  The biggest incoming after the Facebook

messenger.!

•  The biggest in thing since the app stores.!

•  The future of the way we communicate, the way we order things, the way we buy, the way we travel, the way we book things and services.!

•  In future we may forget websites, these bots are going to be the new websites in a way.!

Mobile messaging apps worldwide as of January 2017, monthly active users (in millions)!

https://www.statista.com/statistics/258749/most-popular-global-mobile-messenger-apps/!

No more apps ?!•  Almost 70 percent of all app usage comes from just

200 apps. !

•  Most apps go unused.!

•  Lot easier to get users to just chat with the chatbots than to download an app, login, learn to use and then try to remember its flow.!

Why use chatbots?!

Development cost!

command line! chatbot! website! mobile app!

Deploying updates!

command line! chatbot! website! mobile app!

Push notifications!

command line! chatbot! website! mobile app!

Customer Support!Traditional Way

1.  Find contact info of company through the Internet

2.  Call contact number

3.  Navigate through a sequence of touch tones or semi-functional speech recognition steps

4.  Wait on hold until a specialist is available

5.  Step through a sequence of verifications to make sure it is truly you who is calling

6.  Get told you need to talk with a different representative and get put on hold

7.  Connect with a rep who now tries to have you navigate the Internet via voice instructions

8.  Login to the company website

9.  Finally, get an answer to your question

Future

1.  Open Facebook Messenger and search for the business name

2.  Start the conversation by making a request

3.  Receive rich media feedback (text + images + hyperlinks + voice) that answer your question

Why ChatBots are future of customer support ?!

• Standardised way of interaction!

• Automatic verification via profile (FB, Telegram ...) !

• No “transferring” to “other experts” !

• No media breaks -> web to web (link, pictures, rich-web) !

• Huge cost savings !

• New marketing and up-selling tool for brands!!

Business Chatbots : !Need of the Hour !!

•  If you don’t have strategy on your bot yet, you definitely need to rethink in order to catch up to be competitive in the market.!

•  users like to perform tasks like scheduling meetings, ordering a product, booking a flight etc all via text. Its easier, quicker.!

Business Chatbots Examples!

KUDI!•  KUDI — seamless bill

payment through messaging!

•  Helps users transfer money, buy airtime for their phone, pay bills and stay on top of their bank accounts easily. !

•  More info : https://kudi.ai!

MyStarbucks Barista!•  lets customers place orders by speaking, “I want a

latte.” !

•  can be used to pay for orders. !

•  http://money.cnn.com/2017/01/30/technology/starbucks-mobile-app/!

VerbalAccess!

•  VerbalAccess uses natural language processing technology to empowers its bot to take voice commands and do banking transactions.!

!

•  http://northsideinc.com/index.php/verbalaccess/!

eBay Shopbot!•  eBay ShopBot is a chatbot on

facebook which will help you find a gift for your friend.!

•  You can test eBay Shopbot here: https://www.facebook.com/ebayshopbot/!

Microsoft’s ZO!•  Zo : Social Bot in general!

•  https://www.zo.ai/!

How ChatBots work ?!

1.  Rule based!•  If this, then do that !!

•  If the word “Book” appears, return website where books can be bought or …!

•  If user types “Travel”, then ask for a city name , then send list of “places to see” in that city.!

How ChatBots work ?!

2.  Machine learning!•  Supervised learning!

inputs and their desired outputs, given by a programmed code

•  Unsupervised learning!leaving it on its own to find structure in its input

FB Messenger Platform!•  900 million people around the world who use

Messenger every month.!

•  Available on all platforms, including iOS, Android, and web.!

•  You define the message templates, using features like images, text and calls to action (CTAs) !

Bot for Messenger!•  Three ways to interact!

•  Send / Receive API!

•  Generic Message Template!

•  Welcome screen + Null state CTAs!

Building Chatbot !using !

NodeJS!

Step1!1.  Create a Facebook App and Page, Select

“Messenger”!

Step 2, 3!2.  Setup Web hook!

4.  Enter a URL for a webhook, enter a Verify Token and select messages and messaging_postbacks under Subscription Fields.!

Step 4!Clone the repository : https://github.com/fbsamples/messenger-platform-samples!

4.  In the sample app, this method is defined in app.js!!

app.get(/webhook, function(req, res) {! if (req.query[hub.mode] === subscribe &&! req.query[hub.verify_token] === <VERIFY_TOKEN>) {! console.log("Validating webhook");! res.status(200).send(req.query[hub.challenge]);! } else {! console.error("Failed validation. Make sure the validation tokens match.");! res.sendStatus(403); ! } !});!

Step 5!5.  Get a Page Access Token!

Step 6!6.  Subscribe the App to the Page!

Step 7!7. Receive Messages!

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(entry) {! var pageID = entry.id;! var timeOfEvent = entry.time;!! // Iterate over each messaging event! entry.messaging.forEach(function(event) {! if (event.message) {! receivedMessage(event);! } else {! console.log("Webhook received unknown event ", event);! }! });! });!! // Assume all went well.! //! // You must send back a 200, within 20 seconds, to let us know! // youve successfully received the callback. Otherwise, the request! // will time out and we will keep trying to resend.!

res.sendStatus(200);! }!});! !function receivedMessage(event) {! // Putting a stub for now, well expand it in the following steps! console.log("Message data ", event.message);!}!

Step 8!8.  Send a Text Message from Facebook page!

!function receivedMessage(event) {!! var senderID = event.sender.id;! var recipientID = event.recipient.id;! var timeOfMessage = event.timestamp;! var message = event.message;!! console.log("Received message for user %d and page %d at %d with message", ! senderID, recipientID, timeOfMessage);! console.log(JSON.stringify(message));!! var messageId = message.mid;!! var messageText = message.text;! var messageAttachments = message.attachments;!! if (messageText) {!! // If we receive a text message, check to see if it matches a keyword! // and send back the example. Otherwise, just echo the text we received.! switch (messageText) {! generic! sendGenericMessage(senderID);! break;!! default! sendTextMessage(senderID, messageText);! }! } else if (messageAttachments) {! sendTextMessage(senderID, "Message with attachment received");! }!}!

callSendAPI() function!!function sendTextMessage(recipientId, messageText) {! var messageData = {! recipient {! id recipientId! },! message {! text messageText! }! };!! callSendAPI(messageData);!}!

!function callSendAPI(messageData) {! request({! uri https//graph.facebook.com/v2.6/me/messages,! qs { access_token PAGE_ACCESS_TOKEN },! method POST,! json messageData!! }, function (error, response, body) {! if (!error && response.statusCode == 200) {! var recipientId = body.recipient_id;! var messageId = body.message_id;!! console.log("Successfully sent msg id %s to recipient %s", ! messageId, recipientId);! } else {! console.error("Unable to send message.");! console.error(response);! console.error(error);! }! }); !}!

Lets start sending messages!

A Structured Message!! var messageData = {! recipient {! id recipientId! },!! message {! attachment {! type "template",! payload {! template_type "generic",! elements [{! title "rift",! subtitle "Next-generation virtual reality",! item_url "https//www.oculus.com/en-us/rift/", ! image_url "http//messengerdemo.parseapp.com/img/rift.png",! buttons [{! type "web_url",! url "https//www.oculus.com/en-us/rift/",! title "Open Web URL"! }, {! type "postback",! title "Call Postback",! payload "Payload for first bubble",! }],! }, {! title "touch",! subtitle "Your Hands, Now in VR",! item_url "https//www.oculus.com/en-us/touch/", ! image_url "http//messengerdemo.parseapp.com/img/touch.png",! buttons [{! type "web_url",! url "https//www.oculus.com/en-us/touch/",! title "Open Web URL"! } }]!

}! }!

}! }; !! callSendAPI(messageData);!

Handle Postbacks!function receivedPostback(event) {!! var senderID = event.sender.id;! var recipientID = event.recipient.id;! var timeOfPostback = event.timestamp;!! // The payload param is a developer-defined field which is set in a postback ! // button for Structured Messages. ! var payload = event.postback.payload;!! console.log("Received postback for user %d and page %d with payload %s " + ! "at %d", senderID, recipientID, payload, timeOfPostback);!! // When a postback is called, well send a message back to the sender to ! // let them know it was successful! sendTextMessage(senderID, "Postback called");!!}!

Demo with following keyword Inputs!

•  image !•  gif!•  audio!•  video !•  file !•  button!•  generic!•  receipt!•  quick reply!•  read receipt!•  typing on!•  typing off!•  account linking!

Natural Language Processing Tools!

•  API.AI and WIT.AI !

•  integrate natural language processing and understanding into your applications.!

Comparison!api.ai Wit.ai !

•  Y-Combinator startup, !

•  $3M seed-round by Andreessen Horowitz, Ashton Kutcher and Eric Hahn, !

•  bought by Facebook Inc after 18 months.!

•  API.AI is a conversational UX platform enabling natural language interactions for devices, applications, and services.!

•  $8.6M in 4 Rounds !

•  API.AI is backed by Intel Capital, Motorola Solutions, SAIC Motor, and Alpine Electronics.!

•  bought by Google in Sept 2016!

What does Wit.AI or API.AI do ?

Suppose user types this message!

I want to book ticket for 2 from SanFrancisco to NewYork on 5th Apr 2017.!

These Platforms extracts parts from input, then follows the rules / machine learning as programmed!

Action book ticketTravellers 2From Location SanFranciscoTo Location NewYorkDate 5th Apr 2017

Understanding API.AI!

Understanding API.AI!•  API.AI Agent : a bot, app, service or device that you would like to have

conversation to.!•  Entities: Objects you want to interact with. !

•  example, for travel booking agent, we have location, or date or number Of Passengers as entities.!

•  3 Types of entities: system , developer , and user entities.!

Demo!api.ai!

Thanks !!!!!!!Linkedin: https://www.linkedin.com/in/ashkmr!!