Messenger API
Messenger Expressions Apps
- Allow sharing content from your app into Messenger
- Increase installs and engagement
- Get discovered
Messenger Platform
- Bot
- CUI (Conversational UI)
![](https://media.slid.es/uploads/9055/images/2566167/_____2016-05-04___9.14.58.png)
![](https://media.slid.es/uploads/9055/images/2566205/test.png)
Build your first Messenger bot in 4 steps
Step 1.
Create facebook App and Page
![](https://media.slid.es/uploads/9055/images/2566387/pasted-from-clipboard.png)
![](https://media.slid.es/uploads/9055/images/2566397/pasted-from-clipboard.png)
![](https://media.slid.es/uploads/9055/images/2566413/pasted-from-clipboard.png)
![](https://media.slid.es/uploads/9055/images/2566424/pasted-from-clipboard.png)
Step 2.
Setup a Webhook
route.get('/', function (req, res) {
if (req.query['hub.verify_token'] === '<validation_token>') {
res.send(req.query['hub.challenge']);
}
res.send('Error, wrong validation token');
})
Webhook url
![](https://media.slid.es/uploads/9055/images/2566448/pasted-from-clipboard.png)
Step 3.
Subscribe the App to the Page
![](https://media.slid.es/uploads/9055/images/2566495/pasted-from-clipboard.png)
curl -ik -X POST
"https://graph.facebook.com/v2.6/me/subscribed_apps?access_token=<token>"
Step 4.
Send a text & Receive Message
fbbot.post('/', function (req, res) {
messaging_events = req.body.entry[0].messaging;
for (i = 0; i < messaging_events.length; i++) {
event = req.body.entry[0].messaging[i];
sender = event.sender.id;
if (event.message && event.message.text) {
text = event.message.text;
// Handle a text message from this sender
}
}
res.sendStatus(200);
});
var token = "<page_access_token>";
var request = require('request');
function sendTextMessage(sender, text) {
messageData = {
text:text
}
request({
url: 'https://graph.facebook.com/v2.6/me/messages',
qs: {access_token:token},
method: 'POST',
json: {
recipient: {id:sender},
message: messageData,
}
}, function(error, response, body) {
if (error) {
console.log('Error sending message: ', error);
} else if (response.body.error) {
console.log('Error: ', response.body.error);
}
});
}
fbbot.post('/', function (req, res) {
messaging_events = req.body.entry[0].messaging;
for (i = 0; i < messaging_events.length; i++) {
event = req.body.entry[0].messaging[i];
sender = event.sender.id;
if (event.message && event.message.text) {
text = event.message.text;
// Handle a text message from this sender
sendTextMessage(sender, "Text received, echo: "+ text.substring(0, 200));
}
}
res.sendStatus(200);
});
![](https://media.slid.es/uploads/9055/images/2566541/pasted-from-clipboard.png)
Hubot
bot framework
![](https://media.slid.es/uploads/9055/images/2566723/pasted-from-clipboard.png)
![](https://media.slid.es/uploads/9055/images/2566724/pasted-from-clipboard.png)
Hubot
![](https://media.slid.es/uploads/9055/images/2566723/pasted-from-clipboard.png)
slack <---> adapter <---> hubot <---> script
Telegram
HipChat
Line
var bus = require("./lib/taipeiBus");
module.exports = (robot) => {
robot.hear(/get (.*) (.*)/i, (res) => {
bus(res.match[1], function(err, data) {
if (!err) {
var result = data['back'].filter(function(item, i) {
if (item.name === res.match[2]) {
return item;
}
});
result.map(function(item, i) {
var assembleItem = {
direction: (item.direction === 'go') ? '去程' : '回程',
status: (item.status.indexOf('分') > -1) ? '還剩下' + item.status : item.status
}
robot.messageRoom(res.message.room, assembleItem.direction + ' ' + assembleItem.status);
});
return;
}
robot.messageRoom(res.message.room, "sorry, there are some problems..");
return;
});
});
}
Review
- UX
- non-promotional messages
- customer support
- deliver content requested by a person
- Product announcements
- Brand Advertising
- Newsletters
Review
- Fill some forms
- Select which permission you want to apply
- Privacy Policy
- Demo Video
Review
- Welcom Screen
- Hint
- Postback
- Content
curl -X POST -H "Content-Type: application/json" -d '{
"setting_type":"call_to_actions",
"thread_state":"new_thread",
"call_to_actions":[
{
"message":{
"attachment":{
"type":"template",
"payload":{
"template_type":"generic",
"elements":[
{
"title":"Welcome to My Company!",
"item_url":"https://www.petersbowlerhats.com",
"image_url":"https://www.petersbowlerhats.com/img/hat.jpeg",
"subtitle":"We have the right hat for everyone.",
"buttons":[
{
"type":"web_url",
"title":"View Website",
"url":"https://www.petersbowlerhats.com"
},
{
"type":"postback",
"title":"Start Chatting",
"payload":"DEVELOPER_DEFINED_PAYLOAD"
}
]
}
]
}
}
}
}
]
}' "https://graph.facebook.com/v2.6/<PAGE_ID>/thread_settings?access_token=<PAGE_ACCESS_TOKEN>"
![](https://media.slid.es/uploads/9055/images/2566677/_____2016-05-04___11.02.22.png)
Messenger API Introduction
By arvinh
Messenger API Introduction
- 217