AI-translated from English; not yet reviewed by a fluent editor.

# 在單一網頁加入 ElevenLabs 語音常見問題元件

> 設定專用 ElevenLabs 公開問答代理、限制主機名稱，在單一頁面嵌入語音元件，並檢查線上對話、隱私與用量。

By BIG CHANGE Editorial

Published: 2026-10-20T06:57:39.691Z
Updated: 2026-10-20T06:57:39.691Z
Canonical: https://bigchange.ai/blog/elevenlabs-voice-faq-widget-website-guide

![Conceptual charcoal illustration of one person speaking toward a handheld phone displaying an unbranded, unreadable web page.](https://bigchange.ai/api/media/file/elevenlabs-public-voice-faq-phone-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE.

ElevenLabs 元件讓訪客在網站上以語音提問。本指南適合同時管理網頁和代理的人，從設定範圍有限的公開問答，到檢查線上頁面，再查看存取、對話紀錄與用量。步驟依據 2026 年 10 月 20 日查核的文件。BIG CHANGE 沒有建立代理、嵌入元件或進行測試通話。

## 關鍵變化

- **是什麼：** ElevenLabs 文件介紹供 ElevenAgents 公開代理使用的網站元件，預設為語音模式。
- **如何運作：** 頁面以公開可見的代理 ID 載入自訂元素。代理的主機名稱允許清單控制哪些網站來源能連線。
- **為何重要：** 站方可在一頁檢查語音協助流程，但公開前必須核准資訊、訪客告知與可能費用。主機名稱允許清單不會識別個別訪客。

## 準備公開問答及小型測試

你需要管理一個代理，以及編輯和發布一頁網站的權限。準備 HTTPS 頁面、麥克風可用的瀏覽器，及能核准內容並聆聽回答的人。網站發布工具必須支援文件的自訂元素與指令碼；使用其目前新增自訂 HTML 的方式。以下是供應商的普通 HTML 嵌入範例，不是個別平台安裝說明。

寫下少量 **已核准的公開事實** ，並提供超出範圍時的人工聯繫方式。選一題事實中有答案的問題，以及一題代理應拒絕或轉人工的問題。排除客戶紀錄、內部政策、帳戶資料與 API 秘密。指定誰核准聲音和訪客告知。確認聲音及帳戶條款容許預期用途；本指南不確立所有聲音的通用商業使用權。

任何語音測試前，檢查實際方案、剩餘額度、按量付費設定與模型費用。ElevenLabs 表示建立代理免費，但連線通話會消耗用量，LLM 費用可能另計。連線時間可能長於說話時間。開始控制台與線上測試前取得支出核准。單次通話時限不是每月支出上限。

## 設定專用代理

1. **另建獨立的公開問答代理** ，使用控制台內已核准的空白設定或範本，再檢查繼承的知識與工具。移除私密知識、預約、CRM、webhook 和不必要操作。依核准事實設定目的與回答邊界，加入人工聯繫，選擇獲授權的聲音及語言。不要關閉現有私有代理的驗證，把它改成公開元件。
2. 進入 **Channels → Widget → Interface**，選擇預期語音介面並審核訪客文字及條款。文件也將部分介面稱為 **Widget** 分頁，請核對控制台儲存的設定。以下嵌入要求 **關閉驗證的公開代理**，文件將設定列在 **Advanced**。代理 ID 會出現在頁面原始碼中，不是秘密。不要將 API 金鑰、個人或訪客專屬資料放入標記及元件覆寫設定。
3. 在代理的 **Security** 分頁將精確網站主機名稱加入 **Allowlist**，儲存後重新讀取。ElevenLabs 說明精確比對、最多十個，每個子網域須分別新增。確實需要本機測試來源時才加入。此清單限制連線來源，不驗證說話的人。
4. 檢查逐字紀錄保留及音訊儲存設定，核准適合站點的告知與同意流程。元件可在通話前顯示站方條款，但該畫面及瀏覽器麥克風權限不能解決站點法律義務。在 **Advanced → Call limits**設定並儲存適當的 **Max conversation duration**。文件記載預設 600 秒，範圍 60–7,200 秒。付費測試前重新讀取隱私、時長及存取設定。

## 在一個草稿頁面加入嵌入碼

使用網站支援的自訂 HTML 或指令碼功能，將以下內容放入頁面主體。把 `YOUR_PUBLIC_AGENT_ID` 換成專用代理 ID。初次上線僅限這個已核准頁面。

```html
<elevenlabs-convai agent-id="YOUR_PUBLIC_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
```

這是目前的 [官方元件嵌入碼](https://elevenlabs.io/docs/eleven-agents/customization/widget)。其指令碼網址 **未固定版本**；記錄實際安裝內容，維護時重新查閱文件。在草稿預覽確認元件只出現一次，且不遮住必要控制項。若使用 Content Security Policy，請維護者檢查實際遭阻擋的請求，做範圍有限且經審核的修改。關閉政策或加入廣泛萬用字元不是設定步驟。

## 先檢查代理，再檢查實際訪客流程

費用與隱私審核後，在控制台語音測試提出可回答與範圍外兩題。比較回答與核准事實、人工轉介邊界。不安全或無依據時修改並重測。控制台通話只驗證該路徑，不能證明網站嵌入有效。

發布前請頁面負責人審查內容、告知、位置及結果。在 **允許清單主機名稱的線上頁面**開啟元件，主動授權麥克風，提出相同兩題，聽完並結束通話。確認麥克風指示熄滅，且手機尺寸下可用。實際說法須比對核准答案；流暢不代表事實正確。記錄時間和代理以追查用量。這是讀者要做的檢查，不是 BIG CHANGE 的實測。

開啟 **Call history** ，前提是保留設定有留下紀錄，並依兩題檢查對話。在 **Analytics**篩選代理及短時間範圍，查看次數、時長、費用。這些彙總本身不能證明哪次通話產生費用。若核准設定刪除對話，只保留獲准的最低必要觀察，並查看可用彙總。不要為此延長保留時間。沒有紀錄不表示免費。

## 檢查失敗時

元件沒出現時，比較實際發布標記與 [文件嵌入碼](https://elevenlabs.io/docs/eleven-agents/customization/widget)，查重複元素、指令碼及具體瀏覽器或 CSP 錯誤。出現但無法連線時，重讀公開驗證設定、精確主機名稱、麥克風權限、額度和控制台錯誤。語音失敗時檢查麥克風、瀏覽器權限、安全頁面環境及可用通話紀錄。結束不確定的工作階段，查看用量再付費重試。

代理編造或超出問答範圍時，修改事實與指令期間先移除嵌入。復原前在控制台及線上重問兩題。用量超出核准時，移除嵌入，檢查篩選後統計及帳單，再考慮時長和上線範圍。移除只阻止此頁提供新通話，不證明現有通話已結束，也不撤銷其他允許主機對公開代理的存取。

對於本機開發的瀏覽器語音應用， [我們的 OpenAI Realtime 指南](https://bigchange.ai/blog/openai-realtime-browser-voice-webrtc-guide) 介紹另一項任務。本指南使用 ElevenLabs 託管公開元件。文件別處列出一個 `signed-url` 屬性，但基本嵌入明確要求公開代理；單憑該屬性不能當作實測私有元件配方。

## 來源與延伸閱讀

- [ElevenLabs 元件自訂](https://elevenlabs.io/docs/eleven-agents/customization/widget)：公開代理要求、介面控制及目前嵌入。指令碼網址未固定版本。
- [代理驗證](https://elevenlabs.io/docs/eleven-agents/customization/authentication)：精確主機名稱、十個上限，以及與個人驗證的差異。
- [對話流程](https://elevenlabs.io/docs/eleven-agents/customization/conversation-flow) 和 [隱私控制](https://elevenlabs.io/docs/eleven-agents/customization/privacy)：時長、保留及音訊儲存。
- [ElevenAgents 快速入門](https://elevenlabs.io/docs/eleven-agents/quickstart)、 [Analytics](https://elevenlabs.io/docs/eleven-agents/dashboard) 和 [費用說明](https://elevenlabs.io/docs/help-center/product/eleven-agents/how-much-does-eleven-agents-cost)：控制台測試、歷史、彙總用量與計費依據。實際額度和帳單由帳戶條款決定。

## Sources

- [元件自訂](https://elevenlabs.io/docs/eleven-agents/customization/widget) — 查核於 2026 年 10 月 20 日。官方公開代理要求、模式、基本自訂元素及目前未固定版本的指令碼。未驗證私有簽名元件實作。
- [代理驗證](https://elevenlabs.io/docs/eleven-agents/customization/authentication) — 查核於 2026 年 10 月 20 日。精確主機名稱及十個上限；是來源控制，不是訪客驗證。
- [對話流程](https://elevenlabs.io/docs/eleven-agents/customization/conversation-flow) — 查核於 2026 年 10 月 20 日。單次預設時長、範圍及控制台儲存；未確立總支出上限。
- [隱私](https://elevenlabs.io/docs/eleven-agents/customization/privacy) — 查核於 2026 年 10 月 20 日。文字紀錄和音訊保留；實際站點告知及法律依據須由負責人審核。
- [ElevenAgents 快速入門](https://elevenlabs.io/docs/eleven-agents/quickstart) — 查核於 2026 年 10 月 20 日。控制台設定、測試、Call history 及官方嵌入碼；無 BIG CHANGE 測試。
- [Analytics](https://elevenlabs.io/docs/eleven-agents/dashboard) — 查核於 2026 年 10 月 20 日。代理與時間篩選及次數、時長、費用彙總；不能單獨識別一次測試通話。
- [ElevenAgents 費用是多少？](https://elevenlabs.io/docs/help-center/product/eleven-agents/how-much-does-eleven-agents-cost) — 查核於 2026 年 10 月 20 日。建立代理、連線時長及另計 LLM 費用；須確認帳戶方案、額度及聲音權利。
