Dialogflow custom payload not posting message in facebook messenger - node.js

Question

I have a custom payload message carousel as one of my intents response in Dialogflow. It looks like this.
{
"facebook": {
"attachment": {
"type": "template",
"payload": {
"template_type": "generic",
"elements": [
{
"title": "Welcome!",
"subtitle": "We have the right hat for everyone.We have the right hat for everyone.We have the right hat for everyone.",
"imageUrl": "https://www.stepforwardmichigan.org/wp-content/uploads/2017/03/step-foward-fb-1200x628-house.jpg",
"buttons": [
{
"postback": "https://f1948e04.ngrok.io",
"text": "View Website"
},
{
"text": "Start Chatting",
"postback": "PAYLOAD EXAMPLE"
}
]
},
{
"title": "Welcome!",
"imageUrl": "https://www.stepforwardmichigan.org/wp-content/uploads/2017/03/step-foward-fb-1200x628-house.jpg",
"subtitle": "We have the right hat for everyone.We have the right hat for everyone.We have the right hat for everyone.",
"buttons": [
{
"postback": "https://f1948e04.ngrok.io",
"text": "View Website"
},
{
"text": "Start Chatting",
"postback": "PAYLOAD EXAMPLE"
}
]
}
]
}
}
}
}
I use the following code inside my node.js webhook to handle messages.
function handleCardMessages(messages, sender) {
let elements = [];
for (var m = 0; m < messages.length; m++) {
let message = messages[m];
let buttons = [];
for (var b = 0; b < message.card.buttons.length; b++) {
let isLink = (message.card.buttons[b].postback.substring(0, 4) === 'http');
let button;
if (isLink) {
button = {
"type": "web_url",
"title": message.card.buttons[b].text,
"url": message.card.buttons[b].postback
}
} else {
button = {
"type": "postback",
"title": message.card.buttons[b].text,
"payload": message.card.buttons[b].postback
}
}
buttons.push(button);
}
let element = {
"title": message.card.title,
"image_url":message.card.imageUri,
"subtitle": message.card.subtitle,
"buttons": buttons
};
elements.push(element);
}
sendGenericMessage(sender, elements);
}
function sendGenericMessage(recipientId, elements) {
var messageData = {
recipient: {
id: recipientId
},
message: {
attachment: {
type: "template",
payload: {
template_type: "generic",
elements: elements
}
}
}
};
callSendAPI(messageData);
}
function callSendAPI(messageData) {
request({
uri: 'https://graph.facebook.com/v3.2/me/messages',
qs: {
access_token: config.FB_PAGE_TOKEN
},
method: 'POST',
json: messageData
}, function (error, response, body) {
if (!error && response.statusCode == 200) {
var recipientId = body.recipient_id;
var messageId = body.message_id;
if (messageId) {
console.log("Successfully sent message with id %s to recipient %s",
messageId, recipientId);
} else {
console.log("Successfully called Send API for recipient %s",
recipientId);
}
} else {
console.error("Failed calling Send API", response.statusCode, response.statusMessage, body.error);
}
});
}
So, everytime the intent is called. Dialogflow is supposed to post the custom payload message to the user's messenger app. But, i don't know why the message is not being posted.
If I use Dialogflow's quickreply/card messages response option under it's facebook messenger response option. Everything works fine. But, if i want to send a quickreply/card message using custom payload, the message is not displayed in the user's messenger when the intent is called. Logs looks fine. Don't know what i am doing wrong. Help will be appreciated.

Answer 1

hi here is how it should be formated like if your are using a custom webhook
{
"fulfillmentMessages": [
{
"payload": {
"facebook": {
"attachment": {
"type": "template",
"payload": {
"template_type":"generic",
"elements":[
{
"title":"Welcome!",
"image_url":"https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"subtitle":"We have the right hat for everyone.",
"default_action":{
"type":"web_url",
"url":"https://www.google.com/",
"webview_height_ratio":"tall"
},
"buttons":[
{
"type":"web_url",
"url":"https://www.google.com/",
"title":"View Website"
},
{
"type":"postback",
"title":"Start Chatting",
"payload":"DEVELOPER_DEFINED_PAYLOAD"
}
]
},
{
"title":"Welcome!",
"image_url":"https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"subtitle":"We have the right hat for everyone.",
"default_action":{
"type":"web_url",
"url":"https://www.google.com/",
"webview_height_ratio":"tall"
},
"buttons":[
{
"type":"web_url",
"url":"https://www.google.com/",
"title":"View Website"
},
{
"type":"postback",
"title":"Start Chatting",
"payload":"DEVELOPER_DEFINED_PAYLOAD"
}
]
}
]}
}
}
}
}
]
}
if you want to use the build in one it should be like this
from other answer in here
{
"facebook": {
"attachment": {
"type": "template",
"payload": {
"template_type": "generic",
"elements": [
{
"title": "Welcome!",
"image_url": "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"subtitle": "We have the right hat for everyone.",
"default_action": {
"type": "web_url",
"url": "https://commons.wikimedia.org/wiki/File:Example.png",
"messenger_extensions": false,
"webview_height_ratio": "tall",
"fallback_url": "https://website.com/"
},
"buttons": [
{
"type": "web_url",
"url": "https://commons.wikimedia.org/wiki/File:Example.png",
"title": "View Website"
},
{
"type": "postback",
"title": "Start Chatting",
"payload": "DEVELOPER_DEFINED_PAYLOAD"
}
]
}
]
}
}
}
}