網站

您可用三種方式讓 Quickchat AI Agent 在網路上提供服務，請選擇符合預期顯示形式的方式：

• Widget：浮在網站角落的聊天泡泡，最適合一般支援。
• Embed：放在頁面指定位置的內嵌聊天視窗，最適合將 AI 嵌入特定應用程式畫面、說明中心或產品詳細頁。
• Chat Page：由 Quickchat 託管的全螢幕聊天體驗，不需安裝或程式碼。適合透過客服電子郵件、內部 Slack 或測試群組分享連結，無需變更對方瀏覽器。

從 Channels → Your Website → Install 安裝選定形式。此頁有三個子分頁：Install 選擇新增 AI Agent 的方式，Appearance 調整視覺風格，Text Content 設定訪客看見的提示與標籤。Install 分頁以安裝方式選擇器開頭，將可用性與存取控制放在獨立區塊，並顯示可複製的 Scenario ID，供外掛與 API 使用。

選用設定工具

• 比較部署方式。將您提供的通路、網站存取權限與必要功能，和 Quickchat AI 的設定選項進行比對。此工具不會檢查您的網站或帳戶。

• 比較範例網頁的 HTML 與 Markdown。從固定的 Quickchat AI 範例擷取初始 HTML、Markdown 內容及工具連結。此工具不會執行 JavaScript 或檢查任意網站。

Widget

Widget 可將 Quickchat AI Agent 直接嵌入網站，讓使用者順暢地與 AI 互動。Widget 通常以聊天泡泡顯示在網頁右下角；按一下便展開成聊天視窗，讓使用者提問、取得協助或查詢資訊。

如何將 Widget 加入網站

開啟 Channels → Your Website → Install。分頁以 “How do you want to add your AI Agent?” 開頭，依簡易程度排列安裝方式。請選擇符合網站的方式：

• WordPress：安裝免費的 Quickchat AI Agent 外掛，貼上 Scenario ID，Widget 就會自動出現，不必編輯佈景主題程式碼。
• Shopify：透過商店 Theme Editor 新增 Widget。請參閱 Shopify 指南。
• Webflow, Wix & others：複製一段程式碼，貼到網站建置工具的全站自訂程式碼設定，套用至所有頁面。不要使用單一頁面上的 Embed 或 HTML 元素。請參閱 網站建置工具。
• Share a link instead：不需安裝，直接分享託管 Chat Page 連結。
• Install manually with code：複製原始 Widget 或 Embed 程式碼片段，自行貼入 HTML。

每種方式都會開啟專用的逐步說明面板，只顯示所需程式碼或 ID。

Scenario ID 位於 Install 分頁頂端，可直接複製。這是外掛與 API 所需的識別碼，因此設定步驟需要時，請從此處複製。

使用程式碼手動安裝

如果您自行管理 HTML，請在 Install 分頁展開 Install manually with code，然後：

1. 複製 Widget 程式碼片段。
2. 開啟網頁 HTML 檔案。若使用網站建置工具，請改用全站程式碼設定，參閱 網站建置工具。
3. 在每個需要 Widget 的頁面，將程式碼貼在結尾 </body> 標籤之前。

根據您提供的 Scenario ID 檢查 Widget 程式碼片段。檢查只讀取貼上的程式碼，不會擷取您的網站。

網站建置工具

在 Webflow、Wix、Squarespace、Hostinger 及類似工具中，請透過全站程式碼設定加入 Widget，只需一次：

1. 開啟會將程式碼加入每個頁面的設定，通常稱為 Custom code、Code injection、Footer code 或 Body end。
2. 在該處貼上 Widget 程式碼，套用至 所有頁面。若能選擇位置，請選頁尾或 body 結尾。此程式碼不會在 head 中運作。
3. 發布網站。聊天泡泡就會出現在每個頁面。

警告

不要將 Widget 加到頁面上的 Embed 或 HTML 元素。許多建置工具會把這些元素放在獨立的小型框架中，Widget 無法在裡面開啟。即使能載入，也只會出現在那一頁。

全站設定的位置：

建置工具	全站程式碼設定
Webflow	Site settings → Custom code → Footer code
Wix	Settings → Custom Code，再選 All pages 和 Body - end。需要已連接的網域。
Squarespace	Custom Code → Code Injection → Footer。適用於 Core、Plus、Advanced 及部分舊方案。
Hostinger Website Builder	More (⋯) → Integrations → Custom code。指令碼會自動在頁面結尾載入。

