Introducing Flex Message, a new message type for LINE Messaging API

A new type of message has been added to the LINE Messaging API, Flex Message. We’ve been using a template-typed message in which you could place plain text, stickers, images, media types like videos, buttons and URLs. This type is quite useful for where the user had to select an option from available options, but there were restrictions such as the maximum number of buttons allowed, which is 4, for the button template, or the order in which you had to arrange the elements for a layout — title, content, and buttons.

What is Flex Message?

The Flex Message type frees you from the old restrictions and enables you to arrange layouts as desired. There is a display frame, but you can change the layout as you do with HTML code, and each component is neatly displayed. Here are a few of the layouts you can compose with Flex Message.

Use cases

Let me share a couple of chatbot examples that use Flex Message.

Case 1. The QUIZ

The QUIZ is a chatbot that gives you a quiz. Have a try by scanning the following QR code to add the chatbot as a friend.

Once you add the bot as a friend, the bot asks you whether to accept a challenge or a create a quiz of your own. If you choose Challenge, you get two questions. You can answer by tapping a numbered button for your choice of answer. Check out the following demo to see how it works.

As shown in the video, you can place buttons horizontally. Not only that, you can place buttons in the middle of a message or in the header. The following JSON object is the object of the message you’ve seen in the video.

{
  "type": "flex",
  "altText": "Q1. Which is the API to create chatbot?",
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "spacing": "md",
      "contents": [
        {
          "type": "box",
          "layout": "vertical",
          "contents": [
            {
              "type": "text",
              "text": "Q1",
              "align": "center",
              "size": "xxl",
              "weight": "bold"
            },
            {
              "type": "text",
              "text": "Which is the API to create chatbot?",
              "wrap": true,
              "weight": "bold",
              "margin": "lg"
            }
          ]
        },
        {
          "type": "separator"
        },
        {
          "type": "box",
          "layout": "vertical",
          "margin": "lg",
          "contents": [
            {
              "type": "box",
              "layout": "baseline",
              "contents": [
                {
                  "type": "text",
                  "text": "1.",
                  "flex": 1,
                  "size": "lg",
                  "weight": "bold",
                  "color": "#666666"
                },
                {
                  "type": "text",
                  "text": "Login API",
                  "wrap": true,
                  "flex": 9
                }
              ]
            },
            {
              "type": "box",
              "layout": "baseline",
              "contents": [
                {
                  "type": "text",
                  "text": "2.",
                  "flex": 1,
                  "size": "lg",
                  "weight": "bold",
                  "color": "#666666"
                },
                {
                  "type": "text",
                  "text": "Messaging API",
                  "wrap": true,
                  "flex": 9
                }
              ]
            },
            {
              "type": "box",
              "layout": "baseline",
              "contents": [
                {
                  "type": "text",
                  "text": "3.",
                  "flex": 1,
                  "size": "lg",
                  "weight": "bold",
                  "color": "#666666"
                },
                {
                  "type": "text",
                  "text": "Graph API",
                  "wrap": true,
                  "flex": 9
                }
              ]
            },
            {
              "type": "box",
              "layout": "baseline",
              "contents": [
                {
                  "type": "text",
                  "text": "4.",
                  "flex": 1,
                  "size": "lg",
                  "weight": "bold",
                  "color": "#666666"
                },
                {
                  "type": "text",
                  "text": "Cartoon API",
                  "wrap": true,
                  "flex": 9
                }
              ]
            }
          ]
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "horizontal",
      "spacing": "sm",
      "contents": [
        {
          "type": "button",
          "style": "primary",
          "height": "sm",
          "action": {
            "type": "message",
            "label": "1",
            "text": "Login API"
          }
        },
        {
          "type": "button",
          "style": "primary",
          "height": "sm",
          "action": {
            "type": "message",
            "label": "2",
            "text": "Messaging API"
          }
        },
        {
          "type": "button",
          "style": "primary",
          "height": "sm",
          "action": {
            "type": "message",
            "label": "3",
            "text": "Graph API"
          }
        },
        {
          "type": "button",
          "style": "primary",
          "height": "sm",
          "action": {
            "type": "message",
            "label": "4",
            "text": "Cartoon API"
          }
        }
      ]
    }
  }
}

Case 2. Meguro Library

With this bot, you can search for books in the Meguro Library in Tokyo, and if you are a member, you can register your ID and password and reserve books. See the following demo. (Sorry, the video is available only in Japanese, but it’s quite straightforward, so you’ll easily figure out what’s going on.)

Once a reservation is completed, a message titled “Reservation” is displayed like below. You can see a list of books you’ve reserved, and also cancel a reservation by pressing the X button in red.

The following object represents the message displayed after cancelling the second book in the list.

{
  "type": "flex",
  "altText": "予約票", //Reservation
  "contents": {
    "type": "bubble",
    "body": {
      "type": "box",
      "layout": "vertical",
      "spacing": "xl",
      "contents": [
        {
          "type": "text",
          "text": "予約票", //Reservation
          "align": "center",
          "size": "xl",
          "color": "#1DB446"
        },
        {
          "type": "separator"
        },
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            {
              "type": "box",
              "layout": "vertical",
              "flex": 8,
              "spacing": "sm",
              "contents": [
                {
                  "type": "text",
                  "text": "10年後の仕事図鑑",  // Book title (The map of professions for 10 years later)
                  "weight": "bold"
                },
                {
                  "type": "text",
                  "text": "順番:191/233", // Order
                  "size": "xs",
                  "color": "#aaaaaa"
                }
              ]
            },
            {
              "type": "button",
              "style": "primary",
              "color": "#ff0000",
              "flex": 2,
              "height": "sm",
              "action": {
                "type": "postback",
                "label": "X",
                "displayText": "10年後の仕事図鑑をキャンセル",   // Cancel the book (The map of professions for 10 years later)
                "data": "{\"_type\":\"intent\",\"intent\":{\"name\":\"cancel-reservation\",\"parameters\":{\"reservation_number\":\"1 \"}}}"
              }
            }
          ]
        }
      ]
    }
  }
}

As we’ve seen, Flex Message allow you to place box typed elements either horizontally or vertically, and even place one on top of the other. You can still add the action object on buttons in Flex Messages, enabling you to add actions like postback with text and URI, just like you’d do with other message types.

Implementing with Flex Message

To send a Flex Message, you need to create a message object of the flex type. A Flex Message can be presented in either two of the containers; bubble or carousel — Carousels can consist of multiple bubble containers or message bubbles. See the documentation for more information.

A tool for you

Flex Message is highly extensible, or customizable rather. To support such extensibility, message objects contain multiple levels of nested information. To match the information with a layout and and alter the information, you’d want to visualize the message object as you go. To take away the fuss of deploying the bot to simply check a message, we have prepared the Flex Message Simulator, which comes with a number of samples. You can see right away how your changes in the message object will be rendered.

So, here was a brief introduction of Flex Message, a new type of message. We hope this helps you to create more creative messages to communicate with your users!

Related Post