Dialogflow LINE Bot 串接教學：打造 AI 客服機器人

LINE 是台灣人最常用的通訊軟體，月活躍用戶超過 2,100 萬。如果你的客戶在 LINE 上，那麼把 AI 客服放進 LINE 是最直接的做法。

這篇文章手把手教你把 Dialogflow 串接到 LINE，打造 24 小時自動回覆的 AI 客服機器人。不需要複雜的程式能力，跟著步驟做，30 分鐘就能完成基本串接。

如果你還不熟悉 Dialogflow，建議先閱讀 Dialogflow 完整指南。

---

前置準備

在開始串接之前，需要準備以下帳號和環境。

LINE Developers 帳號申請

1. 前往 LINE Developers
2. 使用你的 LINE 帳號登入
3. 同意開發者條款
4. 建立一個 Provider（可以用公司名稱或專案名稱）

Dialogflow Agent 建立

確保你已經有一個 Dialogflow Agent：

1. 前往 Dialogflow Console
2. 建立新的 Agent 或使用現有 Agent
3. 確認語言設定包含「zh-TW」（繁體中文）

Google Cloud 專案設定

Dialogflow Agent 會自動關聯一個 Google Cloud 專案。確認以下設定：

1. 前往 Google Cloud Console
2. 選擇 Dialogflow Agent 對應的專案
3. 確認已啟用 Dialogflow API

需要的權限：

• Dialogflow API Admin
• Service Account User（如果要用服務帳戶）

插圖：前置準備清單示意圖

場景描述： 一張清單式的示意圖，左側顯示三個準備項目：LINE Developers 帳號（LINE 圖示）、Dialogflow Agent（Dialogflow 圖示）、Google Cloud 專案（GCP 圖示）。每個項目旁邊有勾選框，表示準備完成的狀態。

視覺重點：

• 主要內容清晰呈現

必須出現的元素：

• 依據描述中的關鍵元素

需要顯示的中文字： 無

顏色調性： 專業、清晰

避免元素： 抽象圖形、齒輪、發光特效

Slug: dialogflow-line-prerequisites-checklist

---

步驟一：建立 LINE Channel

LINE Bot 需要一個「Messaging API Channel」來收發訊息。

建立 Messaging API Channel

1. 登入 LINE Developers Console
2. 選擇你的 Provider
3. 點擊「Create a new channel」
4. 選擇「Messaging API」

填寫 Channel 資訊：

欄位	說明	範例
Channel name	Bot 顯示名稱	「XX 公司客服」
Channel description	Bot 描述	「24 小時智能客服」
Category	業務類別	選擇最接近的類別
Subcategory	子類別	選擇最接近的類別
Email	聯絡信箱	你的 Email

5. 同意 LINE 服務條款
6. 點擊「Create」

取得 Channel Access Token

Channel Access Token 是讓外部程式操作 LINE Bot 的金鑰。

1. 進入剛建立的 Channel
2. 切換到「Messaging API」分頁
3. 滾動到「Channel access token」區塊
4. 點擊「Issue」產生 Token
5. 複製並安全保存這個 Token

設定 Webhook URL

Webhook URL 告訴 LINE 要把訊息轉發到哪裡。

如果使用 Dialogflow ES：

1. 回到 Dialogflow Console
2. 點擊左側選單的齒輪圖示（Settings）
3. 切換到「Integrations」分頁
4. 找到「LINE」並點擊
5. 輸入剛才取得的 Channel Access Token
6. 複製 Dialogflow 提供的 Webhook URL

回到 LINE Developers Console：

1. 在「Messaging API」分頁
2. 找到「Webhook settings」區塊
3. 貼上 Webhook URL
4. 開啟「Use webhook」開關

插圖：LINE Channel 設定截圖

場景描述： 一張 LINE Developers Console 的截圖，顯示 Messaging API 設定頁面。畫面中標示了 Channel Access Token 和 Webhook URL 的位置，用紅色框框標註重點設定項目。

視覺重點：

• 主要內容清晰呈現

必須出現的元素：

• 依據描述中的關鍵元素

需要顯示的中文字： 無

