REFERENCE
開發者參考
認證、API、SDK、Flow Agent 處理節點與參數取值的完整參考。
Carousel
Carousel 用於發送橫向滾動卡片列表的 message template。
基本用法
Carousel 在聊天介面中以橫向滾動的卡片容器形式顯示，每個卡片都包含圖片、標題、描述文字和操作按鈕。使用者可以左右滑動來瀏覽不同的選項。
Template 結構
JSON 格式
{
"type": "CAROUSEL",
"columns": [
{
"title": "產品 A",
"text": "高品質產品，值得信賴。",
"buttons": [
{
"label": "查看詳情",
"action": {
"type": "uri",
"uri": "https://example.com/product-a"
}
}
]
},
{
"title": "產品 B",
"text": "創新設計，優質體驗。",
"buttons": [
{
"label": "立即購買",
"action": {
"type": "uri",
"uri": "https://example.com/product-b"
}
}
]
}
]
}屬性說明
type（必填）
message template 類型，固定為
"CAROUSEL"。columns（必填）
卡片陣列，每個元素代表一個卡片。
屬性 類型 必填 說明 thumbnailImageUrl String 否 卡片圖片的 URL 位址 imageAspectRatio String 否 圖片長寬比例
•"rectangle"：長方形（1.51:1）
•"square"：正方形（1:1）imageSize String 否 圖片縮放方式
•"cover"：覆蓋整個區域，可能會裁切
•"contain"：完整顯示圖片，可能會有空白邊imageBackgroundColor String 否 圖片背景顏色，使用十六進位色碼格式（如 "#FFFFFF"） title String 是 卡片標題文字 text String 是 卡片描述文字 buttons Array 否 操作按鈕陣列，每個按鈕包含 label 和 action defaultAction Object 否 點擊卡片主體時的預設動作 quickReplies（選填）
快速回覆按鈕陣列，顯示在整個 Carousel 下方。詳細設定請參考 Quick Replies 文件。
使用範例
要在 Push Message 中發送橫向滾動卡片，請按照以下步驟操作：
- 在 Template 欄位的下拉選單中選擇
Expression。 - 在 Editor 編輯器中輸入以下 JavaScript 程式碼。
商品推薦
(() => {
return {
type: 'CAROUSEL',
columns: [
{
title: '高效能筆電',
text: 'Intel i7 處理器，16GB 記憶體',
buttons: [
{
label: '查看詳情',
action: {
type: 'uri',
uri: 'https://shop.example.com/laptop',
},
},
],
},
{
title: '智慧手機',
text: '6.1 吋螢幕，128GB 容量',
buttons: [
{
label: '查看詳情',
action: {
type: 'uri',
uri: 'https://shop.example.com/phone',
},
},
],
},
],
};
})()服務方案比較
(() => {
return {
type: 'CAROUSEL',
columns: [
{
title: '基礎方案',
text: '適合個人使用\n基本功能\n5GB 儲存空間',
buttons: [
{
label: 'NT$ 99/月',
action: {
type: 'MESSAGE',
text: '選擇基礎方案',
},
},
],
},
{
title: '專業方案',
text: '適合小團隊\n進階功能\n50GB 儲存空間',
buttons: [
{
label: 'NT$ 299/月',
action: {
type: 'MESSAGE',
text: '選擇專業方案',
},
},
],
},
],
};
})()- 在 Template 欄位的下拉選單中選擇