introduction to facebook messenger, conversational ui & nlp
TRANSCRIPT
![Page 1: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/1.jpg)
Introduction to Facebook Messenger,
Conversational UI &
NLP~ Saurabh Sharma
![Page 2: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/2.jpg)
Messanger Platform
Launched on 12th April 2016 in F8 annual developers conference.
![Page 3: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/3.jpg)
Was it a big news?
Facebook unveiled 10 year roadmap, with key stress on AI.
![Page 4: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/4.jpg)
AI Bots Platforms
Use BotList.co (App Store for Bots) to discover bots for all platforms.
![Page 5: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/5.jpg)
Why Messenger is important?
Source: http://www.statista.com/statistics/258749/most-popular-global-mobile-messenger-apps/
![Page 6: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/6.jpg)
Discovering Bots on Messanger
• Currently, Bots listing is not available in India.
• However, you can search by name and use any bot unless developer have put any country specific restriction.
![Page 7: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/7.jpg)
Messenger Bots: Small demo of Yabi
• Greets user by name
• Search out coupons for user and provide in simple plain text avoiding all click bait model.
![Page 8: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/8.jpg)
Trying Poncho: The weather cat
• Greets user by name.
• Predicts weather
• Able to process simple NLP to answer questions.
![Page 9: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/9.jpg)
Human > Bot
![Page 10: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/10.jpg)
Conversational UI• Any UI that mimics chatting with a real human
• Instead of communicating with a computer on its own inhuman terms—by clicking on icons and entering syntax-specific commands—you interact with it by just telling it what to do
• Types:
• Voice assistants
• Chatbots
• Pseudo-chatbot
![Page 11: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/11.jpg)
Why is it important?
• Truly cross-platform
• Removes Human-Computer interaction friction
• More interactive/user friendly.
![Page 12: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/12.jpg)
Rise of Voice Assistants
![Page 13: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/13.jpg)
Where it all started? Chat bubble
Source: http://dangrover.com/blog/2016/04/20/bots-wont-replace-apps.html
![Page 14: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/14.jpg)
And then WeChat started a new revolution in China
Source: http://dangrover.com/blog/2016/04/20/bots-wont-replace-apps.html
![Page 15: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/15.jpg)
Messaging apps are booming
![Page 16: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/16.jpg)
What experts are saying?
![Page 17: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/17.jpg)
Some big news: Foursquare is remaking itself as a bot
![Page 18: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/18.jpg)
Facebook Messenger Bot Development
Step by step Guide
![Page 19: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/19.jpg)
Tech Stack covered in session
NodeJS
Wit.ai
Heroku
Facebook Messenger Bot
![Page 20: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/20.jpg)
Step 1: Gather your armours
Setting your development environment
![Page 21: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/21.jpg)
1.1 HerokuWhy?
• Quick setup, supports all major languages
• Provides HTTPS, a prerequisite for web hooks to integrate with Facebook messenger platform
• Download heroic tool belt: https://toolbelt.heroku.com/
![Page 22: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/22.jpg)
Heroic Commands• Login:
• Create App:
![Page 23: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/23.jpg)
Create WebHook in NodeJS• Install NodeJS and create index.js to serve web hook for authentication (code in next slide)
• Used to verify authenticity of Webhook (Similar to OTP system)
• CheckPoints:
• Should support HTTPS
• Should serve GET request
• Should return challenge code for verification
![Page 24: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/24.jpg)
![Page 25: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/25.jpg)
Add Procfile and upload code
• Add a Profile with this code (it specifies that which file server needs to run):
• web: node index.js
• Push code to Heroku:
git init
git add .
git commit -m ‘’Initial code’
heroku create
git push heroku master
![Page 26: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/26.jpg)
Step 2: Setup Facebook app
Linking app to web hooks
![Page 27: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/27.jpg)
Create page and appCreate:
• Facebook page
• Facebook app
![Page 28: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/28.jpg)
Subscribe web hook to messages
In the pop-up, add web hook and verification token. Click Verify and Save.
![Page 29: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/29.jpg)
Subscribe web hook
Subscribe your web hook to page events.
![Page 30: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/30.jpg)
Receive message• Add a POST method to your web hook to receive
all incoming messages and reply (Text limit is 320 characters).
![Page 31: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/31.jpg)
What more you can do?Welcome screen Structured messages
![Page 32: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/32.jpg)
Things to avoid
• Premature product
• No user guide/help available
• Grammatical mistakes in live version
![Page 33: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/33.jpg)
ChatBot Playbook• Chatbots should make life easier 🔮
• The bot should introduce itself 💁
• Continuous support #
• Always suggest the next step 👟
• Start simple, but quickly add power features ⚡
• Interactions will be short, and that is okay ⏲
• A hybrid experience is the way forward 📱
• Interactions should be simple (
• Personality makes the experience more pleasant 👀
• Start off with a focused chatbot 🚴
• Reply, always 📝
Source: https://chatbotsmagazine.com/the-bot-playbook-7bb6d181a6a9#.auv6qenh6 Thanks to Juraj Pal, CoFounder, Sure (http://besure.io/)
![Page 34: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/34.jpg)
NLPNatural Language Processing
![Page 35: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/35.jpg)
Challenges
• Parsing Natural language i.e. language that people use in chat.
• Dealing with spelling mistakes, poor grammar etc.
• Feeding NLP engine with all possible words.
![Page 36: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/36.jpg)
Few examples• Failed to pick city and
instead of asking location, showing default location’s weather.
• Gave herself a nice name, but failed to detect that.
![Page 37: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/37.jpg)
Wit.ai• Y Combinator startup
• Acquired by Facebook in Jan, 2015
• Launched free Bot Engine in April, 2016
• Provides drag and drop interface to write NLP rules
• Support available for Python, NodeJS, Ruby and as REST services.
![Page 38: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/38.jpg)
Manage multiple apps
![Page 39: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/39.jpg)
Create Story
• Story is series of chat messages to train your Bot.
• Entity is the keyword that is relevant to Bot.
![Page 40: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/40.jpg)
Dealing with multiple message types
![Page 41: Introduction to Facebook Messenger, Conversational UI & NLP](https://reader034.vdocuments.mx/reader034/viewer/2022052405/587bcf621a28ab6c3c8b79c3/html5/thumbnails/41.jpg)
Thanks