顏色調性： 專業、清晰

避免元素： 抽象圖形、齒輪、發光特效

Slug: line-developers-channel-settings

---

步驟二：設定 Dialogflow 整合

ES 和 CX 的 LINE 整合方式不同。

啟用 LINE 整合（ES 版本）

Dialogflow ES 內建 LINE 整合，設定很簡單：

1. 在 Dialogflow Console 進入你的 Agent
2. 點擊左側「Integrations」
3. 找到 LINE 並點擊
4. 輸入以下資訊：

欄位	來源
Channel ID	LINE Developers > Basic settings
Channel Secret	LINE Developers > Basic settings
Channel Access Token	剛才產生的 Token

5. 點擊「Start」啟用整合
6. 複製顯示的 Webhook URL
7. 回到 LINE Developers 貼上 Webhook URL

使用 Cloud Functions 中介（CX 版本）

Dialogflow CX 沒有內建 LINE 整合，需要自己建立中介服務。

架構說明：

LINE → Cloud Functions → Dialogflow CX → Cloud Functions → LINE

建立 Cloud Function：

1. 前往 Google Cloud Console
2. 選擇 Cloud Functions
3. 點擊「Create Function」

基本設定：

• Function name：dialogflow-line-webhook
• Region：asia-east1（台灣）
• Trigger type：HTTP
• Authentication：Allow unauthenticated invocations

程式碼（Node.js）：

const line = require('@line/bot-sdk');
const {SessionsClient} = require('@google-cloud/dialogflow-cx');

const lineConfig = {
  channelAccessToken: process.env.LINE_CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.LINE_CHANNEL_SECRET,
};

const lineClient = new line.Client(lineConfig);

const projectId = process.env.GCP_PROJECT_ID;
const location = 'asia-northeast1';
const agentId = process.env.DIALOGFLOW_AGENT_ID;

exports.webhook = async (req, res) => {
  const events = req.body.events;

  for (const event of events) {
    if (event.type === 'message' && event.message.type === 'text') {
      const userId = event.source.userId;
      const userMessage = event.message.text;

      // 呼叫 Dialogflow CX
      const response = await detectIntent(userId, userMessage);

      // 回覆 LINE
      await lineClient.replyMessage(event.replyToken, {
        type: 'text',
        text: response,
      });
    }
  }

  res.status(200).send('OK');
};

async function detectIntent(sessionId, text) {
  const client = new SessionsClient();

  const sessionPath = client.projectLocationAgentSessionPath(
    projectId,
    location,
    agentId,
    sessionId
  );

  const request = {
    session: sessionPath,
    queryInput: {
      text: {
        text: text,
      },
      languageCode: 'zh-TW',
    },
  };

  const [response] = await client.detectIntent(request);

  // 取得回覆文字
  const messages = response.queryResult.responseMessages;
  let replyText = '';

  for (const message of messages) {
    if (message.text) {
      replyText += message.text.text.join('\n');
    }
  }

  return replyText || '抱歉，我不太理解您的意思。';
}

環境變數設定：

• LINE_CHANNEL_ACCESS_TOKEN：LINE Channel Token
• LINE_CHANNEL_SECRET：LINE Channel Secret
• GCP_PROJECT_ID：Google Cloud 專案 ID
• DIALOGFLOW_AGENT_ID：Dialogflow CX Agent ID

部署：

1. 部署 Cloud Function
2. 複製觸發 URL
3. 回到 LINE Developers 設定 Webhook URL

更多 Webhook 開發細節，請參考 Dialogflow Fulfillment 與 API 整合教學。

---

串接遇到問題？LINE 和 Dialogflow 的整合有很多細節，自己摸索可能卡很久。預約技術諮詢，讓有經驗的人幫你快速解決。

---

步驟三：串接測試

設定完成後，來測試串接是否成功。

基本測試

1. 用手機打開 LINE
2. 加入剛建立的 LINE Bot 好友（在 LINE Developers > Messaging API 可以找到 QR Code）
3. 發送訊息「你好」
4. 確認 Bot 有回覆

預期結果：Bot 應該回覆 Default Welcome Intent 的內容。

