CODEWITHSUNDEEP
phpfacebookfacebook-messenger
Romano Schoonheim
Romano Schoonheim

Reputation: 101

Facebook Messenger - Invalid keys type, payload

I have some issues with building a app for Facebook Messenger. When i try to send a "Generic Template" response with buttons back to Facebook Messenger i receive the following error.

{"error":{"message":"(#100) Invalid keys \"type, payload\" were found in param \"name_placeholder[elements][buttons]\".","type":"OAuthException","code":100,"fbtrace_id":""}}

The most logical error is that i gave the wrong keys to Facebook. So i compared my input with the Facebook docs. Unfortunately i'm unable to find the cause.

Available logs/data

Data i send to facebook:

{"recipient":{"id":"REMOVED_ID"},"message":{"attachment":{"type":"template","payload":{"template_type":"generic","elements":{"0":{"title":"title","image_url":"https://i.ytimg.com/vi/JIciUWPzTxM/hqdefault.jpg","subtitle":"body text","default_action":{"type":"web_url","url":"https://www.google.nl/"}},"buttons":"{\"type\":\"postback\",\"title\":\"Bookmark Item\",\"payload\":\"DEVELOPER_DEFINED_PAYLOAD\"}"}}}}}

More information

Data i received from facebook:

{"error":{"message":"(#100) Invalid keys \"type, payload\" were found in param \"name_placeholder[elements][buttons]\".","type":"OAuthException","code":100,"fbtrace_id":""}}

Suggestions please?

Upvotes: 1

Views: 3576

Answers (1)

mustafaturan
mustafaturan

Reputation: 2349

In payload, elements and buttons MUST be an array type but you are sending as object types for both of them:

Here is yours:

{
  "recipient": {
    "id": "REMOVED_ID"
  },
  "message": {
    "attachment": {
      "type": "template",
      "payload": {
        "template_type": "generic",
        "elements": {
          "0": {
            "title": "title",
            "image_url": "https:\/\/i.ytimg.com\/vi\/JIciUWPzTxM\/hqdefault.jpg",
            "subtitle": "body text",
            "default_action": {
              "type": "web_url",
              "url": "https:\/\/www.google.nl\/"
            }
          },
          "buttons": "{\"type\":\"postback\",\"title\":\"Bookmark Item\",\"payload\":\"DEVELOPER_DEFINED_PAYLOAD\"}"
        }
      }
    }
  }
}

The correct one should be like:

{
  "recipient": {
    "id": "REMOVED_ID"
  },
  "message": {
    "attachment": {
      "type": "template",
      "payload": {
        "template_type": "generic",
        "elements": [
          {
            "title": "title",
            "image_url": "https:\/\/i.ytimg.com\/vi\/JIciUWPzTxM\/hqdefault.jpg",
            "subtitle": "body text",
            "default_action": {
              "type": "web_url",
              "url": "https:\/\/www.google.nl\/"
            }
          },
          "buttons": [{"type":"postback","title":"Bookmark Item","payload":"DEVELOPER_DEFINED_PAYLOAD"}]
        ]
      }
    }
  }
}

Working sample:

curl -X POST -H "Content-Type: application/json" -d '{
  "recipient":{
    "id":"USER_ID"
  },
  "message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"generic",
        "elements":[
           {
            "title":"Welcome to Peter\'s Hats",
            "image_url":"https://petersfancybrownhats.com/company_image.png",
            "subtitle":"We\'ve got the right hat for everyone.",
            "default_action": {
              "type": "web_url",
              "url": "https://peterssendreceiveapp.ngrok.io/view?item=103",
              "messenger_extensions": true,
              "webview_height_ratio": "tall",
              "fallback_url": "https://peterssendreceiveapp.ngrok.io/"
            },
            "buttons":[
              {
                "type":"web_url",
                "url":"https://petersfancybrownhats.com",
                "title":"View Website"
              },{
                "type":"postback",
                "title":"Start Chatting",
                "payload":"DEVELOPER_DEFINED_PAYLOAD"
              }              
            ]      
          }
        ]
      }
    }
  }
}' "https://graph.facebook.com/v2.6/me/messages?access_token=PAGE_ACCESS_TOKEN"

Upvotes: 0

Related Questions