Any Way Around Facebook Bots Button Template Limit?

Question

It appears (undocumented) that for a button message type in the Facebook Bots chat system, there is a max of 3 buttons. This seems arbitrary and limiting. Does anyone know if there is a way to have more than 3 buttons?

To be clear, I'm referring to the following message JSON:

{
  "recipient":{
    "id":"USER_ID"
  },
  "message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"button",
        "text":"What do you want to do next?",
        "buttons":[
          {
            "type":"web_url",
            "url":"https://petersapparel.parseapp.com",
            "title":"Show Website"
          },
          {
            "type":"postback",
            "title":"Start Chatting",
            "payload":"USER_DEFINED_PAYLOAD"
          }
        ]
      }
    }
  }
}

Answer 1

You can try this:

 "text": msg,
        "quick_replies": [
        {

            "content_type": "text",
            "title": "What happens to my healthcare benefits?",
            "payload": "HEALTHCARE_BENEFITS"

        },
        {
            "content_type": "text",
            "title": "What happens to my service credit purchases?",
            "payload": "SERVICE_CREDIT_PURCHASE"

        },
        {
            "content_type": "text",
            "title": "Am I eligible for enhanced contributions?",
            "payload": "ENHANCED_CONTRIBUTIONS"

        },
        {
            "content_type": "text",
            "title": "What is the New Hybrid Plan?",
            "payload": "NEW_HYBRID_PLAN"

        }
    ]

    }
}

Answer 2

There's no way to bypass this limit. Facebook has clearly documented the limits of a generic template here:

Title: 80 characters

Subtitle: 80 characters

Call-to-action title: 20 characters

Call-to-action items: 3 buttons

Bubbles per message (horizontal scroll): 10 elements

There can be maximum 3 buttons in one bubble. you can add another bubble with 3 more buttons. For example:

{
  "recipient": {
    "id": "RECIPIENT_ID"
  },
  "message": {
    "attachment": {
      "type": "template",
      "payload": {
        "template_type": "generic",
        "elements": [
          {
            "title": "Swipe left/right for more options.",
            "buttons": [
              {
                "type": "postback",
                "title": "Button 1",
                "payload": "button1"
              },
              {
                "type": "postback",
                "title": "Button 2",
                "payload": "button2"
              },
              {
                "type": "postback",
                "title": "Button 3",
                "payload": "button3"
              }
            ]
          },
          {
            "title": "Swipe left/right for more options.",
            "buttons": [
              {
                "type": "postback",
                "title": "Button 4",
                "payload": "button4"
              },
              {
                "type": "postback",
                "title": "Button 5",
                "payload": "button5"
              },
              {
                "type": "postback",
                "title": "Button 6",
                "payload": "button6"
              }
            ]
          }
        ]
      }
    }
  }
}

You can add maximum 10 bubbles in one generic template.

OR

You can use quick replies.

Answer 3

You can also use the "Quick Replies" : https://developers.facebook.com/docs/messenger-platform/send-api-reference/quick-replies

Quick replies allows you to display up to 11 options in buttons in a single row :

Answer 4

You can use botframework approach. It sends options using generic template. options part 1, options part 2

"attachment": {
    "type": "template",
    "payload": {
        "template_type": "generic",
        "elements": [{
            "title": "group of options part 1",                    
            "buttons": [ {
                "type": "postback",
                "title": "option 1",
                "payload": "option 1",
            }, ...,
            {
                "type": "postback",
                "title": "option 3",
                "payload": "option 3",
            }],
        }, ..., 
        {
            "title": "group of options 10",
            "buttons": [{
                "type": "postback",
                "title": "option 28",
                "payload": "option 28",
            }, ...,
            {
                "type": "postback",
                "title": "option 30",
                "payload": "option 30",
            }],
        }]
    }
}