Message Types: Outbound
The following elements are sendable through Line; however, be aware of the restrictions and supported choices for each element.
Text
{
"type": "text",
"text": "Hi John,how are you?"
}
Image
{
"type": "image",
"caption": "Sample image",
"originalUrl": "https://i.picsum.photos/id/502/200/300.jpg?hmac=aHrprSZ5m8KmqTIrgi4dr8YmRjrN_BppdP5jCNrXB0E",
"contentType": "image/jpeg",
"previewUrl": "https://i.picsum.photos/id/502/200/300.jpg?hmac=aHrprSZ5m8KmqTIrgi4dr8YmRjrN_BppdP5jCNrXB0E"
}
Video
{
"type": "video",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/video/sample01.mp4",
"previewUrl": "https://www.buildquickbots.com/whatsapp/media/sample/video/sample01.mp4",
"caption": "Sample video"
}
Audio
{
"type": "audio",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/audio/sample01.mp3",
"duration": 12345
}
Stickers
{
"type": "sticker",
"url": "http://www.buildquickbots.com/whatsapp/stickers/SampleSticker01.webp",
"caption": "rock",
"contentType": "image/webp",
"urlExpiry": 1624957279044
}
Location
{
"type": "location",
"longitude": -122.425332,
"latitude": 37.758056,
"name": "Gupshup",
"address": "Mumbai"
}
Quick Reply
When a user receives a message that contains quick reply buttons from a LINE Official Account, those buttons appear at the bottom of the chat screen. The user can simply tap one of the buttons to reply to the LINE Official Account.
You can set up to 13 quick reply buttons to a message of any type.
Action
An action is triggered when the quick reply button is tapped.
The following actions are available only for the quick reply feature. You cannot use these actions with the other message types.
- Camera action
- Camera roll action
- Location action
In addition to the actions above, the following actions that are common to the other message types are available:
- Postback action
- Message action
- URL action
- Datetime picker action
Rich menu switch action isn't available for use for quick messages.
{
"type": "sticker",
"packageId": "446",
"stickerId": "1988",
"options": [
{
"type": "camera",
"title": "camera",
"imageUrl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
{
"type": "cameraRoll",
"title": "cameraRoll",
"imageUrl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
{
"type": "location",
"title": "location",
"imageUrl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
{
"type": "postback",
"title": "Add to cart",
"postbackText": "action=add&itemid=222",
"displayText": "Add to cart",
"inputOption": "openKeyboard",
"fillInText": "---\nName: \nPhone: \nBirthday: \n---"
},
{
"type": "text",
"title": "Yes",
"description": "Yes"
},
{
"type": "url",
"title": "View detail",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
{
"type": "url",
"title": "Menu",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
{
"type": "url",
"title": "Phone order",
"url": "tel:09001234567"
},
{
"type": "url",
"title": "Tell friend",
"url": "https://line.me"
},
{
"type": "datetimepicker",
"title": "Select date",
"postbackText": "storeId=12345",
"modeOfDate": "datetime",
"initialDate": "2017-12-25t00:00",
"maxDate": "2018-01-24t23:59",
"minDate": "2017-12-25t00:00"
}
]
}
Refer here for a detailed information on how to use quick replies.
Button Catalogue
Template with an image, title, text, and multiple action buttons.
It can have a maximum of 4 action objects.
{
"type": "catalogue",
"message": "this is a carousel template",
"subType": "buttons",
"items": [
{
"imageAspectRatio": "rectangle",
"imageSize": "cover",
"thumbnailImageUrl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"imageBackgroundColor": "#000000",
"title": "this is menu",
"text": "description",
"defaultaction": {
"type": "url",
"title": "View detail",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
"options": [
{
"type": "postback",
"title": "Add to cart",
"postbackText": "action=add&itemid=222",
"displayText": "Add to cart",
"inputOption": "openKeyboard",
"fillInText": "---\nName: \nPhone: \nBirthday: \n---"
},
{
"type": "text",
"title": "Yes",
"description": "Yes"
},
{
"type": "url",
"title": "View detail",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
{
"type": "datetimepicker",
"title": "Select date",
"postbackText": "storeId=12345",
"modeOfDate": "datetime",
"initialDate": "2017-12-25t00:00",
"maxDate": "2018-01-24t23:59",
"minDate": "2017-12-25t00:00"
}
]
}
]
}
Refer here for a detailed information on how to use button catalogue.
Confirm Catalogue
It is a template with two action buttons. You can set 2 actions for the 2 buttons.
{
"type": "catalogue",
"message": "This is a Button Template",
"subType": "confirm",
"items": [
{
"text": "are you Sure",
"options": [
{
"type": "text",
"title": "Yes",
"description": "yes"
},
{
"type": "postback",
"title": "Add to cart",
"postbackText": "action=add&itemid=222",
"displayText": "Add to cart",
"inputOption": "openKeyboard",
"fillInText": "---\nName: \nPhone: \nBirthday: \n---"
}
]
}
]
}
Refer here for a detailed information on how to use button catalogue.
Carousal
Use the carousel template to send a message with multiple column objects that users can cycle through. In addition to having buttons, you can also indicate in each column object a single action to be executed when a user taps anywhere in the image, title, or text area.
A maximum of 3 action objects are allowed with Carousal.
{
"type": "catalogue",
"message": "this is a carousel template",
"subType": "carousel",
"imageaspectratio": "square",
"imageSize": "cover",
"items": [
{
"thumbnailImageUrl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"imageBackgroundColor": "#FFFFFF",
"title": "this is menu",
"text": "description",
"defaultaction": {
"type": "url",
"title": "View detail",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
"options": [
{
"type": "postback",
"title": "Add to cart",
"postbackText": "action=add&itemid=222",
"displayText": "Add to cart",
"inputOption": "openKeyboard",
"fillInText": "---\nName: \nPhone: \nBirthday: \n---"
},
{
"type": "text",
"title": "Yes",
"description": "Yes"
},
{
"type": "url",
"title": "View detail",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
}
]
},
{
"thumbnailImageUrl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"imageBackgroundColor": "#000000",
"title": "this is menu",
"text": "description",
"defaultaction": {
"type": "url",
"title": "View detail",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
"options": [
{
"type": "datetimepicker",
"title": "Select date",
"postbackText": "storeId=12345",
"modeOfDate": "datetime",
"initialDate": "2017-12-25t00:00",
"maxDate": "2018-01-24t23:59",
"minDate": "2017-12-25t00:00"
},
{
"type": "url",
"title": "Menu",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
{
"type": "url",
"title": "View details",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"altUri": {
"desktop": "https://www.gupshup.io/"
}
}
]
},
{
"thumbnailImageUrl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"imageBackgroundColor": "#000000",
"title": "this is menu",
"text": "description",
"defaultaction": {
"type": "url",
"title": "View detail",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
"options": [
{
"type": "url",
"title": "Phone order",
"url": "tel:09001234567"
},
{
"type": "url",
"title": "Recommend to friends",
"url": "https://line.me/R/nv/recommendOA/@linedevelopers"
},
{
"type": "postback",
"title": "Add to cart",
"postbackText": "action=add&itemid=222",
"displayText": "Add to cart",
"inputOption": "openKeyboard",
"fillInText": "---\nName: \nPhone: \nBirthday: \n---"
}
]
}
]
}
Keep the number of actions consistent for all columns. If you use an image or title for a column, make sure to do the same for all other columns.
Refer here for a detailed information on how to use Carousel.
Image Carousel
The image carousel template is a message type that enables users to scroll through multiple images.
It acts when the image is tapped. Only a Single action type is applicable to it. Template with multiple images which can be cycled like a carousel. The images will be shown in order when scrolling horizontally.
{
"type": "catalogue",
"message": "this is a image carousel template",
"subType": "image_carousel",
"items": [
{
"imgurl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"options": [
{
"type": "postback",
"title": "Add to cart",
"postbackText": "action=add&itemid=222",
"displayText": "Add to cart",
"inputOption": "openKeyboard",
"fillInText": "---\nName: \nPhone: \nBirthday: \n---"
}
]
},
{
"imgurl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"options": [
{
"type": "text",
"title": "Yes",
"description": "Yes"
}
]
},
{
"imgurl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"options": [
{
"type": "url",
"title": "View detail",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
}
]
},
{
"imgurl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"options": [
{
"type": "datetimepicker",
"title": "Select date",
"postbackText": "storeId=12345",
"modeOfDate": "datetime",
"initialDate": "2017-12-25t00:00",
"maxDate": "2018-01-24t23:59",
"minDate": "2017-12-25t00:00"
}
]
},
{
"imgurl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"options": [
{
"type": "url",
"title": "Menu",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
}
]
},
{
"imgurl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"options": [
{
"type": "url",
"title": "View details",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"altUri": {
"desktop": "https://www.gupshup.io/"
}
}
]
},
{
"imgurl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"options": [
{
"type": "url",
"title": "Phone order",
"url": "tel:09001234567"
}
]
},
{
"imgurl": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg",
"options": [
{
"type": "url",
"title": "Tell friend",
"url": "https://line.me/R/nv/recommendOA/@linedevelopers"
}
]
}
]
}
Refer here for a detailed information on how to use Image Carousel.
Flex Message
Flex Messages are messages with a customizable layout. You can customize the layout freely based on the specification for CSS Flexible Box.
A Flex Message consists of three nested data structures: a container, blocks (header, hero, body, footer), and components.
- Container
| Container | Description |
|---|---|
| Bubble | This is a container that contains one message bubble. It can contain four blocks: header, hero, body, and footer. The maximum size of JSON data that defines a bubble is 30 KB. |
| Carousel | A carousel is a container that contains multiple bubbles as child elements. Users can scroll horizontally through the bubbles. The maximum size of JSON data that defines a carousel is 50 KB. |
- Component
| Component | Description |
|---|---|
| Box | This is a component that defines the layout of child components. You can also include a box in a box. |
| Button | This component renders a button. When the user taps a button, a specified action is performed. |
| Image | This component renders an Image. |
| Video | This component renders a video. |
| Icon | This component renders an icon for decorating the adjacent text. This component can be used only in a baseline box. |
| Text | This component renders a text string in one row. You can specify font color, size, and weight. |
| Span | This component renders multiple text strings with different designs in one row. You can specify the color, size, weight, and decoration of the font. Span is set to contents property in Text. |
| Separator | This component renders a separating line within a box. A vertical line will be rendered in a horizontal box and a horizontal line will be rendered in a vertical box. |
| Filler | This component is used to create a space. You can put a space between, before, or after components by inserting a filler anywhere within a box. |
{
"type": "flex",
"containerType": "carousel",
"notificationText": "This is carousel Flex Message",
"flexContents": [
{
"type": "bubble",
"size": "giga",
"direction": "ltr",
"header1": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "header"
},
{
"type": "image",
"url": "https://www.buildquickbots.com/whatsapp/media/sample/jpg/sample01.jpg"
},
{
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "innerbox"
}
]
}
]
},
"header2": {
"type": "image",
"url": "https://picsum.photos/200/300",
"size": "full",
"aspectRatio": "2:1"
},
"body": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "body"
}
]
},
"footer": {
"type": "box",
"layout": "vertical",
"contents": [
{
"type": "text",
"text": "footer"
}
]
}
}
]
}
Refer here for a detailed information on how to use Flex messages.
Updated about 1 year ago