除錯方式

如果 Bot 沒有回覆：

1. 檢查 Webhook 設定

   • LINE Developers > Webhook URL 是否正確
   • 「Use webhook」是否開啟

2. 檢查 Dialogflow 整合狀態

   • Dialogflow > Integrations > LINE 是否顯示「Running」

3. 查看 LINE 錯誤訊息

   • LINE Developers > Messaging API > 「Verify」按鈕
   • 點擊可以測試 Webhook 連線

4. 查看 Cloud Functions 日誌（CX 版本）

   • Google Cloud Console > Cloud Functions > 選擇 Function > Logs

常見錯誤：

錯誤	原因	解法
400 Bad Request	Webhook URL 格式錯誤	確認 URL 是 HTTPS
401 Unauthorized	Channel Token 錯誤	重新產生 Token
500 Internal Error	Dialogflow 設定問題	檢查 Agent 語言設定
Timeout	Webhook 回應太慢	優化 Fulfillment 或增加 Timeout

插圖：LINE Bot 測試對話截圖

場景描述： 一張手機螢幕截圖，顯示 LINE 對話介面。使用者發送「你好」，Bot 回覆歡迎訊息。接著使用者問「營業時間」，Bot 回覆營業時間資訊。對話氣泡清楚顯示來回互動。

視覺重點：

• 主要內容清晰呈現

必須出現的元素：

• 依據描述中的關鍵元素

需要顯示的中文字： 無

顏色調性： 專業、清晰

避免元素： 抽象圖形、齒輪、發光特效

Slug: line-bot-dialogflow-test-conversation

---

進階功能

基本串接完成後，可以加入更豐富的互動功能。

快速回覆按鈕 (Quick Reply)

Quick Reply 讓使用者點擊按鈕回覆，不用打字。

ES 版本設定：

在 Intent 的 Response 中使用 LINE 專屬格式：

{
  "line": {
    "type": "text",
    "text": "請選擇服務類型：",
    "quickReply": {
      "items": [
        {
          "type": "action",
          "action": {
            "type": "message",
            "label": "訂位",
            "text": "我要訂位"
          }
        },
        {
          "type": "action",
          "action": {
            "type": "message",
            "label": "查詢訂單",
            "text": "查詢訂單"
          }
        }
      ]
    }
  }
}

CX 版本：在 Fulfillment 中組合 LINE 格式回傳。

Flex Message 整合

Flex Message 可以製作卡片式的豐富內容，適合展示商品、訂單資訊等。

範例：商品卡片

{
  "type": "flex",
  "altText": "商品資訊",
  "contents": {
    "type": "bubble",
    "hero": {
      "type": "image",
      "url": "https://example.com/product.jpg",
      "size": "full",
      "aspectRatio": "20:13"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "text",
          "text": "商品名稱",
          "weight": "bold",
          "size": "xl"
        },
        {
          "type": "text",
          "text": "NT$ 1,200",
          "size": "lg",
          "color": "#ff0000"
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "button",
          "action": {
            "type": "message",
            "label": "加入購物車",
            "text": "購買商品A"
          }
        }
      ]
    }
  }
}

Rich Menu 設定

Rich Menu 是 LINE 聊天室下方的固定選單，提供常用功能入口。

設定方式：

1. 前往 LINE Official Account Manager
2. 選擇你的 Official Account
3. 點擊「Rich Menu」
4. 設計選單圖片和按鈕區域
5. 設定每個區域點擊後發送的文字

設計建議：

• 放 3-6 個常用功能
• 按鈕文字要簡潔
• 圖示要清楚易懂

插圖：LINE Rich Menu 設計範例

場景描述： 一張 LINE 聊天介面截圖，下方顯示 Rich Menu。選單有 6 個按鈕：「訂位」、「菜單」、「營業時間」、「位置」、「聯絡我們」、「優惠活動」，每個按鈕都有對應的圖示。整體設計簡潔專業。

視覺重點：

• 主要內容清晰呈現

必須出現的元素：

• 依據描述中的關鍵元素

需要顯示的中文字： 無

顏色調性： 專業、清晰

