你是否曾經想過，如果網站上有一個 24 小時不間斷的 AI 客服，能即時回答訪客問題，那會帶來多大的轉換提升？好消息是，現在你不需要任何程式背景，只要 10 分鐘就能在自己的網站上嵌入一個智慧 AI 客服 Widget。這篇教學將帶你從零開始，一步步完成整個流程。
為什麼你的網站需要 AI 客服 Widget？
傳統客服需要人力值班，成本高且無法 24 小時在線。AI 客服 Widget 能解決這些痛點：
- 全天候服務：24/7 即時回應，不漏接任何潛在客戶
- 降低人力成本：自動處理 80% 以上的常見問題
- 提升轉換率：即時解答購買疑慮，縮短決策時間
- 多語系支援：用訪客的語言溝通，拓展國際市場
- 數據洞察：了解客戶最常問什麼，優化產品和服務
Step 1：建立你的 ShareYourAI 帳號
首先，前往 shareyourai.ai 點擊「免費開始」按鈕。你可以使用 Google 帳號一鍵登入，無需額外設定密碼。註冊後即可進入主控台，開始建立你的第一個 AI 助手。
免費方案已包含基本功能，足夠讓你體驗完整的 AI 客服建置流程。需要更多知識庫容量或進階功能時，再考慮升級即可。
Step 2：上傳你的知識庫內容
AI 客服的品質取決於你提供的知識內容。進入主控台後，建立一個新的知識庫，然後上傳你的資料：
| 資料類型 | 建議格式 | 適用場景 |
|---|---|---|
| 產品 FAQ | PDF / TXT | 常見問題、退換貨政策 |
| 產品說明書 | PDF / DOCX | 規格、使用方式、注意事項 |
| 服務條款 | TXT / Markdown | 法律資訊、隱私權政策 |
| 銷售資料 | PDF / TXT | 價格方案、優惠活動、比較表 |
小提示：資料越完整，AI 回答就越精準。建議先整理好你最常被問到的 20 個問題和標準答案，再逐步擴充內容。
Step 3：自訂 Widget 外觀與行為
在 AI 助手設定頁面，你可以調整 Widget 的外觀，讓它完美融入你的品牌風格：
| 自訂選項 | 說明 | 建議值 |
|---|---|---|
| 主題色彩 | Widget 的主色調 | 使用品牌主色（如 #4F46E5） |
| Widget 位置 | 顯示在頁面的位置 | 右下角（最符合用戶習慣） |
| 歡迎語 | 訪客開啟 Widget 時看到的第一句話 | 「嗨！有任何問題都可以問我 😊」 |
| 語言設定 | Widget 介面語言 | 自動偵測或指定語言 |
Step 4：取得嵌入程式碼
設定完成後，前往「分享」頁面，選擇「網站嵌入」選項。系統會自動產生一段嵌入程式碼，類似以下格式：
<!-- ShareYourAI Widget -->
<script
src="https://shareyourai.ai/widget/YOUR_AI_ID.js"
data-position="bottom-right"
data-theme="#4F46E5"
data-greeting="嗨！有任何問題都可以問我"
async
></script>這段程式碼只需要複製貼上到你的網站 HTML 中即可。async 屬性確保 Widget 不會阻塞頁面載入。
Step 5：在你的網站上安裝
根據你使用的網站平台，安裝方式略有不同。以下是各平台的安裝指引：
| 平台 | 安裝位置 | 操作步驟 |
|---|---|---|
| WordPress | 頁尾（Footer） | 外觀 → 佈景主題檔案編輯器 → footer.php → 在 </body> 前貼上程式碼 |
| Shopify | 佈景主題程式碼 | 線上商店 → 佈景主題 → 編輯程式碼 → theme.liquid → 在 </body> 前貼上 |
| Wix | 自訂程式碼 | 設定 → 進階 → 自訂程式碼 → 新增程式碼 → 選擇「Body - end」 |
| Squarespace | 程式碼注入 | 設定 → 進階 → 程式碼注入 → 頁尾欄位貼上程式碼 |
| 自訂 HTML | HTML 檔案 | 直接在 </body> 標籤之前貼上嵌入程式碼 |
重要提醒：無論哪個平台，都建議將嵌入程式碼放在
</body>結束標籤之前，這樣可以確保頁面主要內容先載入，Widget 不會影響首次載入速度。
Step 6：測試與驗證
安裝完成後，務必進行以下測試確保一切正常運作：
- 桌面版測試：確認 Widget 按鈕正確顯示在右下角
- 手機版測試：確認 Widget 在行動裝置上的顯示與操作順暢
- 對話測試：實際提問，確認 AI 能根據知識庫給出正確回答
- 多頁面測試：瀏覽不同頁面，確認 Widget 持續顯示
- 載入速度：使用 Chrome DevTools 確認 Widget 未明顯影響頁面效能
疑難排解：常見問題與解決方案
在安裝過程中，你可能會遇到以下問題。別擔心，大多數都有簡單的解決方法：
| 問題 | 可能原因 | 解決方案 |
|---|---|---|
| Widget 沒有出現 | 程式碼位置錯誤或快取 | 確認程式碼在 </body> 前；清除瀏覽器快取後重試 |
| Widget 樣式跑版 | CSS 衝突 | 檢查是否有全域 CSS 覆蓋 Widget 樣式；聯繫客服協助 |
| AI 回答不正確 | 知識庫內容不足 | 補充更多相關資料到知識庫，確保涵蓋常見問題 |
| 載入速度慢 | 網路或伺服器問題 | 確認使用 async 載入；檢查網路連線品質 |
| 手機上按鈕太小 | 未適配行動裝置 | Widget 預設已是響應式設計，如仍有問題請更新至最新版 |
效能優化小技巧
AI Widget 採用 非同步載入（async loading）設計，對頁面效能的影響極小。以下是幾個進一步優化的技巧：
- 延遲載入：Widget 預設使用
async屬性，不會阻塞頁面主要渲染流程 - 資源大小：Widget 腳本經壓縮後僅約 30KB，比一張圖片還小
- 快取策略：腳本會被瀏覽器快取，回訪用戶不會重複下載
- 按需連線：只有當訪客點擊 Widget 時才會建立 AI 對話連線，不會佔用額外頻寬
- Core Web Vitals：Widget 的非同步設計不影響 LCP、FID、CLS 等核心指標
開始打造你的 AI 客服
只需 10 分鐘，你就能擁有一個 24 小時在線的 AI 客服。不需要寫程式、不需要訓練模型，上傳你的知識內容、自訂外觀、貼上程式碼，就這麼簡單。
已經有上千位創作者和企業主透過 ShareYourAI 在自己的網站上部署了 AI 客服。無論你是電商、部落格、SaaS 服務還是教育機構，AI Widget 都能為你的訪客提供即時、精準的服務體驗。