世界从未停止变化。RSS
BIG CHANGE.

Markdown 版本

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 加载自定义元素。代理的主机名允许列表控制哪些网站来源可以连接。
- **为什么重要：** 站点所有者可以在一个页面检查语音帮助流程，但公开前必须批准信息、访客告知和潜在通话费用。主机名允许列表不会识别每位访客。

## 准备公共问答内容和小规模测试

你需要管理一个 ElevenLabs 代理、编辑并发布一个页面的权限。准备 HTTPS 页面、有麦克风的浏览器，以及能够批准问答内容并听取回答的人。发布工具必须允许文档中的自定义元素和脚本；使用其当前添加自定义 HTML 的方法。下面是供应商的普通 HTML 嵌入示例，不是特定平台的安装步骤。

写下少量 **已批准的公共事实** ，并提供超出范围时的人工联系渠道。选择一个事实中有答案的问题，以及一个代理应拒绝或转人工的问题。排除客户记录、内部政策、账户信息和 API 秘密。指定谁批准声音和访客告知。核实所选声音和账户条款允许预期用途；本指南不代表所有声音都具有通用商业使用权。

任何语音测试前，检查实际套餐、剩余额度、按量付费设置及所选模型的费用。ElevenLabs 表示创建代理免费，但已连接的语音通话消耗用量，LLM 费用可能另计。连接时长可能超过说话时间。开始控制台和线上测试前取得支出批准。单次通话时限不是每月费用上限。

## 配置专用代理

1. **创建独立的公共问答代理** ，使用 ElevenLabs 控制台中已批准的空白配置或模板，再检查继承的知识和工具。移除私密知识、预约、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)。其脚本 URL **没有固定版本**；记录实际安装内容，维护时重新查看手册。在草稿预览确认组件只出现一次，且不遮挡必要控件。若网站启用 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)：公共代理要求、界面控件和当前嵌入方式。脚本 URL 未固定版本。
- [代理认证](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 费用；须核实账户套餐、额度与声音使用权。