Information
This page is not available in Chinese yet.

# Using Flex Message Simulator to create a digital business card

Flex Messages are messages that can be freely customized based on CSS Flexible Box (CSS Flexbox). Depending on your needs, you can adjust the size of the message, allocate text, images, and icons in specific locations, and add interactive buttons. Flex Message Simulator is a tool to help you brainstorm, design, and prototype a Flex Message without writing code.

This tutorial article explains how to use Flex Message Simulator and how to create a digital business card using the tool.

# Goal

At the end of this tutorial, you will have created the below digital business card using Flex Message and Flex Message Simulator.

Final Output

# Before you start

To smoothly follow this tutorial, we recommend that you read Messaging API overview and Sending Flex Messages.

# What's Flex Message Simulator?

Flex Message Simulator is a tool to preview a Flex Message without the need to send a Flex Message, set up a development environment, or to write code.

# Structure of Flex Message Simulator

Let's first open the Flex Message Simulator. If you have not logged in to the LINE Developers Console, you'll be prompted to log in. If you already have a LINE Developers account, log in to your account. If you don't have an account, click Create an account and follow the instructions to create an account.

Flex Message Simulator consists of 3 sections:

  • The preview area which displays Flex Message generated based on the data in the tree view area and property area.
  • The tree view area where you can view and edit the data structure of the Flex Message.
  • The property area to add and edit data required to construct a Flex Message. Based on the data provided in this area, the simulator generates a Flex Message.

Flex Message Areas

If you hover your mouse over any item in the tree view area, the corresponding area is highlighted in the preview area.



# Predefined layouts

The tool also offers some predefined Flex Message layouts.

Flex Message Simulator Showcase

To access the predefined layouts, click Showcase at the top-right corner of the page.

Click the layout you want to use, and click Create at the bottom-right corner.

Note

In this tutorial, we won't use a predefined layout. Instead, we'll create a Flex Message from scratch.

# Copying the generated JSON

To copy the JSON data generated, click </>View as JSON at the top-right corner the page.

View as JSON

Click Copy at the bottom of the page.

# Step 1. Select the type of Flex Message to create

Let's start creating a Flex Message.

Click on New at the top-right corner and select bubble from the options. Clicking the bubble option creates a bubble type Flex Message container with hello, world text.

For more information about the types of containers, see container.

Select Bubble Type Container

Tip

Notice when you select bubble, an "OK" message pops up at the bottom of the preview area. This means that the update you made has been successfully reflected in the preview area.

Select Message Type

# Step 2. Add a header

Now that you have the foundation of the Flex Message, let's add a header containing the business name to the business card.

As explained in detail here, a Flex Message bubble consists of header, hero, body and footer.

Block style example

header is the area which displays the message subject or header.

Select header in the tree view area. While header is highlighted, click + at the top-left corner of the tree view area and select box. This creates another box in the header.

Let's set the background color of the header.

