n8n 網站 AI Agent｜3 個案例打造智能客服助手

📥 工作流 JSON 下載：GitHub 範例庫 ｜ 💬 社群討論：Skool 雲端方程式 Cloud F1

專業導讀

來了，我們要馬上來 Demo 三種可以在網頁使用 n8n 的方式。第一種是用最簡單的 HTML，輸入 666 就回你 666。第二種我們會在一個自己 Host 的網站上做互動，問它「我是誰」就告訴你 Alex 相談室的相關資訊。第三種最厲害 —— 我直接到一個輕鬆預約的羽球場地網站，登錄我的帳號以後，用對話機器人去問「我的預約場地有哪些」，它就會真的去問網頁的 API 然後回答你。

整個網站的整合其實沒有想像中這麼難。聽起來好像很厲害、高大上，其實你就真的只要把它連接起來，基本上就 OK。

你將學到

• 三種在網站使用 n8n AI Agent 的完整實作方式
• HTML 靜態網站嵌入 n8n Chat Widget 的最簡方案
• React Vite 網站整合 n8n Chat 的進階做法
• 如何用 Metadata 夾帶用戶資訊讓 AI Agent 做個人化回覆
• 實際預約系統整合：AI Agent 查詢後端 API 回答客戶問題

---

什麼是 n8n 網站 AI Agent？

n8n 網站 AI Agent 是透過 n8n 的 Chat Trigger 節點搭配 n8n Chat Widget Script，在你的網站上嵌入一個 AI 驅動的聊天介面，讓訪客可以即時與 AI 對話、查詢資訊、甚至查詢預約紀錄，背後由 n8n Workflow 串接 AI 模型和各種工具來處理請求。

它最重要的是最下面有一個 n8n Chat Widget 的 Script，這個 Script 會先去讀一個 CDN 的 JS 檔案，然後產生一個對話視窗，裡面有一個 Webhook URL，你可以替換成實際上你自己的 n8n Agent 的 Webhook。

實際上它是一連串的 JS File，會去跟你的 n8n 做互動。所以實際上是要有網路的，如果你沒有連網路，這個是會壞掉的、是會沒有反應的。因為你的 n8n 可能在雲端，所以如果你在本地的話，你就要看一下你這個 Webhook 要打到哪裡。

---

Alex 的實戰觀察

我自己把這三種方式都實際做過 Demo，從最簡單的 HTML 到完整的預約系統整合。說說我的真心觀察。

這其實是一個超簡單的 AI Agent

整個架構拆解開來就三件事：第一，有一個網站。第二，有一個 n8n 連到 AI Agent 的部分。第三，利用你後端的 API 回訊息給你，告訴你有哪些預約的內容，你再做整理輸出回來。

聽起來好像很厲害，高大上也沒有，其實你就真的只要把它連接起來，基本上就 OK。

Metadata 是關鍵中的關鍵

我在 Demo 的時候特別強調了 Metadata 的重要性。你要怎麼夾帶用戶的資訊給 n8n？你裡面要有這個 Metadata。比如說你的名稱、你的姓名跟你的電子郵件。

這時候如果你有帶資訊過去，AI Agent 就能根據不同的使用者去送對應的訊息。如果沒有帶資訊，它是沒有辦法告訴你這些的，它不是寫死的。

比如說我問「請問我的電子郵件是什麼」，因為我有夾帶 Metadata 過去，它就能正確回答。甚至說「請寄 Email 給我」，它就真的會送一封信到你的信箱。

Active 跟 Inactive 的雷

在測試的時候要注意一下，你必須要 Active，n8n 才能真的打得到。如果你今天是把它 Inactive 的時候，你就要打 Test 的 Webhook URL。你沒有 Active 是不會進來的。除非你按 Open Chat 的按鈕直接打。所以你可以先去測試一下確定 OK，或者用我的範本。

我的使用策略

我建議按照這個順序來學：

1. 先做最簡單的 HTML 版本（Lab1）：確認 n8n Chat Widget 能正常運作
2. 再做 React Vite 版本（Lab2）：學會怎麼夾帶 Metadata
3. 最後做實際整合案例（Lab3）：用 AI Agent 查詢後端 API

---

Step by Step 三個案例教學

好，我們直接來實作。所有的程式碼和模板都放在我的 GitHub 上，你可以直接下載來用。

案例 1：HTML 靜態網站（最簡單）

首先到我們的 GitHub 裡面，你可以下載這個 Simple Website。打開來以後你就會看到一個非常簡單的 HTML File，就是一個自動化流的平台介紹頁面，簡單的內容跟有用的連結。

HTML 的重點在哪裡？

在前面全部都是一般的 HTML 內容，它最重要最重要是最下面有一個 n8n Chat Widget 的 Script：

<script type="module">
  import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/chat.bundle.es.js'

  createChat({
    webhookUrl: '替換成你的 n8n Webhook URL',
    initialMessages: ['嗨，一起學 AI 囉！AI 相談室'],
    metadata: {
      user_name: 'Alex',
      user_email: 'alex@example.com'
    },
    i18n: {
      zh: {
        title: 'Lab1',
        subtitle: '網站小幫手',
        inputPlaceholder: '請輸入你的問題...',
      }
    }
  })
