進階 LINE 智能客服(5)：使用 Flex Message 打造精美的互動式選單

在前面的教學中，我們的 LINE 機器人已經學會了根據使用者的關鍵字，從 Google 試算表中動態找出對應的「純文字」回覆。然而，純文字有時候略顯單調。如果你想傳送圖文並茂的商品資訊、附帶按鈕的導覽選單，甚至是輪播卡片，那就必須學會 LINE Messaging API 中最強大的功能——Flex Message。

1. 什麼是 Flex Message？

Flex Message 是一種可以高度客製化的訊息排版格式。開發者可以透過組合類似 HTML DOM 結構的 JSON 陣列，自由決定圖片、文字、按鈕的擺放位置與樣式。為了讓大家更容易理解，下方為 Flex Message 的基本結構拆解圖：

▲ Flex Message 氣泡結構解析 (Bubble Container)

2. 運用 JSON 產生卡片選單

在 Google Apps Script (GAS) 中，我們只需要將回覆的 messages 陣列，從原本的 "type": "text" 改為 "type": "flex"，並將設計好的 JSON 結構塞入 contents 屬性中即可。

💡 小技巧：你不必從頭手寫 JSON！LINE 官方提供了非常方便的 Flex Message Simulator，你可以在網頁上拖拉設計介面，滿意後再將右上角的 JSON 原始碼複製到你的 GAS 程式中。

✏️ Flex Message 實作範例程式碼

以下是一個帶有按鈕的簡單 Flex Message 範例，我們模擬當使用者輸入「聯絡我們」時，送出一張帶有打電話與開啟地圖按鈕的客服卡片：

function doPost(e) {
  var channelToken = "你的_LINE_CHANNEL_ACCESS_TOKEN";
  var msg = JSON.parse(e.postData.contents);
  var replyToken = msg.events[0].replyToken;
  var userMessage = msg.events[0].message.text;
  
  // 建立回覆訊息的陣列
  var replyMessages = [];
  
  if (userMessage.includes("聯絡我們")) {
    // 建立 Flex Message JSON 結構
    var flexMsg = {
      "type": "flex",
      "altText": "這是一則聯絡資訊選單", // 顯示在聊天列表的替代文字
      "contents": {
        "type": "bubble",
        "body": {
          "type": "box",
          "layout": "vertical",
          "contents": [
            { "type": "text", "text": "客服中心", "weight": "bold", "size": "xl", "color": "#06C755" },
            { "type": "text", "text": "服務時間：平日 09:00 - 18:00", "size": "sm", "color": "#666666", "margin": "md" }
          ]
        },
        "footer": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "contents": [
            {
              "type": "button",
              "style": "primary",
              "color": "#06C755",
              "action": { "type": "uri", "label": "撥打客服專線", "uri": "tel:0289927153" }
            },
            {
              "type": "button",
              "style": "secondary",
              "action": { "type": "uri", "label": "查看辦公室位置", "uri": "https://maps.google.com" }
            }
          ]
        }
      }
    };
    replyMessages.push(flexMsg);
  } else {
    // 預設純文字回覆
    replyMessages.push({ "type": "text", "text": "請輸入「聯絡我們」來查看互動選單。" });
  }
  
  // 傳送回 LINE 伺服器
  var url = "https://api.line.me/v2/bot/message/reply";
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + channelToken
    },
    "payload": JSON.stringify({
      "replyToken": replyToken,
      "messages": replyMessages
    })
  };
  UrlFetchApp.fetch(url, options);
}

3. 系統測試與下一步

將這段程式碼部署後，對著你的機器人輸入「聯絡我們」，你就會收到一張極具質感的互動卡片。使用者可以直接點擊按鈕撥打電話，大幅縮短了操作的路徑。至此，你已經掌握了 LINE Bot 從後端邏輯判斷、資料庫存取，到前端精美渲染的完整技能鏈！