LINE MINI App UI Components
# LINE MINI App UI Components
LINE MINI App page consists of (A)Header and (B)Body
# Header
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.