如何将 ElevenLabs 对话式 AI 小组件添加到 Framer 网站
- 发布时间
- 最近更新
ElevenLabs 的 对话式 AI 小组件可通过互动式 AI 对话增强 Framer 网站。无论是想提升 客户参与度，还是想 改善客户支持，对话式 AI 都能帮上忙。
本指南将带你把小组件添加到 Framer 网站。你将了解如何配置全站或特定页面的小组件，以及排查常见问题。
开始前
开始前，请确保已准备好以下内容：
- Framer 账户：可访问支持添加自定义代码的 Framer 项目（付费套餐提供）。
- ElevenLabs 账户：配置 对话式 AI 智能体，并复制其嵌入 代码（包括 < script > 和 < div > 代码片段）。
- 熟悉 Framer：了解 Framer 的网站设置和嵌入元素基础知识
分步指南
第 1 步：准备 ElevenLabs 小组件
- 登录 ElevenLabs 账户。
- 前往对话式 AI 部分。
- 配置 AI 智能体，然后复制提供的嵌入代码，其中包括：
- 用于加载小组件功能的 < script > 代码片段。
- 用于定义小组件显示位置的 < div > 代码片段。
第 2 步：将脚本添加到 Framer 网站设置
- 打开 Framer 项目。
- 点击右上角的“项目设置”。
- 前往“常规”标签页，然后向下滚动至“自定义代码”部分。
- 将 ElevenLabs 嵌入代码中的 < script > 代码片段粘贴到“< body > 标签末尾”字段。
- 保存更改。这样可确保网站加载所需脚本。
第 3 步：将小组件添加到特定页面
- 在 Framer 项目中，前往要显示小组件的页面。
- 从“插入”菜单的“实用工具”部分添加嵌入元素。
- 在画布上选择嵌入元素以访问其设置。
- 将“类型”切换为 HTML。
- 将 ElevenLabs 嵌入代码中的 < div > 代码片段粘贴到 HTML 字段。
- 根据需要调整画布上嵌入元素的位置和大小。
第 4 步：发布并测试
- 点击“发布”使更改上线。
- 在浏览器中打开网站，确认小组件显示正常且功能可用。
- 注意：自定义代码不会显示在 Framer 的预览模式中，必须发布后才能查看。
常见问题与排查
如果集成无法正常运行，别担心——请查看以下排查建议。
问题 1：小组件未显示
- 原因：缺少 < script > 或 < div > 代码片段，或放置位置不正确。
- 解决方案：确保已将 < script > 代码片段添加到网站设置中的“< body > 标签末尾”字段，并将 < div > 代码片段添加到嵌入元素中。
问题 2：小组件仅部分可见
- 原因：嵌入元素的大小或位置不正确。
- 解决方案：在 Framer 编辑器中调整嵌入元素的尺寸和对齐方式。
问题 3：脚本错误
- 原因：脚本冲突或外部资源被阻止。
- 解决方案：打开浏览器控制台，检查是否存在 JavaScript 错误。确保 Framer 有权限加载外部脚本。
进阶技巧
想要更多高级自定义选项？以下技巧或许能帮到你。
- 自定义小组件：使用自定义 CSS 设置小组件样式，使其与网站设计无缝融合。
- 跨设备测试：Framer 的响应式设计工具可让你轻松在手机、平板和桌面视图中测试小组件，确保缩放正常。
- 向特定页面添加小组件：如只想在特定页面显示小组件，请将 < div > 代码片段添加到目标页面的嵌入元素中，并确保网站设置中已有 < script > 代码片段。
总结
按照本指南操作，即可为 Framer 网站添加贴合受众需求的动态 AI 互动体验。发布更改并测试设置，让对话式 AI 从今天起开始与访客互动。如需进一步帮助，请联系 ElevenLabs 支持团队。
