Dialogflow custom payload not posting message in facebook messenger

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