How to send card carousel and quick replies together?

Question

I am following this tutorial for making a dialogflow chatbot on Facebook. I have made a carousel and quick replies for two separate actions. How can I send a carousel followed by quick replies for one same action?

Answer 1

Using Dialogflow's node.js fulfillment library, you can call agent.add multiple times to build up a response containing multiple elements.

To build a Facebook carousel, you could do something like the following within the fulfillment for your intent:

agent.add(new Payload('FACEBOOK', <object for Facebook carousel>));
agent.add(new Suggestion('first quick reply'));
agent.add(new Suggestion('second quick reply'));

Answer 2

Your message object can have an attachment property (an object) for the carousel, and a quick_replies property (an array) for the quick replies. . For example:

let messageObject = {
    recipient: {
        id: recipientId
    }, 
    message: {
        attachment: {
            type: "template", 
            payload: {
                template_type: "generic", 
                elements: [
                    {
                        title: title,
                        image_url: imageUrl,
                        buttons: [
                            {
                                type: "web_url",
                                url: buttonUrl,
                                title: buttonTitle
                            }
                        ]
                    }
                ]
            }
        },
        quick_replies: [
            {
                "title": firstQuickReplyTitle,
                "payload": firstQuickReplyPayload,
                "content_type": "text"
            },
            {
                "title": secondQuickReplyTitle,
                "payload": secondQuickReplyPayload,
                "content_type": "text"
            }
        ]
    }
}

See Messenger docs — Quick replies, Messenger docs — Generic template.