# LINE MINI App UI Components

LINE MINI App page consists of (A)Header and (B)Body

Platform-native components are used in the LINE MINI App header, which is automatically generated by LINE.

The header is composed of the following components:

Number Component Description
1 Service Name Specified on the LINE MINI App page<title>. The elements are displayed. You cannot set the font.
- Subtext If you are accessing a page with a domain different from the Entry Point URL, the original domain of the content appears under Service Name.
2 Action button When tapped, the action button displays options for users to: share the LINE MINI App page with friends, save the page, or reload the page. You cannot set the option text.
3 Close Button Closes the LINE MINI App.
4 Return Button Displays the previous page.
5 Loading Bar Displays load status of the current page.

# Change the header background color to your brand color.

The following standard colors are used for the Header.

  • background: white
  • text and button label: black

You can change the header background color to the brand color. Enter the Hexadecimal color code (e.g. #00c300) in the [header background color] in the LIFF tab of LINE Developers Console.

Tip

The text and button label colors are automatically set to white or black to match the background color.

# Body

WebView is used for the body. Utilize HTML5 and LIFF for when developing each of your services.

For more information on LINE MINI App development specifications, see LINE MINI App Specifications.