Buttons

All quick replies, message templates, as well as the persistent menu, support buttons that invoke different types of actions. These buttons allow you to easily offer the message recipient actions they can take in response to the template, such as opening the Messenger webview, sending a postback message to your webhook, and more.

For message templates, buttons are included defined by objects in the buttons array. For the persistent menu, buttons are defined by objects in the call_to_actions array. For more information on the specific purpose and format of each button type, see below.

Example Request

curl -X POST -H "Content-Type: application/json" -d '{
  "recipient":{
    "id":"PAGE-SCOPED-ID"
  },
  "message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"button",
        "text":"Try the URL button!",
        "buttons":[
          {
            // Button type payload
          }
        ]
      }
    }
  }
}' "https://graph.facebook.com/v21.0/PAGE-ID/messages?access_token=PAGE-ACCESS-TOKEN"

Example Response

{
  "recipient_id": "1254477777772919",
  "message_id": "AG5Hz2Uq7tuwNEhXfYYKj8mJEM_QPpz5jdCK48PnKAjSdjfipqxqMvK8ma6AC8fplwlqLP_5cgXIbu7I3rBN0P"
}  

Buttons Types

URL Button

The URL Button opens a webpage in the Messenger webview. This button can be used with the Button and Generic Templates.

If the site contains App Links the button will click into a native app. If you just made the change, you can use the Sharing Debugger to request a new scrape of the site.

URL Button Payload

{
  "type":"web_url",
  "url":"URL_TO_OPEN",
  "title":"BUTTON_TEXT",
  "webview_height_ratio": "compact|tall|full",
  "messenger_extensions": "true|false",  
  "fallback_url": "URL_TO_FALLBACK_TO"
}

URL Parameters

Postback Button

When the postback button is tapped, the Messenger Platform sends an event to your postback webhook. This is useful when you want to invoke an action in your bot. This button can be used with the Button Template and Generic Template.

For more information on using the postback button, see Postback Button.

Postback Button Payload

{
  "type":"postback",
  "title":"Postback Button",
  "payload":"DEVELOPER_DEFINED_PAYLOAD"
}

Postback Parameters

Call Button

The Call Button can be used to initiate a phone call. This button can be used with the Button and Generic Templates.

For more information on using the call button, see Call Button.

Call Button Payload

{
  "type":"phone_number",
  "title":"<BUTTON_TEXT>",
  "payload":"<PHONE_NUMBER>"
}

Call Parameter

Game Play Button

The game play button launches an Instant Game that is associated with the bot page.

For more information on using the game play button, see Game Play Button.

Game Play Button Payload

{
  "type":"game_play",
  "title":"Play",
  "payload":"{<SERIALIZED_JSON_PAYLOAD>}",
  "game_metadata": { // Only one of the below
    "player_id": "<PLAYER_ID>",
    "context_id": "<CONTEXT_ID>"
  }
}

Game Play Parameters

Refer to Game Play webhook event for the event that will be sent to the bot when a user finishes a game round.

Log In Button

The log in button triggers the account linking authentication flow.

For more information on using the log in button, see Log In Button.

Log In Button Payload

...
    
"buttons":[
  {
    "type": "account_link",
    "url": "https://www.example.com/authorize"
  }
]

...

Log In Parameters

Log Out Button Overview

The log out button triggers the account unlinking flow.

For more information on using the log out button, see Log Out Button.

Log Out Button Payload

{
  "type": "account_unlink"
}

Log Out Parameters

Extension Button

The Extension Button opens a webpage in the Messenger webview. This button can be used with the Persistent Menu and Generic Templates.

For more information on using buttons, see Buttons.

Extension Button Payload

{
  "type":"extension",
  "url":"<URL_TO_OPEN>",
  "title":"<BUTTON_TEXT>",
  "view_style": "<compact|tall|full>" (default full),
  "fallback_url": "<URL_TO_FALLBACK_TO>" (optional),
  "enable_share_button": "<true|false>" (default false),
}

Extension Parameters