Flex Messages

Introduction

Flex messages are one of the killer features of LINE. As its name suggests, flex messages are highly flexible for various bot scenarios. For example, booking the hotel, showing product catalog, displaying task progress, or rating for tourism.

If you are familiar with web programming, you find similarities between the structure of flex messages and HTML. For example:

• The size of a container is calculated based on its components and layout
• The hierarchical structure for the display of nested content

Although flexibility usually comes with complexity (in terms of the amount of code), flex messages are a practical approach to build highly customized chat UI.

Another benefit of flex messages is better desktop support, compared with mobile-only template messages and quick replies.

In the following sections, we will guide you through flex messages examples from simple to complex ones.

A Minimum Flex Message

The following is a minimum "Hello World" example.

To send flex messages, you can call context.sendFlex() with your alt text and flex contents:

async function App(context) {
  await context.sendFlex('This is a hello world flex', {
    type: 'bubble',
    body: {
      type: 'box',
      layout: 'horizontal',
      contents: [
        {
          type: 'text',
          text: 'Hello,',
        },
        {
          type: 'text',
          text: 'World!',
        },
      ],
    },
  });
}

The above example is a bubble type container with two text components (Hello, and World!) arranged horizontally by a box component.

An Advanced Flex Message Example

Let's see a much more complicated example. This example offers a better user experience, where information is positioned carefully with proper emphasis.

async function App(context) {
  await context.sendFlex('This is an advanced flex', {
    type: 'bubble',
    hero: {
      type: 'image',
      url:
        'https://scdn.line-apps.com/n/channel_devcenter/img/fx/01_1_cafe.png',
      size: 'full',
      aspectRatio: '20:13',
    },
    body: {
      type: 'box',
      layout: 'vertical',
      contents: [
        {
          type: 'text',
          text: 'Brown Cafe',
          weight: 'bold',
          size: 'xl',
        },
        {
          type: 'box',
          layout: 'vertical',
          margin: 'lg',
          contents: [
            {
              type: 'box',
              layout: 'baseline',
              contents: [
                {
                  type: 'text',
                  text: 'Place',
                  color: '#aaaaaa',
                  size: 'sm',
                  flex: 1,
                },
                {
                  type: 'text',
                  text: 'Miraina Tower, 4-1-6 Shinjuku, Tokyo',
                  wrap: true,
                  color: '#666666',
                  size: 'sm',
                  flex: 5,
                },
              ],
            },
          ],
        },
      ],
    },
    footer: {
      type: 'box',
      layout: 'vertical',
      contents: [
        {
          type: 'button',
          action: {
            type: 'uri',
            label: 'WEBSITE',
            uri: 'https://linecorp.com',
          },
        },
      ],
    },
  });
}

For more information, see Flex Message Elements.

Note: When your flex messages are complicated, we recommend checking your code by Flex Message Simulator.

Carousel Type Flex Messages

A carousel is a container that contains multiple bubble elements. Users can browse the bubbles in the carousel by scrolling horizontally. Carousels are helpful when you are displaying multiple choices, e.g., clothes, restaurants, tourism for the user to choose.

To send carousel flex messages, use the carousel as the top-level container:

async function App(context) {
  const bubbleContent = {
    type: 'bubble',
    // ...other attributes
  };
  await context.sendFlex('This is a carousel flex', {
    type: 'carousel',
    contents: [
      // put multiple bubbles in your carousel
      bubbleContent,
      bubbleContent,
      bubbleContent,
    ],
  });
}