How to Facebook Messenger

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