如何将 ElevenLabs 对话式 AI 小组件添加到 Wix 网站
- 发布时间
- 最近更新
想提升客户支持和用户互动？只需将 ElevenLabs 的 对话式 AI 添加到 Wix 网站即可。这里正是你需要的指南。本文将逐步讲解整个流程，帮你避开常见问题。
开始前准备
开始前，请确认已具备以下条件：
- Wix 高级版账户：仅高级版方案支持嵌入自定义 JavaScript。
- ElevenLabs 账户：创建对话式 AI 语音智能体需要 ElevenLabs 账户。在此注册。
- 已启用 Dev Mode 的 Wix Editor 访问权限：需要通过 Dev Mode 向网站添加自定义代码。
分步指南
第 1 步：准备 ElevenLabs 小组件
- 登录 ElevenLabs 账户。
- 前往对话式 AI 页面。
- 设置对话智能体，并复制提供的 JavaScript 嵌入代码。
第 2 步：在 Wix 中启用 Dev Mode
- 在 Editor 中打开 Wix 网站。
- 点击顶部菜单中的 Dev Mode，启用添加自定义代码等高级功能。
注意：如果看不到 Dev Mode，请确认使用的是完整的 Wix Editor，而非 Wix ADI（Artificial Design Intelligence）。
第 3 步：添加 JavaScript 嵌入代码
- 在 Wix Editor 中前往 Settings > Custom Code。
- 点击 + Add Custom Code。
- 将 ElevenLabs JavaScript 代码粘贴到相应字段。
- 在 Apply Code To 下选择 All Pages（或为小组件选择指定页面）。
- 保存并发布更改。
常见问题与排查
向 Wix 网站添加对话式 AI 小组件时遇到问题？按照以下简单步骤解决。
问题 1：小组件断开连接或无法加载
- 原因：Allowlist 配置不正确，或使用的是免费 Wix 方案。
- 解决方法：请从 Allowlist 中移除网站 URL，或在 ElevenLabs 控制台中正确配置该 URL。
问题 2：JavaScript 无法运行
- 原因：JavaScript 代码未正确添加。
- 解决方法：请再次确认 JavaScript 是否已粘贴到 Custom Code 下的正确字段中。
问题 3：免费 Wix 方案
- 原因：免费 Wix 方案不支持嵌入自定义 JavaScript。
- 解决方法：升级到 Wix 高级版方案。
进阶建议
想为网站访客打造更好的体验？不妨参考以下进阶最佳实践。
调整 Allowlist
如果嵌入代码后小组件仍无法运行，请按以下步骤操作：
- 登录 ElevenLabs 账户。
- 前往对话式 AI 智能体的 Allowlist 设置。
- 确认网站域名已正确添加。如果问题仍然存在，尝试从 Allowlist 中移除域名后重新测试。
在正式域名上测试
小组件可能无法在 Wix 预览模式中正常运行。请发布网站，并在正式域名上测试，确认其按预期工作。
跨浏览器兼容性测试
小组件上线后，请在 Chrome、Firefox、Edge 和 Safari 等多个浏览器中测试。由于各浏览器处理 JavaScript 的方式不同，部分功能的表现可能有所差异。
- 在每个浏览器中打开网站。
- 与小组件交互，检查其响应情况。
- 检查样式损坏或功能错误等问题。如有问题，请检查 JavaScript 代码，或联系 ElevenLabs 支持团队获取帮助。
移动端响应能力
请确认小组件能在移动设备上顺畅运行，因为许多用户通过智能手机或平板电脑访问网站。
- 使用 Wix 的 Mobile Editor 预览网站移动端布局。
- 在实体设备上测试小组件，确认其功能和易用性。
- 检查是否存在元素重叠或格式问题。如需调整，请使用 Wix 移动端设计工具优化位置和尺寸。
JavaScript 调试技巧
如果小组件未按预期运行，可借助浏览器开发者工具定位问题。
- 在浏览器中打开网站（推荐 Chrome）。
- 右键点击页面任意位置，选择 Inspect 以打开 DevTools。
- 前往 Console 标签页，查看与小组件相关的错误信息。
- 如果看到错误，请核对 JavaScript 嵌入代码，并确认所有必要 URL 均已添加至 Allowlist。此方法还能发现缺失的依赖项或其他导致小组件无法正常运行的问题。
总结
将 ElevenLabs 对话式 AI 小组件集成到 Wix 需要仔细设置，但只要遵循正确步骤，很快就能运行。请确认使用 Wix 高级版方案，按上述步骤操作，并视需要排查常见问题。如遇到更多问题，请联系 ElevenLabs 支持团队 获取帮助。
