The document discusses setting up a Facebook Messenger chatbot using the Messenger Platform 2.1, including creating a Facebook developer account and app, configuring webhooks to receive messages, and testing the bot on a Facebook page. It provides an overview of the technologies and workflows for building a basic greeting message chatbot within Facebook Messenger.

1. Facebook Messenger Platform 2.1
Highlight
#AIYA
Presented by Atchariya Darote

3. Built-in NLP
Built-in NLP to enhance automated conversations
Detect date and time, location, phone number, amount of money and email addresses. (english)

5. Seamless payments flow

6. Chat Extensions

7. Expanded set of Facebook Page buttons for Messenger
Call to Action (CTA) buttons : Shop Now / Get Support / Get Updates / Play Now / Get Started.

8. 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/

9. 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 Liriani
Home
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 Liriani
Home
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

10. Not much
Wanna hang out?
Hey, what's up?
What about drinks tomorrow
at 7?
12;00 PM
Active
Now
Henri Liriani
Home
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 p
1 2 3 4 5 6 7 8 9 0
Active now
Loredana Crisan
12;30
Conversations &
Extensions
Messenger Platform Design Kit

11. iOS Subview
A back button replaces the Extension icon
on subviews of the Extension.
Android Subview
A back button replaces the Extension icon
on subviews of the Extension.
iOS Root View
The root view of the extension has the
Extension icon on the left.
Android Root View
The root view of the extension has the
Extension icon on the left.
Extension Container
Active now
Loredana Crisan
12:30
Title
Active now
Loredana Crisan
12:30
Title
Active
Now
Henri Liriani
Home
100%12:00 PM
Title
Active
Now
Henri Liriani
Home
100%12:00 PM
Title

12. 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

13. Message Bubbles
Message text message text
message text.
Button 1
Button 2
Button 3
Message with Buttons
Button 1
Button 2
Button 3
Subtitle
Subtitle
Title
Message with Buttons and Image

14. Message Bubbles
Order confirmation
Metadata
Paid with
Total
Ship to
Visa ·2468
$15.00
1 Hacker Way
Menlo Park, CA 94025
Product
Receipt Bubble
Tap to view on map
Your Location
Location Bubble
No Thanks
Send Location
Quick Replies
Quick Replies allow people to send a bot a
short preset message

15. Button
Description
Description
Description
domain.com
Title
Bot Name
Bot Messages
Button
Streaming Service
Artist
Song
Bot Name
Music Template
Message Bubbles
Airline Boarding Pass Template

16. I can't wait to see Rogue One, it
looks so good!!
Aa
Hello !Hey dude
returnspace123
MNBVCXZ
LKJHGFDSA
POIUYTREWQ
Active
Now
Henri Liriani
Home
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 now
Loredana 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
Buttons
Messenger Platform Design Kit

17. 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.
MANAGE
Replies instantly
Bot Name
12D30
Type a message...
Option 1
Option 2
Option 3
MANAGE
Replies instantly
Bot Name
12D30
Option 3E
Option 3D
Option 3C
Option 3B
Option 3A
Option 3
Category
62,438 people like this
Bot Name
Option 1
Option 2
Option 3
Send a message...
ManageReplies instantly
Bot Name
Back
100%12D00 PM
Category
62,438 people like this
Bot Name
Option 3A
Option 3B
Option 3C
Option 3D
Option 3E
Option 3
ManageReplies instantly
Bot Name
Back
100%12D00 PM
Bot Thread

18. Active
Now
Henri Liriani
Home
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 now
Loredana 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
Lists
Messenger Platform Design Kit

19. Lists
Messenger Platform Design Kit List Headers
Title
Title Action
TITLE
TITLE Action
Small
Small with Action
Large
Large with Action
List Rows
Disabled Text
Hint Text
Primary Text
Primary Text Table Cell
Pressed
Hint Text
Disabled Text
List Rows
Primary Text
Primary Text
Secondary Text
Primary Text
Primary Text Secondary
Disabled Text
Hint Text
Primary Text
Primary Text
Switch: Off
Switch: On
Table Cell
Pressed
Hint Text
Disabled Text
Detail Chevron
Two Lines
List Rows
Secondary Text
Primary Text
Primary Text
Primary Text
Primary Text
Primary Text
Secondary Text
Primary Text
Primary Text Secondary
Disabled Text
Hint Text
Switch: Off
Switch: On
Icon
Profile Photo
Profile Photo Two Line
Hint Text
Disabled Text
Detail Chevron
Two Lines
List Rows

20. Styles
Messenger 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 Liriani
Home
100%12200 PM
10230 AM 1215 PM
8200 PM 10215 PM
4200 PM 6245 PM
4.3 mi
3D · RealD 3D · Closed Caption
Main Street Theater
NearbyLocation
MS W T F ST
12 14 1613 15 1711
Thursday, June 15, 2017
Captain Cat Cuddles Adventures
Tickets sold by Studio 32 Films
Purchase Tickets
Select ShowtimeActive now
Loredana Crisan
12230
10:30 AM 1215 PM
8200
PM
10215 PM
4:00 PM 6:45 PM
4.3 mi
3D · RealD 3D · Closed Caption
Main Street Theater
Nearb
y
Location
MS W T F ST
12 14 1613 15 1711
Thursday, June 15, 2017
Captain Cat Cuddles Adventures
Tickets sold by Studio 32 Films
Purchase
Tickets
Select Showtime

21. #000
Primary text
#000 50%
Secondary text
#000 34%
Admin text
Disabled text
Hint text
Icons
#000 20%
Dividers
#000 12%
Button bg
Active
#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 heightFont sizeUsage
Typography: Fonts
AndroidRoboto
iOSSF UI Text
PlatformFont Family
Styles
Messenger Platform Design Kit

22. Facebook Messenger Get Started
#AIYA
Presented by Atchariya Darote

23. 1. Create Facebook developer account at
https://developers.facebook.com/
#AIYA
Presented by Atchariya Darote
2. Create Facebook App
https://developers.facebook.com/docs/apps/register
4. Bot Setup (next)
3. Create Facebook Fan Page
https://www.facebook.com/pages/create/
Hand-on Exercise 30 mins

24. System Requirements
Python: https://www.python.org/
PIP: https://pip.pypa.io
VirtualEnv: https://virtualenv.pypa.io

25. 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

26. Webhook: Secure tunnels to localhost
Download and Installation
ngrok.com
Run in command line:
ngrok http 8080

27. Webhook: Inspecting your traffic
http://localhost:4040

28. #AIYA
Presented by Atchariya Darote
4. Bot Setup
Go to your app settings and under "Product Settings" add a product. Select "Messenger."

29. #AIYA
Presented by Atchariya Darote
4.1 Setup Webhook

30. #AIYA
Presented by Atchariya Darote
4.1 Verify Token “OK”

31. #AIYA
Presented by Atchariya Darote
4.2 Create Page Access Token

32. #AIYA
Presented by Atchariya Darote
4.3 Test on Page Messenger

33. #AIYA
Presented by Atchariya Darote
4.4 Setup Page Token
change ### to {Page Accss Token} (4.2)

34. #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

35. Question?
#AIYA
Presented by Atchariya Darote

36. Agenda: How to Facebook Chatbot
Chatbot 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