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

ElevenLabs 对话式 AI 小组件可通过互动式 AI 对话增强 Framer 网站。无论是想提升 客户互动，还是 优化客户支持，对话式 AI 都能帮上忙。

本指南将介绍如何将小组件添加到 Framer 网站。你将了解如何配置全站或特定页面的小组件，以及如何排查常见问题。

开始前准备

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

1. Framer 账户：可访问支持添加自定义代码的 Framer 项目（付费套餐提供）。
2. ElevenLabs 账户：配置 对话式 AI 智能体，并复制其嵌入 代码（包括 < script > 和 < div > 代码片段）。
3. 熟悉 Framer：了解 Framer 的 Site Settings 和 Embed Elements 基本操作

分步指南

第 1 步：准备 ElevenLabs 小组件

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

第 2 步：将脚本添加到 Framer 网站设置

1. 打开 Framer 项目。
2. 点击右上角的 Project Settings。
3. 前往 General 标签页，向下滚动至 Custom Code 部分。
4. 将 ElevenLabs 嵌入代码中的 < script > 代码片段粘贴到 End of < body > tag 字段。
5. 保存更改。这可确保网站加载所需脚本。

第 3 步：将小组件添加到特定页面

1. 在 Framer 项目中，前往要显示小组件的页面。
2. 在 Insert 菜单的 Utilities 部分添加 Embed Element。
3. 在画布中选择 Embed Element，打开其设置。
4. 将 Type 切换为 HTML。
5. 将 ElevenLabs 嵌入代码中的 < div > 代码片段粘贴到 HTML 字段。
6. 根据需要在画布中调整 Embed Element 的位置和大小。

第 4 步：发布并测试

1. 点击 Publish，使更改上线。
2. 在浏览器中打开网站，确认小组件正常显示和运行。
3. • 注意：Framer 的 Preview 模式不会显示自定义代码，必须发布后才能查看。

常见问题排查

如果集成未能正常运行，不用担心。请查看以下排查建议。

问题 1：小组件未显示

• 原因：缺少 < script > 或 < div > 代码片段，或其位置不正确。
• 解决方案：确认已将 < script > 代码片段添加到 Site Settings 的 End of < body > tag 字段，并将 < div > 代码片段添加到 Embed Element。

问题 2：小组件仅部分可见

• 原因：Embed Element 的大小或位置不正确。
• 解决方案：在 Framer Editor 中调整 Embed Element 的尺寸和对齐方式。

问题 3：脚本错误

• 原因：脚本冲突或外部资源被拦截。
• 解决方案：打开浏览器控制台检查 JavaScript 错误。确认 Framer 有权限加载外部脚本。

进阶技巧

想要更多高级自定义选项？以下技巧或许有帮助。

• 自定义小组件：使用自定义 CSS 设置小组件样式，使其与网站设计自然融合。
• 跨设备测试：使用 Framer 的响应式设计工具，轻松在移动端、平板和桌面视图中测试小组件，确保缩放正常。
• 将小组件添加到特定页面：如仅需在特定页面显示小组件，请将 < div > 代码片段添加到目标页面的 Embed Element，并确保 Site Settings 中已有 < script > 代码片段。

总结

按照本指南操作，即可为 Framer 网站添加贴合受众需求的动态 AI 互动功能。发布更改并测试设置，让对话式 AI 从今天起与访客互动。如需进一步帮助，请联系 ElevenLabs 支持团队。

注册，立即开始使用 AI 语音智能体。