In the property area, locate the backgroundColor field. Enter the background color of your choice in hexadecimal color code and hit the enter key (In this tutorial, we'll use #00B900).

Whenever you add or select a property in the property area, hitting the enter key reflects your entry in the preview area. From this point onward in this tutorial, we will omit this instruction for simplicity and readability.

Set Header Background Color

Let's now change the text content of the header.

Click on the "hello, world" text under vertical box in the tree view area. Vertical box is a layout type for Flex Messages. It determines the direction in which the child elements are placed. For more information, see Direction of placing components.

In the property area, locate the text field, and change the content from "hello, world" to your company name (We'll use "Flex Message Corp").

The background color made the header more noticeable, but it made the text content a little harder to see. We can solve this problem by changing the text color and font weight.

In the property area, locate the color field and enter the font color of your choice in hexadecimal color code (We'll use #FFFFFF).

To change the font weight of the text, locate the weight field in the property area. Switch the value to bold.

By now you should see something like this:

Add Header Final Output

# Step 3. Add an image

One way to make a digital business card more exciting is to add an image to it. With Flex Message Simulator, adding or styling an image can't get easier.

Locate and click hero in the tree view area, and click + in the top-left corner. The hero block of a Flex Message mainly displays the image content.

Select image from the collapsible menu. This adds an image to the hero section in the Flex Message.

To change the default image to your own, click image under hero in the tree view area. This opens up a form in the property area which you can fill out to adjust the way the image displays.

In the property area, locate the url field. This field specifies the URL of the image in your Flex Message. Enter the URL of the portrait image for the business card in the field.

Note

The image and its URL must satisfy the following conditions:

  • Protocol: HTTPS over TLS 1.2 or later
  • Image format: JPEG or PNG
  • Maximum image size: 1024×1024 pixels
  • Maximum data size: 1 MB

You cannot upload image files to Flex Message Simulator. Specify a URL of an image that is already uploaded on the web.

In this tutorial, we will be using this image.

Add Image

The image was reflected successfully, but it seems a little small. Let's adjust its size.

In the property area, locate the size field. size determines the maximum size of the image width. For more information, see "size" in Image in the Messaging API Reference. Click on the size field and select xl from the collapsible menu.

By now you should see something like this:

Add Image Final Output

# Step 4. Add a name

One of the most important purposes of a business card is to convey contact information. Presenting key information such as your name with a noticeable style can help fulfill this purpose.

Let's add your name under the image.

In the tree view area, locate the vertical box under body, which currently contains one text element with content hello, world. Click hello, world. In the property area, locate the text field. Change the text content from hello, world to your name.

Let's style the name you just added. We'll apply these styles:

  1. Increase the font size. Locate the size field and select xl from the collapsible menu (The default size is md).
  2. Increase the font weight. Locate the weight field and select bold from the collapsible menu.
  3. Center the text. Locate the align field and select center from the collapsible menu.

By now you should see something like this:

Add Name Final Output

# Step 5. Add a job title

Another piece of information as important as a name in a business card is your job title.

Let's add a job title under the name.

In the tree view area, click the first vertical box under body and click + in the top-left corner. Select text from the collapsible menu. This creates a new text field under the name. Click hello, world. In the property area, locate the text field and change the text content from hello, world to your position.

Let's now center the text. Locate the align field and select center from the collapsible menu.

By now you should see something like this:

Add Job Title Final

# Step 6. Add a separator

You can add a separator to make the separation between sections more obvious.

Let's add a separator between the vertical box containing the name and job title and the subsequent content.

In the tree view area, click the first vertical box under body and click + in the top-left corner. Select separator from the collapsible menu. This creates a new separator under the selected vertical box.

Your separator should look something like this:

Add Separator

The gap between the separator and the previous component seems too narrow. You can add a margin to solve this problem. For more information about margins, see Separator in the Messaging API reference.

In the property area, locale the margin field and select md from the collapsible menu.

By now you should see something like this:

Add Separator Final

# Step 7. Add buttons

One way to add interactivity to a Flex Message is to use buttons.

We'll add three buttons under the job title.

Let's first create a component to group the buttons. Click the first vertical box under body and click + in the top-left corner. Select box from the collapsible menu. This creates a new vertical box to which we can add buttons.

Click the vertical box you just created and click + in the top-left corner. Select button. This creates a button component.

When you create a new box in Flex Message Simulator, a hello, world text component is automatically added to the box. Since you will be adding buttons and will not need this text, let's delete it.

Click the hello, world text on top of the button you just created, and click the red x button at top of the tree view area. This deletes the default hello, world text.

Delete Text

When an end user taps a button, it performs a specific action. These actions can be a URI action, or a postback action.

We'll add these actions to the buttons:

  1. Jump to the company's website
  2. Open a registration form made with LINE Front-end Framework (LIFF)
  3. Call the company's number

Notice that the vertical box you just created contains an item called action. When you create a button with Flex Message Simulator, it automatically fills the label of the button with "action". Click action to display the included properties in the property area.

In the property area, scroll down to the bottom of the page and locate the Action section. This section defines the action performed when the user taps the button. Notice that the type field is filled with uri. Since we want the user to open a website URL, let's keep this input.

In the Action section, locate the label field. This field defines the label the user sees on the button. Enter Visit our website, or a label of your choice in this field.

Let's now set the URI of the company. Locate the uri field, and enter the website URI of your choice.

Add URI Action Button

Notice that it's hard to see where the button's tappable area is. To solve this problem, you can add a color to the tappable area. At the top of the property area, under the Button section, locate the style field. This area defines the style of the button. There are three styles you can choose from:

  • primary: Style for dark color buttons
  • secondary: Style for light color buttons
  • link: HTML link style

We recommend that you use the link style if there are multiple buttons are vertically stacked in a component. Select link from the collapsible menu. Your button should look something like this:

Change Button Color

Now your Flex Message has a functioning button.

Let's continue adding more buttons.

For the second button we'll add a LINE Front-end Framework (LIFF) URL to the business' registration form. LIFF is a platform for web apps provided by LINE. LIFF apps can get data from the LINE Platform such as the LINE user ID.

Tip

If you set a URL to a registration form made with LIFF to a button in a Flex Message, the registration form will be displayed when a user taps the applicable button. You can send a new message to the user based on the information entered in the registration form.

For more information about LIFF, see LINE Front-end Framework (LIFF). To find out how to develop a LIFF app, see Developing a LIFF App or try out the LIFF starter app.

To create the second button, in the tree view area, click the vertical box under which you created the first button, and click +. Select button.

Click action.

As with the first button, let's change the style of the button. Under the Button section, locate the style field and change the value to link.

In the property area, scroll down to the Action section.

Locate the label field and change the text to Register with us.

As with the first button, since we're adding a LIFF URL, let's keep the type field to uri. Enter the LIFF app URL.

Your second button should look something like this:

Add LIFF Button

Let's move on to the third button.

To create a button to call a phone number, we can take advantage of LINE Out.

Note

LINE Out is a service that lets users make phone calls on LINE. LINE Out is not available in all countries. For more information, see the LINE Out How to Use page.

As with buttons 1 and 2, click the vertical box and click +. Select button.

Click action in the tree view area and scroll down to the Action section in the property area.

Set the type field to uri and label to "Call us now", or a message of your choice.

Set the uri field to this format: https://line.me/R/call/{country_calling_code}/{phone_number}

Specify the country code and the phone number as path parameters. Don't include the "+" symbol in the URL. For example, https://line.me/R/call/81/09001234567 sets the country calling code to "+81" and the local phone number to "090-0123-4567".

Set style to link.

Your third button should look something like this:

Add LINE OUT Button

Notice that the buttons seem a little too close to the preceding box component.

To solve this, we can add padding to box components.

Click the vertical box that contains the buttons you just created.

In the property area, locate the Padding section. Since we want to add a padding to the top of the component containing the buttons, set paddingTop to 10px.

As you can see below, there is now more space between the two components.

Style Buttons

Margins

You can also add spacing between components by adding a margin. To do so, in the tree view area, click the vertical box to which the buttons belong. In the property area, locate margin under the Box section and select a margin size of your choice from the collapsible menu.

That completes all components needed for a digital business card!

# Next steps

Once you finish structuring your Flex Message, you can export the JSON data of the Flex Message you created as explained in Checking out the generated JSON. By using Messaging API, you can send the Flex Message as a reply message in response to a webhook event triggered by a user's action, or send it as a push message. Try sending the Flex Message using a server platform such as Heroku, or any server of your choice.

For more information, see Sending messages with the Messaging API.

# Getting sample JSON data

You can download the sample JSON data of the digital business card we introduced in this tutorial and preview the Flex Message.

Copy the downloaded JSON data. Click </>View as JSON at the top-right corner and override the existing JSON data by selecting all, copy and pasting the downloaded JSON data.

Click Apply at the bottom-right corner. You should see the Flex Message constructed by the sample JSON data in the preview area.

Preview Flex Message created from sample JSON data

# Conclusion

Flex Message Simulator is a simple tool to brainstorm, design, and prototype a Flex Message without having to write code. As demonstrated by the digital business card example, there are a limitless number of use cases for Flex Message. Flex Message Simulator helps users conceptualize ideas, test prototypes and speed up the creation of Flex Messages by lowering technical barriers. Create more unique Flex Messages with Flex Message Simulator!