# Implementing a custom action button
LINE MINI Apps come with a built-in action button in the (A) header component that enables users to share the currently-opened page with their friends. As this action button is implemented by LINE and is displayed by default, the behavior of the button and the content of the share message cannot be customized.
However, if you implement a custom action button in the (B) body component, you can customize the content of the share message before sharing the LINE MINI App.
# Guidelines
When you implement a custom action button to enable sending custom share messages, follow these guidelines to help your users understand the content of the message quickly and accurately.
Note
If you cannot meet the design requirements herein because of the nature of the service you provide, contact us at mini_request@linecorp.com.
# Using share target picker
Implement a custom action button in the body and display the target picker (screen for selecting a group or friend) when the button is tapped. When the user selects the recipient in the target picker, the user can send the share message created by the developer, such as Flex Message.
See Sending messages to a user's friend for detailed guide on using the share target picker.
# Custom share message format
Use a Bubble container of the Flex Message to compose custom share messages. Do not use a Carousel container of the Flex Message.
The custom share message includes standard type and image list type, both of which are then respectively divided into sections A to F below:
| Label | Section | Required | Description |
|---|---|---|---|
| A | Image | Optional | Image size must be small enough for the whole message to be contained within the screen, eliminating the need for scrolling. |
| B | Title | Required | Summarize the content of the message. |
| C | Subtitle | * | This is the subtitle of your message. |
| D | Detail | * | A list of items with a label and description: The maximum number of items differs between the standard type and the image list type:
|
| E | Button | Required |
|
| F | Footer | Required | Compose with your LINE MINI App icon, LINE MINI App name, and a image  . Don't change this image. Specify the URI action to display the LINE MINI App top page (https://liff.line.me/{your-liff-ID}/) when the user taps this image. |
* You must insert either C, the sub-title or D, the detail section. You may use both.
# Standard type
For standard types of Flex Message, follow these guidelines:
For an example JSON file, see Example JSON file following guidelines.
Note
- Actions can only be set on the specified components of buttons (E) and footer (F).
- Don't change any properties not described here.
# Standard type - Image (A)
Put the image (A) in the hero block.
| Label | Section | Type | Description |
|---|---|---|---|
| A | Image | Hero block > Image |
|
{
"type": "bubble",
"hero": { // Hero block
// Image (A)
"type": "image",
"url": "https://example.com/hero-image.png",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover"
},
"body": {...}
}
# Standard type - Body
Specify the body block that contains the title (B), sub-title (C), details (D), and buttons (E) as follows:
| Label | Section | Type | Description |
|---|---|---|---|
| - | - | Body block > Box |
|
{
"type": "bubble",
"hero": { ... },
"body": { // Body block
// Box
"type": "box",
"layout": "vertical",
"contents": [ ... ],
"spacing": "md"
}
}
# Standard type - Title (B)
| Label | Section | Type | Description |
|---|---|---|---|
| B | Title | Box |
|
| B | Title | Text |
|
{
"type": "bubble",
"hero": { ... },
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ // Title (B) - Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Text
"type": "text",
"text": "Main title",
"size": "lg",
"color": "#000000",
"weight": "bold",
"wrap": true
}
],
"spacing": "none"
}
],
"spacing": "md"
}
}
# Standard type - Sub-title (C)
| Label | Section | Type | Description |
|---|---|---|---|
| C | Sub-title | Box |
|
| C | Sub-title | Text |
|
{
"type": "bubble",
"hero": { ... },
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ // Title (B) - Box
...
},
{ // Sub-title (C) - Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Text
"type": "text",
"text": "Sub-title",
"size": "sm",
"color": "#999999",
"wrap": true
}
],
"spacing": "none"
}
],
"spacing": "md"
}
}
# Standard type - Details (D)
| Label | Section | Type | Description |
|---|---|---|---|
| D | Details | Box |
|
| D | Details - item | Box | This is a box containing only one set of D-1 and D-2.
|
| D-1 | Details - label | Text |
|
| D-2 | Details - description | Text |
|
{
"type": "bubble",
"hero": { ... },
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ // Title (B) - Box
...
},
{ // Sub-title (C) - Box
...
},
{ // Details (D) - Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Label (D-1) - Box
"type": "box",
"layout": "horizontal",
"contents": [
{ // Text
"type": "text",
"text": "Label 1",
"size": "sm",
"color": "#555555",
"wrap": false
"flex": 20
},
{ Description
"type": "text",
"text": "Description 1",
"size": "sm",
"color": "#111111",
"wrap": false,
"flex": 55
}
],
"flex": 1,
"spacing": "sm"
},
{ // Detail (D-2) - Box
"type": "box",
"layout": "horizontal",
"contents": [
{ // Text
"type": "text",
"text": "Label 2",
"size": "sm",
"color": "#555555",
"wrap": false
"flex": 20
},
{ // Text
"type": "text",
"text": "Description 2",
"size": "sm",
"color": "#111111",
"wrap": false,
"flex": 55
}
],
"flex": 1,
"spacing": "sm"
}
],
"spacing": "sm",
"margin": "lg",
"flex": 1
}
],
"spacing": "md"
}
}
# Standard type - Button (E)
| Label | Section | Type | Description |
|---|---|---|---|
| E | Button | Box | A box containing of E-1 and E-2.
|
| E-1 | Button (When using only link style) | Button |
|
| E-2 | Button (When using primary style) | Button |
|
When using primary style:
{
"type": "bubble",
"hero": { ... }
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ // Title (B) - Box
...
},
{ // Sub-title (C) - Box
...
},
{ // Details (D) - Box
...
},
{ // Button (E) - Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Button (primary)
"type": "button",
"action": {
"type": "uri",
"label": "View details",
"uri": "https://liff.line.me/123456-abcedfg/"
},
"style": "primary",
"height": "md",
"color": "#17c950"
},
{ // Button (link)
"type": "button",
"action": {
"type": "uri",
"label": "Share",
"uri": "https://liff.line.me/123456-abcedfg/share"
},
"style": "link",
"height": "md",
"color": "#469fd6"
}
],
"spacing": "xs",
"margin": "lg"
}
],
"spacing": "md"
}
}
# Standard type - Footer (F)
Place the footer (F) in the footer block.
| Label | Section | Element | Description |
|---|---|---|---|
| - | - | Footer block > Box |
|
| - | - | Separator |
|
| F | Footer | Box | A box containing of F-1 to F-3.
|
| F-1 | LINE MINI App icon | Image |
|
| F-2 | LINE MINI App name | Text |
|
| F-3 | | Image |
|
{
"type": "bubble",
"hero": { ... },
"body": { ... },
"footer": { // Footer block
// Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Separator
"type": "separator",
"color": "#f0f0f0"
},
{ // Footer (F) - Box
"type": "box",
"layout": "horizontal",
"contents": [
{ // LINE MINI App icon (F-1)
"type": "image",
"url": "https://example.com/line-mini-app-icon.png",
"flex": 1,
"gravity": "center"
},
{ // LINE MINI App name (F-2)
"type": "text",
"text": "Service name",
"flex": 19,
"size": "xs",
"color": "#999999",
"weight": "bold",
"gravity": "center",
"wrap": false
},
{ // > (F-3)
"type": "image",
"url": "https://vos.line-scdn.net/service-notifier/footer_go_btn.png",
"flex": 1,
"gravity": "center",
"size": "xxs",
"action": {
"type": "uri",
"label": "action",
"uri": "https://liff.line.me/123456-abcedfg/"
}
}
],
"flex": 1,
"spacing": "md",
"margin": "md"
}
]
}
}
# Image list type
For image list types of Flex Message, follow these guidelines:
For an example JSON file, see Example JSON file following guidelines.
Note
- Actions can only be set on the specified components of buttons (E) and footer (F).
- Don't change any properties not described herein.
# Image list type - Image (A)
Put the image (A) in the hero block.
| Label | Section | Type | Description |
|---|---|---|---|
| A | Image | Hero block > Image |
|
{
"type": "bubble",
"hero": { // Hero block
// Image (A)
"type": "image",
"url": "https://example.com/hero-image.png",
"size": "full",
"aspectRatio": "20:13",
"aspectMode": "cover"
},
"body": {...}
}
# Image list type - Body
Specify the body block that contains the title (B), sub-title (C), details (D), and buttons (E) as follows:
| Label | Section | Type | Description |
|---|---|---|---|
| - | - | Body block > Box |
|
{
"type": "bubble",
"hero": { ... },
"body": { // Body block
// Box
"type": "box",
"layout": "vertical",
"contents": [ ... ],
"spacing": "md"
}
}
# Image list type - Title (B)
| Label | Section | Type | Description |
|---|---|---|---|
| B | Title | Box |
|
| B | Title | Text |
|
{
"type": "bubble",
"hero": { ... },
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ // Title (B) - Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Text
"type": "text",
"text": "Main title",
"size": "lg",
"color": "#000000",
"weight": "bold",
"wrap": true
}
],
"spacing": "none"
}
],
"spacing": "md"
}
}
# Image list type - Sub-title (C)
| Label | Section | Type | Description |
|---|---|---|---|
| C | Sub-title | Box |
|
| C | Sub-title | Text |
|
{
"type": "bubble",
"hero": { ... },
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ // Title (B) - Box
...
},
{ // Sub-title (C) - Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Text
"type": "text",
"text": "Sub-title",
"size": "sm",
"color": "#999999",
"wrap": true
}
],
"spacing": "none"
}
],
"spacing": "md"
}
}
# Image list type - Details (D)
| Label | Section | Type | Description |
|---|---|---|---|
| D | Details | Box |
|
| - | Details - Item | Box | A box containing only one set of D-1 to D-4.
|
| D-1 | Details - Image | Image |
|
| - | Details - Text area | Box | A box containing of D-2 to D-4.
|
| D-2 | Details - General text | Text |
|
| D-3 | Details - Text to emphasize | Text |
|
| D-4 | Details - Image+text | Box | A box containing of image and text of D-4:
|
{
"type": "bubble",
"hero": { ... },
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ // Title (B) - Box
...
},
{ // Sub-title (C) - Box
...
},
{ // Details (D) - Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Item
"type": "box",
"layout": "horizontal",
"contents": [
{ // Image
"type": "image",
"url": "https://example.com/item-image01.png",
"flex": 3,
"size": "sm",
"aspectRatio": "1:1",
"aspectMode": "cover"
},
{ // Text area
"type": "box",
"layout": "vertical",
"contents": [
{ // General text (D-2)
"type": "text",
"text": "General text",
"size": "md",
"color": "#111111"
},
{ // Text to emphasize (D-3)
"type": "text",
"text": "Text to emphasize",
"size": "md",
"color": "#111111"
},
{ // Image+text (D-4)
"type": "box",
"layout": "horizontal",
"contents": [
{ // Image
"type": "image",
"url": "https://example.com/item-image02.png",
"flex": 8,
"gravity": "center",
"size": "xxs",
"aspectRatio": "1:1"
},
{ // Text
"type": "text",
"text": "Text",
"flex": 85,
"gravity": "center",
"size": "sm",
"color": "#17c950",
"margin": "xs"
}
],
"flex": 1
}
],
"flex": 8,
"spacing": "xs",
"margin": "md"
}
],
"flex": 1
}
],
"spacing": "xl",
"margin": "lg"
}
],
"spacing": "md"
}
}
# Image list type - Button (E)
| Label | Section | Type | Description |
|---|---|---|---|
| E | Button | Box | A box containing of E-1 and E-2.
|
| E-1 | Button (When using only link) | Button |
|
| E-2 | Button (When using primary style) | Button |
|
When using primary style:
{
"type": "bubble",
"hero": { ... }
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{ // Title (B) - Box
...
},
{ // Sub-title (C) - Box
...
},
{ // Details (D) - Box
...
},
{ // Button (E) - Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Button (primary)
"type": "button",
"action": {
"type": "uri",
"label": "View details",
"uri": "https://liff.line.me/123456-abcedfg/"
},
"style": "primary",
"height": "md",
"color": "#17c950"
},
{ // Button (link)
"type": "button",
"action": {
"type": "uri",
"label": "Share",
"uri": "https://liff.line.me/123456-abcedfg/share"
},
"style": "link",
"height": "md",
"color": "#469fd6"
}
],
"spacing": "xs"
}
],
"spacing": "md"
}
}
# Image list type - Footer (F)
| Label | Section | Type | Description |
|---|---|---|---|
| - | - | Footer block > Box |
|
| - | - | Separator |
|
| F | Footer | Box | A box containing of F-1 to F-3.
|
| F-1 | LINE MINI App icon | Image |
|
| F-2 | LINE MINI App name | Text |
|
| F-3 | | Image |
|
{
"type": "bubble",
"hero": { ... },
"body": { ... },
"footer": { // Footer block
// Box
"type": "box",
"layout": "vertical",
"contents": [
{ // Separator
"type": "separator",
"color": "#f0f0f0"
},
{ // Footer (F) - Box
"type": "box",
"layout": "horizontal",
"contents": [
{ // LINE MINI App icon (F-1)
"type": "image",
"url": "https://example.com/line-mini-app-icon.png",
"flex": 1,
"gravity": "center"
},
{ // LINE MINI App name (F-2)
"type": "text",
"text": "Service name",
"flex": 19,
"size": "xs",
"color": "#999999",
"weight": "bold",
"gravity": "center",
"wrap": false
},
{ // > (F-3)
"type": "image",
"url": "https://vos.line-scdn.net/service-notifier/footer_go_btn.png",
"flex": 1,
"gravity": "center",
"size": "xxs",
"action": {
"type": "uri",
"label": "action",
"uri": "https://liff.line.me/123456-abcedfg/"
}
}
],
"flex": 1,
"spacing": "md",
"margin": "md"
}
]
}
}