</script>

你會發現其實這樣就可以用了。那 CDN 的讀取部分，它是一連串的 JS File，會去跟你的 n8n 做互動。

n8n 工作流設定：

在 n8n 這邊，Chat Trigger 節點選擇 Embedded 模式（嵌入在網頁裡面）。AI Agent 設定非常簡單 —— 你是一個網站的小幫手，回覆一律用繁體中文。我們用 OpenAI 4.1-mini，加上 Simple Memory。

還可以放一個 Serp API 讓它去找其他網站的能力，也可以讓它送 Mail 到其他地方。我這裡全部都是用 AI 定義的，也就是說它可以根據不同的使用者去送對應的訊息。

案例 2：React Vite 網站（進階版）

第二個我們要真的執行一個 Local 本地端的網站應用。點選 GitHub 上的 n8n-chat-react-app，裡面有所有步驟的說明。基本上你就照著做就完成了。

# 下載後執行
pnpm install
pnpm run dev

這邊比較進階一點，就是你比較懂網站的才會使用。跑起來以後你會看到 localhost:5173，其實跟剛剛的 HTML 非常的像。

重點：怎麼夾帶用戶資訊給 n8n？

在 App.tsx 裡面有一個 useEffect，裡面設定你的 Webhook URL 跟 Metadata：

createChat({
  webhookUrl: '你的 n8n Webhook URL',
  metadata: {
    user_name: 'Alex',
    user_email: 'alex@example.com'
  },
  i18n: {
    zh: {
      title: 'Lab2',
    }
  }
})

Metadata 裡面必須帶有你的資訊，比如說名稱跟電子郵件。這樣 AI Agent 就能知道目前的使用者是誰，做個人化的回覆。

我們測試了問「我是誰」 —— 回答 Alex 相談室的相關社群資料。問「我的電子郵件是什麼」 —— 正確回答。請它「寄 Email 給我」 —— 它真的就送了相關訊息到信箱。你打開信箱就會看到郵件，它真的是可以送的。

案例 3：預約系統實際整合（實戰版）

在第三個 Demo 裡面，我們實際上有一個預約的網站，是一個羽球預約的網站。我會用 AI Agent 來查詢我的預約。

架構是這樣的：

1. 我們利用夾帶的客戶資訊讓 AI Agent 得到 Metadata
2. 利用用戶的需求來詢問「我的預約到底有哪些」
3. AI Agent 用 HTTP Request 去問後端 API，帶上用戶的 Token
4. 拿到的 JSON 資料太複雜了，客戶只在意想看的部分
5. AI Agent 用對話好懂的方式整理後回傳給客戶

實測結果：我問「我的預約」，它就找到了最新的預約資訊，列出三個預約。我去看實際的預約頁面，還真的三個，一模一樣。

n8n 工作流架構：

Chat Trigger → AI Agent → HTTP Request (查詢預約 API)
                  ↓              ↓
            Memory        帶 Token 查詢後端
                              ↓
                        整理 JSON 回覆客戶

最後其實就只是打一個 Request 到後端 API 拿到 User 的預約資料而已。不過你要有 Token，不然它也不會回你。

這個 AI Agent 的詳細內容我們都會提供給大家，如果有任何問題可以在 LINE 社群裡面問。

---

三大案例比較分析

面向	Lab1: HTML 靜態	Lab2: React Vite	Lab3: 預約系統整合
難度	低（貼 Script 就好）	中（需要 Node.js 環境）	高（需要後端 API）
適合對象	任何人	前端開發者	全端開發者
Metadata 傳遞	寫死在 HTML	動態傳遞	從登入狀態帶入
個人化能力	基本	中等（夾帶用戶資訊）	完整（查詢 API）
部署方式	直接開 HTML	pnpm run dev	整合到現有網站
AI Agent 功能	固定回答 + 搜尋	回答 + 寄 Email	查詢預約 + 回答
建置時間	30 分鐘	1-2 小時	3-5 小時
學習價值	了解 Chat Widget 基礎	學會 Metadata 傳遞	實際商業應用

我建議從 Lab1 開始，確認基礎 OK 了再往 Lab2、Lab3 走。如果你想了解更多 n8n AI Agent 的概念，可以看我寫的 AI Agent 完整指南。

---

重點整理

1. 三種在網站使用 n8n AI Agent 的方式：HTML 靜態嵌入、React Vite 整合、實際預約系統整合，從簡單到複雜
2. n8n Chat Widget Script 是核心，最重要的是最下面那個 Script，設定 Webhook URL 跟 Metadata 就能動了
3. Metadata 夾帶用戶資訊是關鍵，讓 AI Agent 知道使用者是誰才能做個人化回覆
4. 記得 Active 才能打得到，Inactive 的時候要用 Test 的 Webhook URL 測試
5. 實際上是要有網路的，因為 Script 要讀 CDN 跟你的 n8n 做互動，沒有連網路會壞掉
6. 整個架構其實超簡單：有網站 + n8n AI Agent + 後端 API，聽起來高大上但把它連接起來就 OK
7. 從 Lab1 開始做，確認基礎 OK 再往進階走，每個高手都是從新手開始的

