Facebook Messenger Platform 2.1Highlight
#AIYA Presented by Atchariya Darote
Built-in NLP
Built-in NLP to enhance automated conversationsDetect date and time, location, phone number, amount of money and email addresses. (english)
Seamless payments flow
Chat Extensions
Expanded set of Facebook Page buttons for MessengerCall to Action (CTA) buttons : Shop Now / Get Support / Get Updates / Play Now / Get Started.
Resources•https://messenger.fb.com/get-started •https://developers.facebook.com/docs/messenger-platform/getting-started •https://developers.facebook.com/docs/apps/register •https://wit.ai/
Messenger Platform Design Kit
Not much. Wanna come over and order food?
I'm bored. What're you up to right now?
Yo
Sup?
Active Now
Henri LirianiHome
100%12500 PM
Nettles +$1.50
Pineapple +$1.50
Sundried tomatoes +$2.00
OPTIONS
Mushrooms, onions, black olives, red bells, garlic, roasted zucchini. The most delicious… See more
1$27.00
Add to Order
Vegetarian
Active Now
Henri LirianiHome
100%12500 PM
Domestic Theatre
Californian
Mission 0.3 mi
$$
1,124 reviews
Fish + Water
Italian
Mission 0.3 mi
$$$$
731 reviews
Kobewa
Japanese
SoMA 0.5 mi
$$
526 reviews
Shock Wave
Tapas / Small Plates
Bernal Heights 0.8 mi$$
648 reviews
See You
American
Mission 0.8 mi
$
1,252 reviews
Current Location 2 People 7500 PM
Reserve a Table
Not much
Wanna hang out?
Hey, what's up?
What about drinks tomorrow at 7?
12;00 PM
Active Now
Henri LirianiHome
100%12;00 PM
Let'sYouI
returnspace123
MNBVCXZ
LKJHGFDSA
POIUYTREWQ
Aa
Hey, how's it going?
Things are good! Same old...
12;00 PM
Aa
You I am I
,?123 .
a s d f g h j k l
z x c v b n m
q w e r t y u i o p1 2 3 4 5 6 7 8 9 0
Active nowLoredana Crisan
12;30
Conversations &Extensions
Messenger Platform Design Kit
iOS SubviewA back button replaces the Extension icon on subviews of the Extension.
Android SubviewA back button replaces the Extension icon on subviews of the Extension.
iOS Root ViewThe root view of the extension has the Extension icon on the left.
Android Root ViewThe root view of the extension has the Extension icon on the left.
Extension Container
Active nowLoredana Crisan
12:30
Title
Active nowLoredana Crisan
12:30
Title
Active Now
Henri LirianiHome
100%12:00 PM
Title
Active Now
Henri LirianiHome
100%12:00 PM
Title
Message Bubbles
Yeah, let me know when you are planning to go! Iʼd want to join as well.
Text message 1
Text message 2
Received Text Messages
Looking forward to going to a Warriors game this season!
Sent Text Messages
Message Bubbles
Message text message text message text.
Button 1
Button 2
Button 3
Message with Buttons
Button 1
Button 2
Button 3
SubtitleSubtitle
Title
Message with Buttons and Image
Message Bubbles
Order confirmation
Metadata
Paid with
Total
Ship to
Visa ·2468
$15.00
1 Hacker WayMenlo Park, CA 94025
Product
Receipt Bubble
Tap to view on mapYour Location
Location Bubble
No Thanks
Send Location
Quick RepliesQuick Replies allow people to send a bot a short preset message
Button
DescriptionDescriptionDescriptiondomain.com
Title
Bot Name
Bot Messages
Button
Streaming ServiceArtistSong
Bot Name
Music Template
Message Bubbles
Airline Boarding Pass Template
I can't wait to see Rogue One, it looks so good!!
Aa
Hello !Hey dude
returnspace123
MNBVCXZ
LKJHGFDSA
POIUYTREWQ
Active Now
Henri LirianiHome
100%12D00 PM
In a far off land, beyond several snow-capped mountains, and far from the countries Vowelia and Consonantia, there lives a punctuation-free society. Located in the town of Bookmarksgrove, it's situated near the coast of the Semantics, a large ocean of language.
A small river named Context flows nearby and supplies all their necessary resources. It's a paradisematic country, in which roasted parts of sentences fly into your mouth.
Send to Conversation
Golden Gate Bridge Golden Gate Bridge
Landmarks Landmarks 29 mi 29 mi
1,690 reviews 1,690 reviews
ExploreActive nowLoredana Crisan
12D30
The Sutro Baths were a large, privately owned public saltwater swimming pool complex in the Lands End area of the Outer Richmond District in western San Francisco, California.
Built in 1896, it was located near the Cliff House, Seal Rock, and Sutro Heights Park. The facility burned down in June 1966 and is now in ruins. The site is within the Golden Gate National Recreation Area and the Sutro
Sutro Baths Sutro Baths
Landmarks Landmarks 27 mi 27 mi
1,230 reviews 1,230 reviews
Explore
ButtonsMessenger Platform Design Kit
iOS Bot with Menu (Root)By default, the bot menu is expanded. Drag the menu down to hide it. The maximum number of root level options is three.
Android Bot with Menu (Root)By default, the bot menu is expanded. Drag the menu down to hide it. The maximum number of root level options is three.
iOS Bot with Menu (Subview)The Bot menu can contain up to five sub-options. Subviews of the menu have a navigation bar.
Android Bot with Menu (Subview)The Bot menu can contain up to five sub-options. Subviews of the menu have a navigation bar.
MANAGEReplies instantlyBot Name
12D30
Type a message...
Option 1
Option 2
Option 3
MANAGEReplies instantlyBot Name
12D30
Option 3E
Option 3D
Option 3C
Option 3B
Option 3A
Option 3
Category62,438 people like this
Bot Name
Option 1
Option 2
Option 3
Send a message...
ManageReplies instantlyBot NameBack
100%12D00 PM
Category62,438 people like this
Bot Name
Option 3A
Option 3B
Option 3C
Option 3D
Option 3E
Option 3
ManageReplies instantlyBot NameBack
100%12D00 PM
Bot Thread
Active Now
Henri LirianiHome
100%12500 PM
Grocery List Edit
Avocados
Greek Yogurt
Hot Sauce
Peanut Butter
Eggs
Spinach
Add a new note
Shared Notes
Create New List
Active nowLoredana Crisan
12530
Trip Ideas
Design Week Portland
IXDA in Lyon, France
Austin City Limits
Hike the Grand Canyon
Go to Joshua Tree
VRLA in Los Angeles
Add a new note
Shared Notes
ListsMessenger Platform Design Kit
ListsMessenger Platform Design Kit List Headers
Title
Title Action
TITLE
TITLE Action
Small
Small with Action
Large
Large with Action
List Rows
Secondary TextPrimary Text
Primary Text
Primary Text
Primary Text
Primary Text
Secondary Text
Primary Text
Primary Text Secondary
Disabled Text
Hint Text
Primary Text
Primary Text
Switch: Off
Switch: On
Icon
Profile Photo
Profile Photo Two Lines
Table Cell
Pressed
Hint Text
Disabled Text
Detail Chevron
Two Lines
List Rows
Secondary TextPrimary Text
Primary Text
Primary Text
Primary Text
Primary Text
Secondary Text
Primary Text
Primary Text Secondary
Disabled Text
Hint Text
Primary Text
Primary Text
Switch: Off
Switch: On
Icon
Profile Photo
Profile Photo Two Lines
Table Cell
Pressed
Hint Text
Disabled Text
Detail Chevron
Two Lines
List Rows
List Rows
Secondary TextPrimary Text
Primary Text
Primary Text
Primary Text
Primary Text
Secondary Text
Primary Text
Primary Text Secondary
Disabled Text
Hint Text
Primary Text
Primary Text
Switch: Off
Switch: On
Icon
Profile Photo
Profile Photo Two Lines
Table Cell
Pressed
Hint Text
Disabled Text
Detail Chevron
Two Lines
List Rows
StylesMessenger Platform Design Kit
I can't wait to see Rogue One, it looks so good!!
Aa
Hello !Hey dude
returnspace123
MNBVCXZ
LKJHGFDSA
POIUYTREWQ
Active Now
Henri LirianiHome
100%12200 PM
10230 AM 1215 PM
8200 PM 10215 PM
4200 PM 6245 PM
4.3 mi3D · RealD 3D · Closed CaptionMain Street Theater
NearbyLocation
MS W T F ST
12 14 1613 15 1711
Thursday, June 15, 2017
Captain Cat Cuddles AdventuresTickets sold by Studio 32 Films
Purchase Tickets
Select ShowtimeActive nowLoredana Crisan
12230
10:30 AM 1215 PM
8200 PM
10215 PM
4:00 PM 6:45 PM
4.3 mi3D · RealD 3D · Closed CaptionMain Street Theater
Nearby
Location
MS W T F ST
12 14 1613 15 1711
Thursday, June 15, 2017
Captain Cat Cuddles AdventuresTickets sold by Studio 32 Films
Purchase Tickets
Select Showtime
#000Primary text
#000 50%Secondary text
#000 34%Admin textDisabled textHint textIcons
#000 20%Dividers
#000 12%Button bgActive
#000 6%Bubbles
#000 3%Wash
Colors: Greyscale
Blue#0084FF
Green#4BCC1F
Red#F0D325
Colors
Typography: Sizes and Line Heights
16pt12ptSmall Text
18pt14ptMedium Text
22pt16ptLarge Text
Line height Font sizeUsage
Typography: Fonts
AndroidRoboto
iOSSF UI Text
PlatformFont Family
StylesMessenger Platform Design Kit
Facebook Messenger Get Started
#AIYA Presented by Atchariya Darote
1. Create Facebook developer account at https://developers.facebook.com/
#AIYA Presented by Atchariya Darote
2. Create Facebook Apphttps://developers.facebook.com/docs/apps/register
4. Bot Setup (next)
3. Create Facebook Fan Pagehttps://www.facebook.com/pages/create/
Hand-on Exercise 30 mins
System Requirements
Python: https://www.python.org/ PIP: https://pip.pypa.io VirtualEnv: https://virtualenv.pypa.io
Python Library for Facebook Messenger
https://github.com/conbus/fbmq https://github.com/enginebai/PyMessager
git clone https://github.com/conbus/fbmq cd fbmq/example virtualenv env source env/bin/activate pip install -r requirements.txt python server.py
Webhook: Secure tunnels to localhost
Download and Installation
ngrok.com
Run in command line:
ngrok http 8080
Webhook: Inspecting your traffichttp://localhost:4040
#AIYA Presented by Atchariya Darote
4. Bot SetupGo to your app settings and under "Product Settings" add a product. Select "Messenger."
#AIYA Presented by Atchariya Darote
4.1 Setup Webhook
#AIYA Presented by Atchariya Darote
4.1 Verify Token “OK”
#AIYA Presented by Atchariya Darote
4.2 Create Page Access Token
#AIYA Presented by Atchariya Darote
4.3 Test on Page Messenger
#AIYA Presented by Atchariya Darote
4.4 Setup Page Token
change ### to {Page Accss Token} (4.2)
#AIYA Presented by Atchariya Darote
4.5 Webhook Data{ "object": "page", "entry": [ { "id": "202794493546167", "time": 1503693969608, "messaging": [ { "sender": { "id": "1286004541476006" }, "recipient": { "id": "202794493546167" }, "timestamp": 1503693968317, "message": { "mid": "mid.$cAADig-KxXwZkTGpbvVeGyUS8YsOt", "seq": 495123, "text": "hello" } } ] } ] }
page id
page id
user id
text message
Question?
#AIYA Presented by Atchariya Darote
Agenda: How to Facebook ChatbotChatbot Technology Overview
FB Messenger Platform 2.1 Overview
Workshop
• Setup FB Developer Account
• FB Developer Dashboard
• Create a FB App and Page
• Link FB Messager to Page
Lauch
Workshop: Developer your FB Chatbot
• Greeting Message
• Webhooks
• Send API
• User Profile
• Messenger SDK
Implement Conversational Dialog Chatbot
Conclusion