# 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) (opens new window). 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.
# 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.
If you hover your mouse over any item in the tree view area, the corresponding area is highlighted in the preview area.
# You can used predefined Flex Message layouts
The tool also offers some predefined Flex Message layouts.
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.
In this tutorial, we won't use a predefined layout. Instead, we'll create a Flex Message from scratch.
# You can copy the JSON of the Flex Message you created
To copy the JSON data generated, click </>View as JSON at the top-right corner the page.
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.
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.
# 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 in the block section of "Flex Message elements", a Flex Message bubble consists of header, hero, body and footer.
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.
Let's now add text content to the header.
Click on the box [vertical] that was just added to the header 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.
Click + in the top-left corner, and select text from the options. Click the text element you just created. 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:
# 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.
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: 10 MB
You cannot upload image files to Flex Message Simulator. Specify a URL of an image that is already uploaded on the web.
To avoid delays in displaying messages, keep the size of individual image files small (1 MB or less recommended).
In this tutorial, we will be using this 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:
# 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, click the box [vertical] under body. Click + in the top-left corner, and select text from the options. Click the text element you just created. In the property area, locate the text field and change the content from "hello, world" to your name.
Let's style the name you just added. We'll apply these styles:
- Increase the font size. Locate the
sizefield and selectxlfrom the collapsible menu (The default size ismd). - Increase the font weight. Locate the
weightfield and selectboldfrom the collapsible menu. - Center the text. Locate the
alignfield and selectcenterfrom the collapsible menu.
By now you should see something like this:
# 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 box [vertical] under body and click + in the top-left corner. Select text from the collapsible menu. This creates a new text field under the name. In the property area, locate the text field and change the 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:
# 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 box [vertical] 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:
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 tree view area, click the separator that was just added. In the property area, locate the margin field and select md from the collapsible menu.
By now you should see something like this:
# 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 box [vertical] 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 box [vertical] you created and click + in the top-left corner. Select button. This creates a button component.
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:
- Jump to the company's website
- Open a registration form made with LINE Front-end Framework (LIFF)
- Call the company's number
Click the box [vertical] you just created, and click +. Select button from the collapsible menu.
Click the button [action] button you just created.
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.
Domain names, paths, query parameters, and fragments in the uri property should be percent-encoded (opens new window) using UTF-8. For example, if you specify a URI with the following components, it should be https://example.com/path?q=Good%20morning#Good%20afternoon.
| scheme | domain name | path | query parameter | fragment | |
|---|---|---|---|---|---|
| key | value | ||||
| https | example.com | /path | q | Good morning | Good afternoon |
Adding a color to the button will make it easier to see the tapable areas.
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 buttonssecondary: Style for light color buttonslink: HTML text link style
We recommend that you use the link style if there are multiple buttons are vertically stacked in a component as demonstrated in the tutorial. Select link from the collapsible menu.
Your button should look something like this:
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.
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 Trying the LIFF starter app.
To create the second button, in the tree view area, click the box [vertical] under which you created the first button, and click +. Select button.
Click button[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:
Let's move on to the third button.
To create a button to call a phone number, we can take advantage of LINE Out.
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 (opens new window) page.
As with buttons 1 and 2, click the box [vertical] and click +. Select button.
Click button[action] you just created in the tree view area and set style to link.
Scroll down to the Action section of the properties 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 (opens new window) 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".
Your third button should look something like this:
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 box [vertical] that contains the three buttons you 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.
You can also add spacing between components by adding a margin. To do so, in the tree view area, click the box [vertical] 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 You can copy the JSON of the Flex Message you created. By using this JSON data, you can send the Flex Message as a message with the Messaging API.
For more information, see Sending messages with the Messaging API.
# Preview the 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.
Pasting the JSON data in text format generates a preview, which can be used for testing prototypes.
# 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 unique Flex Messages with Flex Message Simulator!
# Related pages
- Sending Flex Messages
- Flex Message elements
- Flex Message layouts
- Flex Message (Messaging API reference)