跳至主要内容

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（必填）​

卡片陣列，每個元素代表一個卡片。

屬性類型必填說明
thumbnailImageUrlString否卡片圖片的 URL 位址
imageAspectRatioString否圖片長寬比例
• "rectangle"：長方形（1.51:1）
• "square"：正方形（1:1）
imageSizeString否圖片縮放方式
• "cover"：覆蓋整個區域，可能會裁切
• "contain"：完整顯示圖片，可能會有空白邊
imageBackgroundColorString否圖片背景顏色，使用十六進位色碼格式（如 "#FFFFFF"）
titleString是卡片標題文字
textString是卡片描述文字
buttonsArray否操作按鈕陣列，每個按鈕包含 label 和 action
defaultActionObject否點擊卡片主體時的預設動作

quickReplies（選填）​

快速回覆按鈕陣列，顯示在整個 Carousel 下方。詳細設定請參考 Quick Replies 文件。

使用範例​

要在 Push Message 中發送橫向滾動卡片，請按照以下步驟操作：

  1. 在 Template 欄位的下拉選單中選擇 Expression。
  2. 在 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: '選擇專業方案',
            },
          },
        ],
      },
    ],
  };
})();