選單可能變更，也可能依建置工具語言翻譯。如果您的工具或方案沒有全站程式碼設定，請改分享 Chat Page 連結。

需要幫忙？

不是開發者嗎？Install 分頁的 Need a hand? 下有兩個捷徑：

• Ask AI for help：開啟應用程式內助理，預先填入將 Agent 加入網站的問題。
• Email instructions to a developer：將 Widget 程式碼、Scenario ID 及本指南連結寄給同事，讓對方取得安裝所需資訊並協助您完成。

如需更多協助，請聯絡 contact@quickchat.ai。

Chat Page

Chat Page 是位於 Quickchat URL 上、由平台託管的全螢幕 AI Agent。不需安裝，只要分享連結，訪客就能直接在瀏覽器與 Agent 對話。適用情況包括：

• 您想提供聊天體驗，但沒有網站，或不想變更網站程式碼。
• 您向小型內部群組分享 AI，例如測試人員、支援團隊或潛在客戶，需要可控制存取的連結，而非公開 Widget。
• 您想透過電子郵件、Slack 或 CRM 傳送 AI，作為後續服務通路。

從 Install → Chat Page Access 設定誰可開啟 Chat Page。請參閱下方 存取控制。

開始新對話

若要重設聊天並重新開始：

• Widget 或 Embed： 開啟聊天，按一下視窗右上角的 方框內鉛筆按鈕。
• Chat Page： 在側欄選擇 New chat，或使用標頭中的方框內鉛筆按鈕。

這會與 AI Agent 開始全新對話。先前對話仍保留在 Inbox。關閉並重新開啟 Widget，或重新整理頁面，可能會接續既有對話。要求 AI「重設」或「清除聊天」不會建立新對話。您不需要清除瀏覽器 Cookie。

存取控制

Install 分頁將存取控制放在可收合的 Availability and access 區塊。展開後有兩項適用於部署的控制：

Widget 與 Embed 存取

開關位於 Availability and access 頂端。啟用 時，Widget 與 Embed 指令碼會在訪客瀏覽器正常運作。停用 時，即使網站仍貼有指令碼，也無法使用 Widget 與 Embed。這可暫時讓 AI 下線而不移除程式碼，或限制公開存取，同時讓受邀使用者繼續使用 Chat Page。

Chat Page Access

您可獨立於 Widget 與 Embed 開關，限制誰能開啟 Chat Page：

• Anyone：Chat Page URL 公開，持有連結的任何人都能使用。
• Invited users only：只有透過電子郵件受邀的 Chat Users 能使用 Chat Page，且需要驗證身分。
• Nobody：完全停用 Chat Page。

Invite Chat Users 連結會開啟 Settings → Organization → Team Members。目前的邀請表單提供具控制台權限的團隊角色，沒有獨立的純聊天角色或 Chat Users 區塊。邀請前請檢閱 團隊成員與角色。

自訂

Appearance 與 Text Content 子分頁可調整 Widget、Embed、Chat Page 的外觀，以及訪客看到的文字。三種部署形式共用這些設定，修改一次便會套用至 Agent 的所有部署位置。

Install/Appearance/Text Content 分頁右側面板有獨立預覽控制。可在 Widget、Embed、Chat Page 預覽間切換，也可切換 Desktop 與 Mobile 畫面，在發布前查看變更。

Appearance

聊天介面的視覺設定分為 Branding、Size & Position、Theme 及 Other Settings。

Branding

• AI Agent Avatar：Agent 的個人照片或標誌，同一張圖同時用於聊天標頭與啟動按鈕，上限 5 MB。這是一項設定，不是兩項；上傳一次便會顯示在兩處，取代過去分開的「header logo」與「launcher icon」。每個 Agent 都有內建預設頭像；Reset to default 可還原，刪除則完全不顯示頭像。所有方案皆可使用，包含 Free。

AI Agent Avatar 適用於 Widget、Embed 及 Chat Page，但不適用 Discord，因為 Discord 機器人頭像來自其 Discord 應用程式。請參閱 Discord。

Size & Position

• Launcher size：Classic、Input Only 或 Small，控制聊天開啟前啟動按鈕的外觀。
• 關閉啟動按鈕：Classic 右上角有小型關閉按鈕，桌面上滑鼠移入時顯示，觸控裝置則持續顯示。它只會在本次頁面瀏覽隱藏 Widget，下次載入頁面就會重新出現。其他尺寸沒有關閉按鈕。
• Launcher label：僅在選擇 Small 時顯示，可自訂小型啟動按鈕文字，最多 25 個字元，例如 “Ask AI” 或 “Chat”。留白則只顯示圖示。
• Widget position：左下、中下或右下。
• 聊天視窗尺寸：寬度 300–700px，高度 400–1200px。
• Draggable launcher：允許訪客將啟動按鈕拖到其他位置，適合按鈕遮住重要內容時使用。

