1- Adicionar um novo aplicativo

2- Instale o serviço do messenger

3- Selecione a página e copie o seu token de acesso

Webhooks

Com o token da página em posse, configuramos o webhook

- url de verificação

- token que será passado pelo facebook

Webhooks

Done! Sua aplicação agora está recebendo notificações do messenger

Messenger Docs

https://developers.facebook.com/docs/messenger-platform

Messenger Docs

https://developers.facebook.com/docs/messenger-platform

Webhook.js

class WebHook {
	constructor(){}
	
	static init(app){
		app.post('/webhook/', (req, res) => webhook.checkWebhook(req, res));
	}
	
	checkWebhook(req, res){
		let instance = this;
		let data = req.body;
		
		if (data) {
		    data.entry.forEach(instance.checkEvent.bind(instance));
			
		    res.sendStatus(200);
		} else {
		    res.status(401).send('Error, wrong message');
		}
	}
	
	checkEvent(entry){
		entry.messaging.forEach(event => {
                    Endpoints.checkMessages(event);
		})
	}
}

Endpoints.js

class Endpoints {
    static checkMessages({message, sender}){
	let Bot = new BotClass(fbToken, sender);

	if(message.text == "Ping"){
	    return Bot.sendPong();
	}else{
	    return Bot.sendTextOfApresentation();
        }
    }

    {...}
}

class Bot {
    {...}
    
    sendPong(){
	let sender = this.sender;
		
	RequestUtils.sendMessage(sender, {
	    "text": "Pong"
	}, RequestUtils.checkErrors);
    }
    
    {...}
}

Bot.js

const fbToken = require('../config/config').fb.page_token;
const request = require('request');

class RequestUtils {	
	static sendMessage(sender, messageData, callback) {
		request({
		    url: 'https://graph.facebook.com/v2.6/me/messages',
		    qs: {access_token: fbToken},
		    method: 'POST',
		    json: {
		        recipient: {id: sender.id},
		        message: messageData,
		    }
		}, (error, response) => {
			this.checkErrors(error, response);
			
			if(callback){
				return callback();
			}
		})
	}
}

module.exports = RequestUtils;

RequestUtils.js

Enviando um botão

let options = {
   {...}	

    navigation_buttons: [
		{
			"type":"postback",
			"title":"👌 Sugerir tema novo",
			"payload":"USER_DEFINED_OPINION"
		},
		{
			"type":"postback",
			"title":"🤘 BrazilJS WEEKLY",
			"payload":"USER_DEFINED_BRASILJS_WEEKLY"
		},
		{
			"type":"postback",
			"title":"🇧🇷 Post's do CSS Brasil.org",
			"payload":"USER_DEFINED_CSSBRASIL_WEEKLY"
		}
    ]
};

module.exports = options;

BotOptions.js

const botOptions = require('./bot-options');
const navButtons = botOptions.navigation_buttons;

class Bot {
    {...}

    sendTextOfApresentation(){
	let sender = this.sender;
		
	RequestUtils.sendMessage(sender, {
		"attachment":{
			type:"template",
			payload:{
				template_type:"button",
				text:'Olá jovem padawan, meu nome é chico e sou o novo mascote do FEMUG-PE!\nEstou aqui para lhe ajudar a interagir com o nosso grupo e lhe manter atualizado com as novidades do mundo da web! Escolha uma das opções abaixo para que eu possa interagir com você:',
				buttons: navButtons
        		}
          	}
	}, RequestUtils.checkErrors);
    }
}

Bot.js

And... Done!

Recebendo um postback

class WebHook {
        {...}

	checkEvent(entry){
		entry.messaging.forEach(event => {
			if(event.message){
				Endpoints.checkMessages(event);
			}else if(event.postback){
				Endpoints.checkPostbacks(event);
			}
		})
	}
}

module.exports = WebHook;

Webhook.js

const BotClass = require('../entities/bot/Bot');
class Endpoints {
	{...}
	
	static checkPostbacks({postback, sender}){
		let Bot = new BotClass(fbToken, sender);
		
		const checkPayload = ( payload ) => {			
			const cases = {
				'GET_STARTED': Bot.sendTextOfApresentation.bind(Bot),
				'USER_DEFINED_OPINION': Bot.askForOpinion.bind(Bot),
				'USER_DEFINED_CSSBRASIL_WEEKLY': Bot.searchCSSWeekly.bind(Bot),
				'USER_DEFINED_BRASILJS_WEEKLY': Bot.searchBRASILJSWeekly.bind(Bot)
			};
			
			return cases[payload]();
		};
		
		return checkPayload(postback.payload);
	}
}

module.exports = Endpoints

Endpoints.js

Outras possibilidades...

Imagens, vídeos, audios e outros formatos de arquivos

Botão Compartilhar

Botão Comprar

WebView

Modelos de Recibos

E muito mais!