如何将 ElevenLabs 对话式 AI 小组件添加到 WordPress 网站

ElevenLabs 的对话式 AI是一款强大的客户支持工具，可创建互动式 AI 体验，提升用户参与度。如果你有 WordPress 网站，可轻松集成自定义 HTML 和 JavaScript，以及 ElevenLabs 对话式 AI 等动态功能。

本指南将介绍如何通过自定义 HTML 区块将对话式 AI 小组件添加到特定 WordPress 页面，以及如何通过代码注入实现全站功能。

开始前准备

开始前，请确认已具备以下条件：

1. WordPress 套餐：WordPress.com 用户需使用商业版或 Commerce 套餐才能添加自定义 JavaScript。自托管 WordPress 用户不受此限制，可直接添加代码。
2. ElevenLabs 账户：在 ElevenLabs 中配置对话式AI 语音智能体，并复制嵌入代码，其中包含 < script > 和 < div > 代码片段。
3. 基本 WordPress 知识：熟悉添加区块、编辑页面或使用插件会很有帮助。

分步指南

第 1 步：准备 ElevenLabs 小组件

1. 登录 ElevenLabs 账户。
2. 前往“对话式 AI”部分。
3. 配置 AI 智能体并复制嵌入代码，其中包括：
4. • 用于加载小组件功能的 < script > 代码片段。
   • 用于指定小组件显示位置的 < div > 代码片段。

第 2 步：使用自定义 HTML 区块将小组件添加到特定页面

如需在特定页面显示小组件，请使用 WordPress 的自定义 HTML 区块。

1. 登录 WordPress 控制面板。
2. 前往“页面”，新建页面或编辑现有页面。
3. 点击 + 图标，添加新区块。
4. 搜索并从区块选项中选择“自定义 HTML”。
5. 将 ElevenLabs 嵌入代码中的 < div > 代码片段粘贴到区块中。
6. 点击“预览”，确认小组件渲染正常。
7. 发布或更新页面，使更改生效。

第 3 步：通过插件或主题设置全局添加脚本

为确保小组件正常运行，需全局添加 < script > 代码片段。

选项 A：使用插件（推荐非开发者使用）

1. 安装并启用 Header Footer Code Manager 等插件。
2. 前往插件设置，新建代码片段。
3. 将 < script > 代码片段粘贴到 Footer 部分。
4. 将代码片段设置为在所有页面运行。
5. 保存更改。

选项 B：直接将脚本添加到主题

1. 在 WordPress 控制面板中前往“外观”>“主题编辑器”。
2. 打开当前主题的 footer.php 文件。
3. 在结束 < /body > 标签前粘贴 < script > 代码片段。
4. 保存文件。

第 4 步：发布并测试

1. 访问添加小组件的页面，确认其正常显示和运行。
2. 在多种设备和浏览器上测试小组件，确保其顺畅运行。

常见问题与故障排除

小组件无法正常运行？以下提示或许能帮到你。 

问题 1：小组件未显示

• 原因：缺少 < script > 或 < div > 代码片段，或其位置不正确。
• 解决方法：再次确认已全局添加 < script >，且 < div > 已放在页面中。

问题 2：小组件未对齐

• 原因：区块对齐方式不正确或缺少样式。
• 解决方法：使用 WordPress 的区块对齐工具，或添加自定义 CSS 来正确定位小组件。

问题 3：插件冲突

• 原因：其他插件干扰了JavaScript执行。
• 解决方法：逐一停用插件，找出冲突来源。

高级提示

以下提示可帮助你让小组件按预期运行。 

• 自定义小组件：使用 WordPress 的“自定义”>“额外 CSS”部分设置小组件样式，使其与网站设计一致。
• 跨设备测试：在桌面设备、平板电脑和移动设备上测试小组件，确保用户体验一致。
• 页面专属小组件：如果只想在特定页面显示小组件，请勿全局添加 < script > 代码片段。改为将其加入面向这些页面的插件或区块中。

总结

将 ElevenLabs 对话式 AI 小组件添加到 WordPress 网站，可通过 AI 驱动的互动有效吸引访客。无论嵌入单个页面还是整个网站，WordPress 都能提供无缝集成所需的工具。

按照上述步骤操作，充分测试实现效果，并根据需要进行调整。如遇到问题，欢迎联系 ElevenLabs支持团队获取帮助。

或者，如果你还没有账户，立即注册 ElevenLabs 智能体平台，开启使用流程。