避免元素： 抽象圖形、齒輪、發光特效

Slug: line-rich-menu-design-example

---

實戰範例：餐廳訂位機器人

來看一個完整的實戰範例：餐廳訂位機器人。

對話流程設計

使用者：我要訂位
Bot：好的，請問用餐日期？
使用者：明天
Bot：請問用餐時間？
使用者：晚上 7 點
Bot：請問幾位用餐？
使用者：4 位
Bot：請問訂位大名？
使用者：王小明
Bot：確認訂位：
    日期：明天
    時間：19:00
    人數：4 位
    姓名：王小明
    請問正確嗎？
使用者：對
Bot：訂位完成！我們會發送確認簡訊到您的手機。

Intent 設計

Intent	Training Phrases	Parameters
訂位開始	我要訂位、想訂位	-
提供日期	明天、12/25、下週六	@sys.date
提供時間	晚上 7 點、19:00	@sys.time
提供人數	4 位、四個人	@sys.number
提供姓名	我姓王、王小明	@sys.person
確認訂位	對、沒錯、確認	-
取消訂位	不對、重來	-

Context 串接

使用 Context 記住對話狀態：

1. 「訂位開始」設定 Output Context：booking
2. 「提供日期」需要 Input Context：booking，設定 Output Context：booking-date
3. 依此類推，每個步驟都確保 Context 正確傳遞

詳細的 Intent 和 Context 設計，請參考 Dialogflow Intent 與 Context 完整教學。

---

常見問題與除錯

Bot 回覆很慢怎麼辦？

可能原因：

1. Fulfillment 呼叫外部 API 太慢
2. Cold Start（Cloud Functions 冷啟動）
3. 網路延遲

解法：

• 優化 API 呼叫，加入快取
• 使用 Cloud Functions 的 minimum instances 設定
• 選擇靠近使用者的 Region

中文理解不準確怎麼辦？

解法：

1. 增加 Training Phrases，涵蓋不同說法
2. 使用台灣用語（「訂位」而非「預約」）
3. 善用 Entity 擷取關鍵資訊
4. 定期檢視對話記錄，找出辨識失敗的案例

LINE 有訊息數量限制嗎？

免費方案限制：

• 每月 500 則免費推播訊息
• 回覆訊息不限數量

注意：Dialogflow 的回覆屬於「回覆訊息」，不佔推播額度。但主動通知（如訂單更新）會計入推播額度。

如何處理圖片和檔案訊息？

預設的 Dialogflow 整合只處理文字訊息。如果需要處理圖片：

1. 使用 CX + Cloud Functions 自建整合
2. 在 Cloud Functions 中判斷訊息類型
3. 圖片可以用 Vision API 分析後再送給 Dialogflow

想了解其他平台的整合，請參考 Dialogflow Messenger 與 WhatsApp 整合指南。

---

下一步

LINE Bot 串接完成後，你可以：

1. 優化對話設計：Dialogflow Intent 與 Context 完整教學
2. 加入後端邏輯：Dialogflow Fulfillment 與 API 整合教學
3. 整合更多平台：Dialogflow Messenger 與 WhatsApp 整合指南
4. 控制成本：Dialogflow 費用完整解析

插圖：LINE Bot 功能擴展路線圖

場景描述： 一張路線圖，從「基本串接」開始，分支出四個方向：「對話設計優化」、「後端系統整合」、「多平台擴展」、「數據分析」。每個方向下方列出具體功能項目。

視覺重點：

• 主要內容清晰呈現

必須出現的元素：

• 依據描述中的關鍵元素

需要顯示的中文字： 無

顏色調性： 專業、清晰

避免元素： 抽象圖形、齒輪、發光特效

Slug: line-bot-feature-expansion-roadmap

---

想打造企業級 LINE AI 客服？

如果你想要：

• 7x24 自動回覆客戶問題
• 整合訂單系統、會員系統
• 支援複雜的多輪對話
• 有專人協助開發和維護

預約 AI 導入諮詢，讓有經驗的人幫你規劃完整方案。

我們已協助多家企業建立 LINE AI 客服，諮詢完全免費。

---