facebook

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)

Build your first Messenger bot in 4 steps

 

Step 1.

 

Create facebook App and Page

 

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

 

Step 3.

 

Subscribe the App to the Page

 
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);
});

Hubot

bot framework

Hubot

slack <---> adapter <---> hubot <---> script

Telegram

HipChat

Line

Facebook

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>"

Messenger API Introduction

By arvinh

Messenger API Introduction

  • 217