ElevenLabs 的对话式 AI是一款强大的客户支持工具，可打造互动式 AI 体验，提升用户参与度。如果你有 WordPress 网站，可以轻松集成自定义 HTML 和 JavaScript，包括 ElevenLabs 的对话式 AI 等动态功能。
本指南将介绍如何通过自定义 HTML 区块为指定页面添加对话式 AI 小组件，以及通过代码注入实现全站功能。
开始前准备
开始前，请确保已准备好以下内容：
- WordPress 套餐：WordPress.com 用户需升级到 Business 或 Commerce 套餐才能添加自定义 JavaScript。自建 WordPress 用户可直接添加代码，无此限制。
- ElevenLabs 账户：在 ElevenLabs 配置对话式AI 语音智能体，并复制包含 < script > 和 < div > 片段的嵌入代码。
- 基础 WordPress 知识：了解如何添加区块、编辑页面或使用插件会更方便。
操作步骤
步骤 1：准备 ElevenLabs 小组件
- 登录 ElevenLabs 账户。
- 进入对话式 AI 页面。
- 配置 AI 智能体并复制嵌入代码，包括：
- 用于加载小组件功能的 < script > 片段。
- 用于指定小组件显示位置的 < div > 片段。
步骤 2：通过自定义 HTML 区块为指定页面添加小组件
如需在指定页面显示小组件，请使用 WordPress 的自定义 HTML 区块。
- 登录 WordPress 后台。
- 进入“页面”，新建或编辑页面。
- 点击 + 图标添加新区块。
- 在区块选项中搜索并选择自定义 HTML。
- 将 ElevenLabs 嵌入代码中的 < div > 片段粘贴到该区块。
- 点击“预览”确认小组件显示正常。
- 发布或更新页面，使更改生效。
步骤 3：通过插件或主题设置全站添加脚本
为确保小组件正常运行，需要全站添加 < script > 片段。
方案 A：使用插件（推荐给非开发者）
- 安装并启用如 Header Footer Code Manager 等插件。
- 进入插件设置，新建代码片段。
- 将 < script > 片段粘贴到 Footer 区域。
- 设置代码片段在所有页面运行。
- 保存更改。
方案 B：直接添加脚本到主题
- 在 WordPress 后台进入“外观”>“主题编辑器”。
- 打开当前主题的 footer.php 文件。
- 在 < /body > 标签前粘贴 < script > 片段。
- 保存文件。
步骤 4：发布并测试
- 访问已添加小组件的页面，确认显示和功能正常。
- 在多种设备和浏览器上测试小组件，确保兼容性。
常见问题与排查
小组件无法正常使用？可以参考以下建议。
问题 1：小组件未显示
- 原因：< script > 或 < div > 片段缺失或位置错误。
- 解决方法：请确认 < script > 已全站添加，< div > 已放在页面上。
问题 2：小组件位置异常
- 原因：区块未对齐或样式缺失。
- 解决方法：可使用 WordPress 区块对齐工具，或添加自定义 CSS 调整小组件位置。
问题 3：插件冲突
- 原因：其他插件影响了 JavaScript 执行。
- 解决方法：逐个停用插件，排查冲突来源。
进阶技巧
参考这些技巧，帮助你更好地使用小组件。
- 自定义小组件：可在 WordPress“自定义”>“附加 CSS”中设置样式，让小组件更符合网站设计。
- 多设备测试：在桌面、平板和手机等设备上测试小组件，确保体验一致。
- 页面专属小组件：如只需在特定页面显示小组件，请勿全站添加 < script > 片段，可通过插件或区块仅在目标页面添加。
结语
将 ElevenLabs 对话式 AI 小组件集成到 WordPress 网站，有助于用 AI 互动吸引访客。不论是单页嵌入还是全站应用，WordPress 都能轻松实现无缝集成。
按照以上步骤操作，充分测试并根据需要调整。如遇问题，可随时联系 ElevenLabs支持团队获取帮助。
还没有账户？立即注册ElevenLabs智能体平台，快速开启体验。