Theme

選擇聊天介面的配色方式：

• Light 與 Dark 是固定預設樣式，在所有帳戶看起來相同。
• Custom 開放完整的自訂調色盤。選取後，可設定背景、標頭與標頭文字、重點色（用於聊天前開始按鈕、建議選項與評分操作）、訊息泡泡及文字、AI 訊息文字、連結顏色、輸入欄位、邊框等。每個顏色都會依 WCAG AA 檢查與背景的對比，難以閱讀的組合會顯示警告。

品牌標頭色與重點色位於 Custom 主題。Light 與 Dark 保持中性預設，因此在兩者之間切換不會帶入自訂顏色。

在 Transparency 下，Background 設定決定聊天視窗的透明程度。所有主題模式皆可使用，染色則由主題提供：

• Solid：聊天視窗使用不透明背景，這是預設值。
• Glass：聊天視窗變為透明，後方網站像磨砂玻璃一樣模糊。Light 使用白色染色，Dark 使用深色，Custom 使用您的背景色；在 Custom 中，若標頭色與背景不同，會保留標頭色以呈現品牌。Glass opacity 控制染色覆蓋頁面的強度，從可確保文字在任何網站上仍可讀的最低值開始，到 95% 為止。最低值為 Light 的 50%、Dark 的 65%，Custom 則依配色而定。如果您的 Custom 配色在任何不透明度下都難以閱讀，Widget 會改用不透明背景，設定也會說明原因。Glass 仍維持選取，當您調整文字或背景顏色以達到足夠對比後，便會再次套用。

透明度適用於 Widget（包含手機）及 Embed。全頁 Chat Page 始終使用不透明背景。若訪客在裝置開啟「Reduce transparency」，Chrome 與 Edge 會將此設定傳給網站，並顯示 Solid 樣式。無法模糊背景的瀏覽器會讓 Glass 接近不透明，以維持文字可讀性。

選擇 Custom 時，Chat Page 還有專用側欄顏色：Sidebar background、Sidebar text、Sidebar hover 和 Sidebar hover text。這些只適用全頁 Chat Page，不影響 Widget 泡泡或 Embed。若未設定文字顏色，Chat Page 會依背景自動選擇可讀的顏色。

您也可以設定 圓角半徑，控制泡泡、輸入欄位及按鈕的圓潤程度，以及 文字大小。兩者適用所有主題模式。

Other Settings

• Voice Input：讓訪客透過聊天框的麥克風錄製語音訊息。錄音會轉為輸入欄位文字，讓訪客送出前編輯。錄音兩分鐘後自動停止，付費方案可用。
• File Attachments：讓訪客在訊息附加圖片或文件。預設啟用；關閉後會移除聊天框的附件按鈕。
• Auto-open Widget：頁面載入時自動開啟 Widget。
• Hide Quickchat AI Branding：隱藏「Powered by Quickchat AI」頁尾，提供完整白牌體驗，適用於包含白牌功能的方案。

若要讓訪客評分對話，請開啟 Conversations → Insights → Conversation Rating。設定與結果都在此分頁；請參閱 對話評分。

Text Content

開啟 Channels → Your Website → Text Content，編輯問候語及其他訪客文字：

• Header text：聊天視窗頂端的文字。
• Welcome message：每段對話開始時 AI Agent 的第一則訊息，例如 「嗨，需要幫忙嗎？」。
• Show as a pop-up：將問候語顯示為啟動按鈕旁的浮動對話泡泡，有人稱為「teaser」或「launcher message」，在訪客點擊前吸引注意。泡泡顯示的就是 Welcome message 本身，請編輯該欄位以變更內容。
• Conversation starters：訪客開始輸入前顯示的範例訊息，最多 3 則。點選會將它作為第一則訊息送出，適合引導訪客使用 AI 擅長的功能，例如 「如何安裝 Widget？」 或 「你們支援哪些整合？」。
• Input placeholder：空白訊息輸入欄位中的提示文字。
• Disclaimer text：顯示在對話後方的文字，通常告知使用者正在與 AI 對話。我們建議保持清楚且可見。

Pre-chat Screen 區塊位於同一 Text Content 分頁的這些欄位下方。請在該處啟用，並編輯其標題、按鈕與訊息文字。

