0
# Rich Messages and Templates
1
2
Advanced message formatting including Flex Messages, templates, quick replies, and interactive components. Supports complex layouts, carousels, image maps, and rich interactive experiences for enhanced user engagement.
3
4
## Capabilities
5
6
### Template Messages
7
8
Pre-defined message templates for common interactive patterns including buttons, carousels, and confirmations.
9
10
```python { .api }
11
class TemplateMessage:
12
def __init__(self, alt_text: str, template: Template):
13
"""
14
Create a template-based message with interactive elements.
15
16
Args:
17
alt_text: Alternative text for notifications and accessibility
18
template: Template object (ButtonsTemplate, CarouselTemplate, etc.)
19
"""
20
21
class Template:
22
"""Base template class"""
23
type: str
24
25
class ButtonsTemplate(Template):
26
def __init__(
27
self,
28
text: str,
29
actions: List[Action],
30
thumbnail_image_url: Optional[str] = None,
31
image_aspect_ratio: Optional[TemplateImageAspectRatio] = None,
32
image_size: Optional[TemplateImageSize] = None,
33
image_background_color: Optional[str] = None,
34
title: Optional[str] = None
35
):
36
"""
37
Template with text, optional image, and action buttons.
38
39
Args:
40
text: Message text (max 400 characters)
41
actions: List of action objects (max 4)
42
thumbnail_image_url: Optional header image URL
43
title: Optional title text
44
"""
45
46
class ConfirmTemplate(Template):
47
def __init__(self, text: str, actions: List[Action]):
48
"""
49
Confirmation template with two action buttons.
50
51
Args:
52
text: Confirmation message text
53
actions: Exactly 2 action objects (typically "Yes" and "No")
54
"""
55
56
class CarouselTemplate(Template):
57
def __init__(
58
self,
59
columns: List[CarouselColumn],
60
image_aspect_ratio: Optional[TemplateImageAspectRatio] = None,
61
image_size: Optional[TemplateImageSize] = None
62
):
63
"""
64
Horizontally scrollable carousel of items.
65
66
Args:
67
columns: List of carousel column objects (max 10)
68
image_aspect_ratio: Aspect ratio for all images
69
image_size: Size setting for all images
70
"""
71
72
class ImageCarouselTemplate(Template):
73
def __init__(self, columns: List[ImageCarouselColumn]):
74
"""
75
Carousel of images with associated actions.
76
77
Args:
78
columns: List of image carousel columns (max 10)
79
"""
80
```
81
82
### Flex Messages
83
84
Highly customizable messages with complex layouts using flexible box model design.
85
86
```python { .api }
87
class FlexMessage:
88
def __init__(self, alt_text: str, contents: FlexContainer):
89
"""
90
Create a flexible layout message with complex visual design.
91
92
Args:
93
alt_text: Alternative text for notifications
94
contents: Flex container (FlexBubble or FlexCarousel)
95
"""
96
97
class FlexContainer:
98
"""Base flex container class"""
99
type: str
100
101
class FlexBubble(FlexContainer):
102
def __init__(
103
self,
104
header: Optional[FlexBox] = None,
105
hero: Optional[FlexComponent] = None,
106
body: Optional[FlexBox] = None,
107
footer: Optional[FlexBox] = None,
108
styles: Optional[FlexBubbleStyles] = None,
109
direction: Optional[str] = None,
110
size: Optional[str] = None
111
):
112
"""
113
Single bubble container with header, hero, body, and footer sections.
114
115
Args:
116
header: Optional header section
117
hero: Optional hero image/video section
118
body: Main content section
119
footer: Optional footer section with actions
120
styles: Custom styling options
121
direction: Text direction (ltr, rtl)
122
"""
123
124
class FlexCarousel(FlexContainer):
125
def __init__(self, contents: List[FlexBubble]):
126
"""
127
Horizontally scrollable carousel of flex bubbles.
128
129
Args:
130
contents: List of FlexBubble objects (max 12)
131
"""
132
```
133
134
### Flex Components
135
136
Individual components for building flex message layouts.
137
138
```python { .api }
139
class FlexComponent:
140
"""Base flex component class"""
141
type: str
142
143
class FlexBox(FlexComponent):
144
def __init__(
145
self,
146
layout: str,
147
contents: List[FlexComponent],
148
flex: Optional[int] = None,
149
spacing: Optional[FlexBoxSpacing] = None,
150
margin: Optional[FlexMargin] = None,
151
padding_all: Optional[str] = None,
152
padding_top: Optional[str] = None,
153
padding_bottom: Optional[str] = None,
154
padding_start: Optional[str] = None,
155
padding_end: Optional[str] = None,
156
background: Optional[FlexBoxBackground] = None,
157
border_width: Optional[FlexBoxBorderWidth] = None,
158
corner_radius: Optional[FlexBoxCornerRadius] = None
159
):
160
"""
161
Container component for grouping other components.
162
163
Args:
164
layout: Layout direction ("vertical" or "horizontal")
165
contents: List of child components
166
flex: Flex weight for space allocation
167
spacing: Space between child components
168
margin: External spacing
169
padding_*: Internal padding options
170
background: Background styling
171
"""
172
173
class FlexText(FlexComponent):
174
def __init__(
175
self,
176
text: str,
177
flex: Optional[int] = None,
178
margin: Optional[FlexMargin] = None,
179
size: Optional[FlexTextFontSize] = None,
180
align: Optional[str] = None,
181
gravity: Optional[str] = None,
182
wrap: Optional[bool] = None,
183
max_lines: Optional[int] = None,
184
weight: Optional[str] = None,
185
color: Optional[str] = None,
186
style: Optional[str] = None,
187
decoration: Optional[str] = None
188
):
189
"""
190
Text component with rich formatting options.
191
192
Args:
193
text: Text content with emoji and variable support
194
flex: Flex weight for space allocation
195
size: Font size (xxs, xs, sm, md, lg, xl, xxl, 3xl, 4xl, 5xl)
196
align: Text alignment (start, end, center)
197
gravity: Vertical alignment (top, bottom, center)
198
wrap: Enable text wrapping
199
weight: Font weight (regular, bold)
200
color: Text color (hex format)
201
style: Text style (normal, italic)
202
"""
203
204
class FlexImage(FlexComponent):
205
def __init__(
206
self,
207
url: str,
208
flex: Optional[int] = None,
209
margin: Optional[FlexMargin] = None,
210
align: Optional[str] = None,
211
gravity: Optional[str] = None,
212
size: Optional[FlexImageSize] = None,
213
aspect_ratio: Optional[str] = None,
214
aspect_mode: Optional[str] = None,
215
background_color: Optional[str] = None,
216
action: Optional[Action] = None
217
):
218
"""
219
Image component with flexible sizing and positioning.
220
221
Args:
222
url: Image URL (HTTPS required)
223
flex: Flex weight for space allocation
224
size: Image size (xxs to 5xl or full)
225
aspect_ratio: Width:height ratio (e.g., "1:1", "3:2")
226
aspect_mode: How image fits container (fit, fill)
227
action: Action when image is tapped
228
"""
229
230
class FlexButton(FlexComponent):
231
def __init__(
232
self,
233
action: Action,
234
flex: Optional[int] = None,
235
margin: Optional[FlexMargin] = None,
236
height: Optional[str] = None,
237
style: Optional[str] = None,
238
color: Optional[str] = None,
239
gravity: Optional[str] = None
240
):
241
"""
242
Interactive button component.
243
244
Args:
245
action: Action to perform when button is pressed
246
flex: Flex weight for space allocation
247
height: Button height (sm, md)
248
style: Button style (link, primary, secondary)
249
color: Button color (hex format)
250
gravity: Vertical alignment
251
"""
252
253
class FlexSeparator(FlexComponent):
254
def __init__(
255
self,
256
margin: Optional[FlexMargin] = None,
257
color: Optional[str] = None
258
):
259
"""
260
Visual separator line component.
261
262
Args:
263
margin: External spacing
264
color: Separator color (hex format)
265
"""
266
267
class FlexIcon(FlexComponent):
268
def __init__(
269
self,
270
url: str,
271
margin: Optional[FlexMargin] = None,
272
size: Optional[FlexIconSize] = None,
273
aspect_ratio: Optional[str] = None
274
):
275
"""
276
Small icon component for decorative elements.
277
278
Args:
279
url: Icon image URL (HTTPS required)
280
size: Icon size (xxs to 5xl)
281
aspect_ratio: Width:height ratio
282
"""
283
```
284
285
### Actions
286
287
Interactive elements that trigger behaviors when tapped.
288
289
```python { .api }
290
class Action:
291
"""Base action class"""
292
type: str
293
294
class PostbackAction(Action):
295
def __init__(
296
self,
297
data: str,
298
label: Optional[str] = None,
299
display_text: Optional[str] = None,
300
text: Optional[str] = None
301
):
302
"""
303
Action that sends postback data to webhook.
304
305
Args:
306
data: Postback data string (max 300 characters)
307
label: Button label text
308
display_text: Text shown in chat when button is pressed
309
"""
310
311
class MessageAction(Action):
312
def __init__(self, text: str, label: Optional[str] = None):
313
"""
314
Action that sends a message as if user typed it.
315
316
Args:
317
text: Message text to send
318
label: Button label text
319
"""
320
321
class URIAction(Action):
322
def __init__(self, uri: str, label: Optional[str] = None, alt_uri: Optional[AltUri] = None):
323
"""
324
Action that opens a URL or deep link.
325
326
Args:
327
uri: URL, telephone number, or app deep link
328
label: Button label text
329
alt_uri: Alternative URI for different platforms
330
"""
331
332
class DatetimePickerAction(Action):
333
def __init__(
334
self,
335
data: str,
336
mode: str,
337
label: Optional[str] = None,
338
initial: Optional[str] = None,
339
max: Optional[str] = None,
340
min: Optional[str] = None
341
):
342
"""
343
Action that opens date/time picker.
344
345
Args:
346
data: Postback data when date/time is selected
347
mode: Picker mode ("date", "time", or "datetime")
348
label: Button label text
349
initial: Initial value in ISO format
350
max: Maximum selectable value
351
min: Minimum selectable value
352
"""
353
354
class CameraAction(Action):
355
def __init__(self, label: str):
356
"""Action that opens device camera."""
357
358
class CameraRollAction(Action):
359
def __init__(self, label: str):
360
"""Action that opens device photo gallery."""
361
362
class LocationAction(Action):
363
def __init__(self, label: str):
364
"""Action that opens location picker."""
365
366
class RichMenuSwitchAction(Action):
367
def __init__(self, rich_menu_alias_id: str, data: str):
368
"""
369
Action that switches to a different rich menu.
370
371
Args:
372
rich_menu_alias_id: Target rich menu alias
373
data: Postback data for the switch
374
"""
375
376
class ClipboardAction(Action):
377
def __init__(self, clipboard_text: str, label: Optional[str] = None):
378
"""
379
Action that copies text to device clipboard.
380
381
Args:
382
clipboard_text: Text to copy to clipboard
383
label: Button label text
384
"""
385
```
386
387
### Quick Replies
388
389
Fast-access reply options displayed above the input field.
390
391
```python { .api }
392
class QuickReply:
393
def __init__(self, items: List[QuickReplyItem]):
394
"""
395
Quick reply interface with predefined response options.
396
397
Args:
398
items: List of quick reply items (max 13)
399
"""
400
401
class QuickReplyItem:
402
def __init__(
403
self,
404
action: Action,
405
image_url: Optional[str] = None
406
):
407
"""
408
Individual quick reply button.
409
410
Args:
411
action: Action to perform when item is tapped
412
image_url: Optional icon image URL
413
"""
414
```
415
416
### Image Maps
417
418
Interactive images with clickable areas that trigger actions.
419
420
```python { .api }
421
class ImagemapMessage:
422
def __init__(
423
self,
424
base_url: str,
425
alt_text: str,
426
base_size: ImagemapBaseSize,
427
actions: List[ImagemapAction],
428
video: Optional[ImagemapVideo] = None,
429
external_link: Optional[ImagemapExternalLink] = None
430
):
431
"""
432
Interactive image with clickable hotspots.
433
434
Args:
435
base_url: Base URL for image files (without file extension)
436
alt_text: Alternative text for accessibility
437
base_size: Original image dimensions
438
actions: List of clickable areas and their actions
439
video: Optional video overlay
440
external_link: Optional external link area
441
"""
442
443
class ImagemapBaseSize:
444
def __init__(self, width: int, height: int):
445
"""
446
Original image dimensions in pixels.
447
448
Args:
449
width: Image width (max 1040px)
450
height: Image height (max 1040px)
451
"""
452
453
class ImagemapAction:
454
"""Base imagemap action class"""
455
type: str
456
area: ImagemapArea
457
458
class URIImagemapAction(ImagemapAction):
459
def __init__(self, uri: str, area: ImagemapArea):
460
"""Imagemap action that opens a URL."""
461
462
class MessageImagemapAction(ImagemapAction):
463
def __init__(self, text: str, area: ImagemapArea):
464
"""Imagemap action that sends a message."""
465
466
class ImagemapArea:
467
def __init__(self, x: int, y: int, width: int, height: int):
468
"""
469
Rectangular clickable area on imagemap.
470
471
Args:
472
x: Left edge X coordinate
473
y: Top edge Y coordinate
474
width: Area width
475
height: Area height
476
"""
477
```
478
479
## Usage Examples
480
481
### Basic Template Messages
482
483
```python
484
from linebot.v3.messaging.models import (
485
TemplateMessage, ButtonsTemplate, ConfirmTemplate,
486
PostbackAction, URIAction, MessageAction
487
)
488
489
# Buttons template
490
buttons_template = TemplateMessage(
491
alt_text="Choose an option",
492
template=ButtonsTemplate(
493
text="What would you like to do?",
494
title="Main Menu",
495
actions=[
496
PostbackAction(label="View Profile", data="action=profile"),
497
URIAction(label="Visit Website", uri="https://example.com"),
498
MessageAction(label="Say Hello", text="Hello!"),
499
]
500
)
501
)
502
503
# Confirmation template
504
confirm_template = TemplateMessage(
505
alt_text="Confirm action",
506
template=ConfirmTemplate(
507
text="Are you sure you want to delete this item?",
508
actions=[
509
PostbackAction(label="Yes", data="delete=confirm"),
510
PostbackAction(label="No", data="delete=cancel")
511
]
512
)
513
)
514
```
515
516
### Carousel Template
517
518
```python
519
from linebot.v3.messaging.models import (
520
CarouselTemplate, CarouselColumn, TemplateImageAspectRatio
521
)
522
523
carousel_template = TemplateMessage(
524
alt_text="Product catalog",
525
template=CarouselTemplate(
526
columns=[
527
CarouselColumn(
528
thumbnail_image_url="https://example.com/product1.jpg",
529
title="Product 1",
530
text="Amazing product description",
531
actions=[
532
PostbackAction(label="Buy", data="buy=product1"),
533
URIAction(label="Details", uri="https://example.com/product1")
534
]
535
),
536
CarouselColumn(
537
thumbnail_image_url="https://example.com/product2.jpg",
538
title="Product 2",
539
text="Another great product",
540
actions=[
541
PostbackAction(label="Buy", data="buy=product2"),
542
URIAction(label="Details", uri="https://example.com/product2")
543
]
544
)
545
],
546
image_aspect_ratio=TemplateImageAspectRatio.RECTANGLE,
547
image_size="cover"
548
)
549
)
550
```
551
552
### Flex Message Examples
553
554
```python
555
from linebot.v3.messaging.models import (
556
FlexMessage, FlexBubble, FlexBox, FlexText, FlexImage,
557
FlexButton, FlexSeparator, PostbackAction
558
)
559
560
# Product card flex message
561
product_card = FlexMessage(
562
alt_text="Product Card",
563
contents=FlexBubble(
564
hero=FlexImage(
565
url="https://example.com/product.jpg",
566
size="full",
567
aspect_ratio="20:13",
568
aspect_mode="cover"
569
),
570
body=FlexBox(
571
layout="vertical",
572
contents=[
573
FlexText(
574
text="Premium Headphones",
575
weight="bold",
576
size="xl",
577
color="#333333"
578
),
579
FlexText(
580
text="$299.99",
581
size="lg",
582
color="#E74C3C",
583
weight="bold",
584
margin="md"
585
),
586
FlexSeparator(margin="lg"),
587
FlexText(
588
text="High-quality wireless headphones with noise cancellation and premium sound quality.",
589
wrap=True,
590
margin="lg",
591
size="sm",
592
color="#666666"
593
)
594
]
595
),
596
footer=FlexBox(
597
layout="horizontal",
598
contents=[
599
FlexButton(
600
action=PostbackAction(
601
label="Add to Cart",
602
data="action=add_cart&product=headphones"
603
),
604
style="primary",
605
color="#1DB954"
606
),
607
FlexButton(
608
action=URIAction(
609
label="View Details",
610
uri="https://example.com/headphones"
611
),
612
style="secondary"
613
)
614
],
615
spacing="sm"
616
)
617
)
618
)
619
```
620
621
### Complex Flex Layout
622
623
```python
624
# Multi-section flex bubble with rich content
625
complex_flex = FlexMessage(
626
alt_text="Event Details",
627
contents=FlexBubble(
628
header=FlexBox(
629
layout="vertical",
630
contents=[
631
FlexText(
632
text="UPCOMING EVENT",
633
size="sm",
634
color="#FFFFFF",
635
weight="bold"
636
)
637
],
638
background=FlexBoxBackground(type="linearGradient"),
639
padding_all="lg"
640
),
641
hero=FlexImage(
642
url="https://example.com/event.jpg",
643
size="full",
644
aspect_ratio="20:13",
645
aspect_mode="cover"
646
),
647
body=FlexBox(
648
layout="vertical",
649
contents=[
650
FlexText(text="Tech Conference 2024", weight="bold", size="xl"),
651
FlexBox(
652
layout="horizontal",
653
contents=[
654
FlexBox(
655
layout="vertical",
656
contents=[
657
FlexText(text="Date", size="sm", color="#666666"),
658
FlexText(text="March 15, 2024", size="sm", weight="bold")
659
],
660
flex=1
661
),
662
FlexBox(
663
layout="vertical",
664
contents=[
665
FlexText(text="Time", size="sm", color="#666666"),
666
FlexText(text="9:00 AM", size="sm", weight="bold")
667
],
668
flex=1
669
)
670
],
671
margin="lg"
672
),
673
FlexSeparator(margin="lg"),
674
FlexText(
675
text="Join us for a day of innovation, networking, and learning about the latest in technology.",
676
wrap=True,
677
margin="lg",
678
size="sm"
679
)
680
]
681
),
682
footer=FlexBox(
683
layout="vertical",
684
contents=[
685
FlexButton(
686
action=PostbackAction(
687
label="Register Now",
688
data="event=register&id=tech2024"
689
),
690
style="primary"
691
),
692
FlexButton(
693
action=URIAction(
694
label="More Info",
695
uri="https://example.com/event"
696
),
697
style="link"
698
)
699
],
700
spacing="sm"
701
)
702
)
703
)
704
```
705
706
### Quick Replies
707
708
```python
709
from linebot.v3.messaging.models import QuickReply, QuickReplyItem
710
711
# Text message with quick reply options
712
text_with_quick_reply = TextMessage(
713
text="How can I help you today?",
714
quick_reply=QuickReply(
715
items=[
716
QuickReplyItem(
717
action=MessageAction(label="π Menu", text="Show menu")
718
),
719
QuickReplyItem(
720
action=PostbackAction(label="π Search", data="action=search")
721
),
722
QuickReplyItem(
723
action=LocationAction(label="π Location")
724
),
725
QuickReplyItem(
726
action=CameraAction(label="π· Camera")
727
)
728
]
729
)
730
)
731
```
732
733
### Image Map
734
735
```python
736
from linebot.v3.messaging.models import (
737
ImagemapMessage, ImagemapBaseSize, ImagemapArea,
738
URIImagemapAction, MessageImagemapAction
739
)
740
741
imagemap = ImagemapMessage(
742
base_url="https://example.com/imagemap",
743
alt_text="Interactive Map",
744
base_size=ImagemapBaseSize(width=1040, height=585),
745
actions=[
746
URIImagemapAction(
747
uri="https://example.com/section1",
748
area=ImagemapArea(x=0, y=0, width=520, height=292)
749
),
750
MessageImagemapAction(
751
text="Section 2 selected",
752
area=ImagemapArea(x=520, y=0, width=520, height=292)
753
),
754
URIImagemapAction(
755
uri="https://example.com/section3",
756
area=ImagemapArea(x=0, y=292, width=1040, height=293)
757
)
758
]
759
)
760
```