Button

基本用法​

Button 在聊天介面中以卡片形式顯示，包含標題、描述文字和操作按鈕。使用者可以點擊按鈕來觸發不同的動作。

Template 結構​

JSON 格式​

{
  "type": "BUTTON",
  "thumbnailImageUrl": "https://example.com/bot/images/image.jpg",
  "imageAspectRatio": "rectangle",
  "imageSize": "cover",
  "imageBackgroundColor": "#FFFFFF",
  "title": "產品介紹",
  "text": "這是一個優質的產品，具有多種功能。",
  "buttons": [
    {
      "label": "立即購買",
      "action": {
        "type": "uri",
        "uri": "https://shop.example.com/buy"
      }
    }
  ],
  "defaultAction": {
    "type": "uri",
    "uri": "https://shop.example.com/product"
  }
}

屬性說明​

type（必填）​

message template 類型，固定為 "BUTTON"。

thumbnailImageUrl（選填）​

卡片頂部顯示的縮圖圖片 URL。

imageAspectRatio（選填）​

圖片長寬比例，支援以下選項：

• "rectangle"：長方形（1.51:1）
• "square"：正方形（1:1）

imageSize（選填）​

圖片縮放方式，支援以下選項：

• "cover"：覆蓋整個區域，可能會裁切
• "contain"：完整顯示圖片，可能會有空白邊

imageBackgroundColor（選填）​

圖片背景顏色，使用十六進位色碼格式（如 "#FFFFFF"）。

title（必填）​

卡片的主標題文字。

text（必填）​

卡片的描述文字內容。

buttons（必填）​

操作按鈕陣列，每個按鈕包含標籤文字和對應的動作。

defaultAction（選填）​

點擊卡片主體（標題、文字或圖片區域）時的預設動作。詳細設定請參考 Action Object 文件。

quickReplies（選填）​

快速回覆按鈕陣列。詳細設定請參考 Quick Replies 文件。

使用範例​

要在 Push Message 中發送按鈕，請按照以下步驟操作：

1. 在 Template 欄位的下拉選單中選擇 Expression。
2. 在 Editor 編輯器中輸入以下 JavaScript 程式碼。

基本按鈕訊息​

(() => {
  return {
    type: 'BUTTON',
    title: '客服服務選單',
    text: '請選擇您需要的服務項目：',
    buttons: [
      {
        label: '訂單查詢',
        action: {
          type: 'MESSAGE',
          text: '我要查詢訂單',
        },
      },
      {
        label: '技術支援',
        action: {
          type: 'MESSAGE',
          text: '我需要技術支援',
        },
      },
    ],
  };
})()