N8N Chat UI：把 n8n 聊天機器人串接到網站

N8N Chat UI 是替 n8n 聊天機器人設計網站介面的視覺化工具。你可以調整聊天視窗外觀、接上既有工作流程，再嵌入網站；適合已在使用 n8n 的開發者、接案團隊與網站經營者。

白話說明：這個網站可以幫你做什麼？

把 n8n 想成後台辦事的工作人員，N8N Chat UI 就是訪客看得到的服務櫃檯。使用者在網站輸入問題，視窗把訊息送到你的 Webhook，工作流程處理完畢後再把結果傳回顯示。

客服、預約、名單蒐集或知識查詢能做到什麼，取決於後端串接的資料與服務。這是與 n8n 官方無隸屬關係的獨立產品，主要幫你處理介面與接入，不會只靠改版型就自動完成整套業務流程。

把工作流程串接到網站聊天視窗

先準備可運作的 Chat Trigger 或 Webhook 工作流程，以及能加入嵌入碼的網站。

1. 在編輯器設定聊天視窗，選擇頁面內嵌或浮動氣泡，再檢查預覽。
2. 串接工作流程的 Webhook，將查詢、模型及實際操作留在 n8n 裡設定。
3. 一般非串流回覆須回傳成功狀態與有效 JSON，並以 output 欄位提供文字。回覆含引號時，應正確處理 JSON 跳脫字元。
4. 放入產生的嵌入碼，送出測試問題，同時核對 n8n 執行紀錄與網站上的回覆。

後端串接文件也說明了自訂 POST API 的格式。WordPress 使用者可安裝並啟用 ChatUI Widget for n8n，在 Settings → N8N Chat UI 填入 Widget ID 或獨立版 Webhook，儲存後檢查顯示結果；也能排除指定頁面。

品牌客製化與適合的使用情境

透過即時預覽調整配色、字型、頭像、歡迎語與開啟按鈕，讓聊天入口符合品牌風格。頁面內嵌適合獨立問答區，浮動氣泡則方便瀏覽途中提問；支援行動裝置與 RTL 排版。

後端可透過 followUpPrompts 提供可點選的後續問題。若不同頁面共用同一流程，應規劃 session key 來分開對話情境，這項設定不等於使用者身分驗證。客服或預約的資料來源與權限仍需在流程中建立。

檔案、語音與串流回覆的後端準備

檔案上傳可限制格式、大小與單次數量，檔案會以二進位資料傳給 n8n。文件解析、儲存及內容問答都需要後端節點，不能把上傳按鈕視為內建完整知識庫。

語音輸入會送出錄音，官方示範先使用語音轉文字服務，再把文字交給 Agent。檔案與音訊的 metadata 會改以 JSON 字串傳送，作為物件使用前要先解析。

串流回覆需要在 Chat Trigger／Webhook 輸入端與 AI Agent 輸出端同時啟用 streaming，視窗才會逐步顯示內容。只調整前端樣式不會開啟串流。

免費試用與兩種付費模式

截至 2026 年 10 月 28 日，新帳號可取得 100 個 Managed 試用點數，有效期 30 天。托管模式後續採預付點數，代理處理一則訊息扣一點；餘額耗盡後停止處理新訊息。現行條款說明，2026 年 10 月 5 日起購買的付費點數不會到期，先前購買者維持原條件。

Standalone 採一次性授權，不消耗 Managed 訊息點數。新購授權的永久核心功能與可選的支援、更新期間應分開理解。實際方案、優惠、付款幣別及稅費以官方價格與結帳頁為準；n8n 主機、模型 API 與語音轉寫須另行估算。

部署前要釐清的資料處理

獨立模式由瀏覽器直接連至 Webhook，網址會出現在用戶端程式碼中，需要自行保護端點。托管模式經過供應商代理，可隱藏上游網址，並提供網域限制、地區限制、流量限制、使用分析及集中設定。

隱私政策表示供應商不儲存、快取或記錄聊天內容；代理仍會即時處理訊息，並保留設定與必要技術指標。這項承諾不涵蓋你的 n8n 執行紀錄、資料庫或模型供應商。涉及個資或文件時，應依實際串接路徑確認保存規則。

常見問題

可以嵌入已經上線的網站嗎？

可以，使用嵌入碼或官方 WordPress 外掛即可接入，前提是有網站管理權限與已設定的後端。

它會自動建立 n8n 工作流程嗎？

不會自動建立完整流程。模型、資料來源及業務操作仍要在 n8n 或相容後端中配置。

免費點數可以無限使用嗎？

不能。新帳號的 100 點試用額度有效 30 天；之後需要購買托管點數或獨立版授權，並負擔後端服務費用。

官方文件與接入資源

• 官方文件：查閱功能設定與會話管理。
• WordPress 外掛說明：設定 Widget ID、Webhook 與頁面排除。
• MCP 串接指南：使用 OAuth 或 API key 列出、建立及調整視窗主題；主題修改不會變更 Webhook。
• 官方業務支援：詢問帳號與接入問題。