Live API

UI definitions are static by default and require a new request to come through in order to update them. Live UI however will make requests every time the card is viewed without any interaction needed, meaning the canvas can be kept up-to-date with no action from the user.

This works for every Messenger request that you can respond with a definitions object to. Instead of returning the content object within the canvas object, you should provide a content_url attribute instead with the value being the URL you want us to send a POST request to when someone views the app.

definitions: [
    {
        type: 'content',
        content_url: "https://example.com",
    }
]

Sheets

Sheets open an iframe within the entire Messenger window so that you can embed a completely custom UI. It's perfect for when you need to present your own UI to your users in a larger area and achieve more complicated workflows.

You can use both definitions and sheets within your app by:

• Opening a sheet when users interact with a component in a canvas.
• Returning to a canvas (either the old one or a new one) when they close the sheet.
• Here is an example app that opens a sheet with the user clicks the "View property" button:

{
  type: "list",
  disabled: false,
  items: [
    {
      "type": "item",
      "id": "slug",
      "title": 'a title',
      "subtitle": 'subtitle',
      action: {
        type: "frame",
        url: "https://example.com/some-page.html" 
      }
    }
  ]
}