---

常見問題 FAQ

完全不會寫程式也能做嗎？

可以的。Lab1 的 HTML 版本是最簡單的，你只要下載我的範本，把 Webhook URL 替換成你自己的 n8n Agent URL 就好。n8n 本身是視覺化的拖拉介面，AI Agent 的設定也非常簡單，就是定義你是一個網站的小幫手，回覆用繁體中文。所有的 Prompt 和模板我們都放在 Skool 社群裡面了，你可以直接複製貼上。

Webhook URL 要用 Active 的還是 Test 的？

在測試的時候你必須要 Active，n8n 才能真的打得到。如果你今天是把它 Inactive 的時候，你就要打 Test 的 Webhook URL。你沒有 Active 是不會進來的。我建議先用 Test 的 Webhook 測試確認沒問題，然後再 Active 讓它正式上線。或者你也可以直接用我的範本先跑起來試試看。

網站要自己有伺服器嗎？本機可以測試嗎？

本機可以測試沒問題。Lab1 直接打開 HTML 就能用，Lab2 用 pnpm run dev 跑在 localhost:5173 也行。但是實際上是要有網路的，因為 Script 要讀 CDN 的 JS 檔案，而且你的 n8n 可能在雲端。如果你在本地跑 n8n 的話，Webhook URL 就指向 localhost。如果你想了解 n8n 的部署方式，可以看我的 n8n 本地部署教學。

Metadata 可以動態帶入嗎？比如從登入狀態？

可以的，這就是 Lab2 跟 Lab3 的重點。在 React 的 App.tsx 裡面，你可以用 useEffect 動態帶入當前登入用戶的資訊。Lab3 的預約系統就是這樣做的 —— 用戶登入以後，我把他的 Token 跟個人資訊透過 Metadata 傳給 n8n，AI Agent 就能拿著這些資訊去問後端 API。一定要有會員身分，不然 AI Agent 不知道你的裡面的內容是什麼。

AI Agent 可以做什麼互動？只能回答問題嗎？

不只回答問題。我在 Demo 裡面示範了好幾種互動：回答關於網站的資訊、告訴你使用者的電子郵件、寄 Email 給用戶、查詢後端 API 的預約資料。你可以加上 Serp API 讓它搜尋網路、加上 Email 節點讓它寄信、加上 HTTP Request 讓它查任何 API。全部都是用 AI 定義的，它可以根據不同的使用者去送對應的訊息。如果你想學更多 n8n 的 HTTP 跟 Webhook 操作，可以參考我的 n8n HTTP 與 Webhook 教學指南。

---

下一步行動

🎓 想更有系統地學會這些技巧？ 到 AI 職場工作術（雲端方程式 Cloud F1 旗艦課程） 看看完整的實作路徑。

如果你覺得這個流程蠻實用的，我建議你按這個順序來：

1. 下載 Lab1 HTML 範本，替換 Webhook URL 跑起來看看
2. 在 n8n 裡面匯入我的 AI Agent 模板，設定好 Prompt 和工具
3. 確認 Lab1 OK 以後，再試 Lab2 的 React Vite 版本
4. 學會 Metadata 傳遞以後，就可以挑戰 Lab3 的實際整合
5. 有問題就到社群裡面問，我們都會回覆

所有的東西都放在 Skool 社群的 Classroom 裡面，打造 AI Agent 專區的「如何在你的網站打造 n8n 的 AI 助手」，裡面有完整的 Prompt、Workflow 模板和程式碼。

想學更多 n8n AI Agent 技巧？ 加入我們的 Skool 社群，裡面有各種影片免費資源可以供參考。LINE 群也歡迎加入，可以各種溝通跟提問。

---

相關資源

• EP37 YouTube 完整教學影片 — 看我實際 Demo 三種網站整合方式
• GitHub 範例程式碼 — Simple Website、React Vite App 下載
• AI Agent 完整指南 — 從概念到實作的完整教學
• n8n 完整教學 2026 — 從零開始學 n8n 自動化
• n8n HTTP 與 Webhook 教學指南 — 學會 Webhook 串接
• n8n 本地部署教學 — 還沒有 n8n 環境的話先看這篇
• n8n 官方 Chat Widget 文件 — 官方設定說明
• Skool 雲端方程式 Cloud F1 社群 — 和 500+ 學員一起學自動化

---

關於作者：我是 Alex，專注於 n8n 自動化和 AI 應用的技術教育者。透過 YouTube 頻道和 Skool 社群，我已經幫助超過 500 位學員掌握自動化技能。這三個案例告訴大家怎麼去整合你的 n8n 到你的網站裡面，非常簡單，大家可以試試看。