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

ElevenLabs 对话式 AI 小组件可为 Framer 网站带来互动式 AI 对话。不论是提升 客户互动 还是 优化客户支持，对话式 AI 都能帮到你。

本指南将带你一步步添加小组件到 Framer 网站。你将学会如何配置全站或单页小组件，并排查常见问题。

开始前须知

开始前，请确保已准备好以下内容：

1. Framer 账户：可添加自定义代码的 Framer 项目访问权限（需付费方案）。
2. ElevenLabs 账户：配置 对话式 AI 智能体 并复制其嵌入 代码（包含 < script > 和 < div > 片段）。
3. 熟悉 Framer：了解 Framer 的站点设置和嵌入元素基础操作

操作指南

步骤 1：准备 ElevenLabs 小组件

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

步骤 2：将脚本添加到 Framer 站点设置

1. 打开 Framer 项目。
2. 点击右上角的项目设置。
3. 进入“常规”标签页，向下滚动到自定义代码部分。
4. 将 ElevenLabs 嵌入代码中的 < script > 片段粘贴到 End of < body > tag 字段。
5. 保存更改。此操作可确保网站加载所需脚本。

步骤 3：将小组件添加到指定页面

1. 在 Framer 项目中，进入需要显示小组件的页面。
2. 在插入菜单的“实用工具”中添加嵌入元素。
3. 在画布上选中嵌入元素，进入其设置。
4. 将类型切换为 HTML。
5. 将 ElevenLabs 嵌入代码中的 < div > 片段粘贴到 HTML 字段。
6. 根据需要调整嵌入元素在画布上的位置和大小。

步骤 4：发布并测试

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

常见问题与排查

集成遇到问题？别担心，参考以下排查建议。

问题 1：小组件未显示

• 原因：< script > 或 < div > 片段缺失或位置不正确。
• 解决方法：确保 < script > 片段已添加到站点设置的 End of < body > tag 字段，< div > 片段已放入嵌入元素。

问题 2：小组件只显示部分内容

• 原因：嵌入元素尺寸或位置设置不当。
• 解决方法：在 Framer 编辑器中调整嵌入元素的尺寸和对齐方式。

问题 3：脚本报错

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

进阶技巧

想要更高级的自定义？这些技巧可以帮到你。

• 自定义小组件：可用自定义 CSS 调整小组件样式，让其更好融入网站设计。
• 多设备测试：Framer 的响应式设计工具可轻松测试小组件在手机、平板和桌面端的显示效果，确保自适应。
• 为指定页面添加小组件：如只需在部分页面显示小组件，将 < div > 片段添加到对应页面的嵌入元素，并确保 < script > 片段已在站点设置中。

结语

按照本指南操作，即可为 Framer 网站添加动态 AI 互动，满足不同用户需求。发布更改并测试效果，让对话式 AI 开始与访客互动。如需更多帮助，请联系 ElevenLabs 支持.

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