botsfacebook-messengerfacebook-send-api

Facebook messenger platform: generic template with quick replies


I was looking at some pretty popular bots like "The Guardian" and i noticed that whenever you get a generic template reply from it it also displays some quick reply buttons (see the photo attached). How did "The Guardian Bot" achieve this? How he combined quick replies and a generic template? It must be two messages involved.

enter image description here


Solution

  • I have implemented the bot in nodejs and I am using a node module called messenger-bot which makes it easier to call the messenger bot API. Here's my customized code for you

    const http = require('http')
    const https = require('https')
    const Bot = require('messenger-bot')
    var bot = new Bot({
        token: 'your FB app token',
        verify: 'VERIFY_TOKEN'
    })
    
    bot.on('postback', (payload, reply) => {
        var postback = payload.postback.payload;
        if (postback == "yes") {
    
            function getQuickReplies() {
                console.log("in next function");
                var quick_list = {
                    "text": "Check the next article?",
                    "quick_replies": [{
                            "content_type": "text",
                            "title": "More stories",
                            "payload": "more stories"
                        },
                        {
                            "content_type": "text",
                            "title": "Sport",
                            "payload": "sport"
                        },
                        {
                            "content_type": "text",
                            "title": "Business",
                            "payload": "business"
                        }
    
                    ]
                };
                bot.getProfile(payload.sender.id, (err, profile) => {
                    if (err) throw err
                    text = quick_list;
                    bot.sendMessage(payload.sender.id, text) {//this prints quick replies
                        console.log("sending message");
                    }
                });
            }
    
            //calling generic template
    
            var generic_temp = "message": {
                "attachment": {
                    -- - your code-- -
                }
            }; //generic template refer - https://developers.facebook.com/docs/messenger-platform/send-api-reference/generic-template
    
            bot.getProfile(payload.sender.id, (err, profile) => {
                if (err) throw err
                bot.sendMessage(payload.sender.id, generic_temp) {//this prints generic template
                    console.log("sending message");
                }
            });
    
            //calling the quick replies once the generic template is sent
    
            getQuickReplies(); //to avoid async execution issue, we will have to put this in a function.
    
        }
    });
    

    references - Generic template, Quick replies, messenger-bot npm

    Hope this helps! Happy coding ;)