語言與翻譯

預設情況下，所有訪客都會看到您原樣輸入的 Text Content。付費方案可新增 各語言翻譯，讓訪客以自己的語言看到 Widget。

1. 開啟 Text Content 子分頁，在 Other languages 按 Translate。Translate widget text 面板會開啟，主要文字以 Default (source) 顯示在各翻譯旁。
2. 按 Add language 並選擇語言。Quickchat AI 會翻譯目前文字。請檢閱及編輯該語言的欄位，包括標頭、問候語、開場問題、輸入提示、聊天前畫面及免責聲明。變更會自動儲存。
3. 留白欄位會使用預設文字，因此只需翻譯您想變更的部分。若自動翻譯失敗，仍可手動輸入。

可新增的語言數量依方案而定。

如何選擇訪客語言

對 Widget 與 Embed，Quickchat 依下列順序選擇語言：

1. 您在載入器明確指定的覆寫值：_quickchat("language", "de")，請在 _quickchat("init", ...) 之前呼叫。
2. 網頁的 <html lang> 屬性，例如 <html lang="de"> 會顯示德文翻譯。這是建議方式：在各本地化頁面正確設定 lang，Widget 就會自動跟隨。
3. 訪客的瀏覽器語言，若都不符合，則使用 Default 文字。

注意

若訪客語言沒有翻譯，會一律顯示 Default 文字，絕不留白。

進階功能：自訂參數

Quickchat AI Widget 與 Embed 可在初始化時傳入 自訂參數，用途包括：

• 強化分析；這些參數可在 Quickchat 平台的 CSV 匯出中取得
• 為 API Actions 提供值，並在允許時個人化回答。AI 只會收到篩選後的子集，而非所有參數；請參閱 模型情境與授權

以下是實用的自訂參數範例：

• visitor_name: Mike
• customer_tier: VIP
• order_id: ord_123

visitor_name 是系統識別的聯絡資料鍵。customer_tier 等自訂鍵可儲存並用於 Actions，但僅傳送它們不保證 AI 會在回答中使用。請將瀏覽器提供的值視為未驗證輸入，而非存取客戶帳戶的授權。

若要加入上述自訂參數，請將以下內容加入 Your Website > Install 中的指令碼。

Widget 與 Embed 使用相同的呼叫格式：

_quickchat("custom_params", {
  "visitor_name": "Mike",
  "customer_tier": "VIP",
  "order_id": "ord_123",
});

這些屬性會指定給每段新對話，建議僅保留少數幾個鍵。

提示

使用 snake_case 名稱的自訂參數，例如 order_id、customer_tier，可直接以 {{metadata_order_id}}、{{metadata_customer_tier}} 等形式注入 API Actions。詳情請參閱 AI Action 變數。

範例指令碼：

widget

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

<div id="quickchat-embedded" style="height:600px;overflow:hidden;"></div>
<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("containerId", "quickchat-embedded");
  _quickchat("custom_params", {"visitor_name": "Mike", "customer_tier": "VIP", "order_id": "ord_123"});
  _quickchat("init", "abcdefghij");
</script>

Embed

Embed 可將 Quickchat AI Agent 直接放在頁面中，以內嵌聊天視窗顯示，而非浮動泡泡。若希望對話位於說明中心欄位、聯絡頁或應用程式側欄等特定位置，請使用此方式。

如何新增 Embed

1. 取得 Embed 程式碼

   • 登入 Quickchat AI App。
   • 前往左側欄的 Channels → Your Website。
   • 按 Install 分頁，再展開 Install manually with code。
   • 複製 Embed 程式碼片段，其中包含 <div id="quickchat-embedded"> 容器及載入器指令碼。

2. 開啟網站 HTML 檔案，或網站建置工具中的頁面。

3. 貼上程式碼

   • 將 Embed 程式碼放進頁面的 <body>。
   • 放在希望顯示聊天視窗的確切位置。<div> 控制尺寸，可調整行內 style="height:600px" 以符合版面空間。
   • 若使用網站建置工具，請在聊天視窗應出現的位置新增程式碼或 HTML 元素，再貼入片段。

注意

只有當建置工具將程式碼直接放進頁面時，Embed 才會運作。部分工具（例如 Wix）會在獨立框架顯示 HTML 元素，而 Embed 無法在框架中載入。如果已發布的頁面沒有聊天視窗，請改透過全站程式碼設定加入 Widget，或分享 Chat Page 連結。