Overview

Facebook Messenger has full support for list template messages. List template messages are a vertically structured, controllable set of up to 4 items (Facebook limitation) that may each contain:

  • Text title
  • Text subtitle
  • Image
  • Each item can contain a button with link, navigation or publish text actions.

List example image:

list example

Template Properties

Property Name Description Type Required
type Types of basic elements supported by Structured Content framework. Can be "text", “image” or “button”. If using Carousel, type of header element will always be “carousel” Enum Y
tag Tag of template view, must be “generic”, “button” or “list” for Facebook templates. Within basic elements objects, will be “title”/”subtitle”, which will indicate what text should rendered in each of those elements (the title and subtitle have default style in Facebook) Enum Y
elements Array of elements/templates. By using elements in your structured content template, you can send basic elements, such as simple text, images or buttons Elements/Templates Y
text The message text in a “text” type element String Y
tooltip Element tooltip. Used also for aira String N
url Image URL in a “image” type element String Y
style Basic structured content elements style object Style elements N
bold Defines if text will be bold or not. Will always be set to ‘true’ in Facebook generic, button or list templates Boolean N
size Defines the element size. Will always be set to ‘large’ in Facebook generic, button or list templates Enum - small/medium/large N
button Buttons contains click and actions properties that define the type of action set on user click operation Object Y
click Click object contains the action type set on the click operation for each button Object Y
action Actions are a list of applicative user actions on buttons, that will run on the consumer side and will help them to achieve their operation. Button action for Facebook generic, button or list template can be set to Publish text, Link or Navigate Enum - “publishText”, “link”, “navigate” Y

Example Template

{
  "type": "vertical",
  "tag": "list",
  "elements": [
    {
      "type": "vertical",
      "elements": [
        {
          "type": "text",
          "text": "Flowers",
          "tooltip": "text tooltip",
          "style": {
            "bold": true,
            "size": "large"
          }
        },
        {
          "type": "horizontal",
          "elements": [
            {
              "type": "image",
              "url": "https://i.pinimg.com/736x/a0/67/5e/a0675e5161d7ae5be2550987f397a641--flower-shops-paper-flowers.jpg",
              "tooltip": "Flowers"
            },
            {
              "type": "vertical",
              "elements": [
                {
                  "type": "text",
                  "tag": "title",
                  "text": "Spring flowers",
                  "tooltip": "Title",
                  "style": {
                    "bold": true,
                    "size": "large"
                  }
                },
                {
                  "type": "text",
                  "tag": "subtitle",
                  "text": "Medium bouquet",
                  "tooltip": "Black"
                },
                {
                  "type": "button",
                  "tooltip": "Add to cart",
                  "title": "Add to cart",
                  "click": {
                    "actions": [
                      {
                        "type": "publishText",
                        "text": "Spring flowers added"
                      }
                    ],
                    "metadata": [
                      {
                        "type": "ExternalId",
                        "id": "SpringID"
                      }
                    ]
                  }
                }
              ]
            }
          ]
        },
        {
          "type": "horizontal",
          "elements": [
            {
              "type": "image",
              "url": "https://i.pinimg.com/736x/a0/67/5e/a0675e5161d7ae5be2550987f397a641--flower-shops-paper-flowers.jpg",
              "tooltip": "Flowers"
            },
            {
              "type": "vertical",
              "elements": [
                {
                  "type": "text",
                  "tag": "title",
                  "text": "Wild flowers",
                  "tooltip": "Wild flowers",
                  "style": {
                    "bold": true,
                    "size": "large"
                  }
                },
                {
                  "type": "text",
                  "tag": "subtitle",
                  "text": "Medium bouquet",
                  "tooltip": "Medium bouquet"
                },
                {
                  "type": "button",
                  "tooltip": "Review details",
                  "title": "Review details",
                  "click": {
                    "actions": [
                      {
                        "type": "link",
                        "name": "Wild flowers added",
                        "uri" : "https://www.pinterest.com/lyndawhite/beautiful-flowers/"
                      }
                    ]
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}