如何将 ElevenLabs 对话式 AI 小组件添加到 Webflow 网站
- 发布时间
- 最近更新
想提升客户体验？对话式 AI 可以帮上忙。将 ElevenLabs 的对话式 AI 添加到 Webflow 网站后，访客可以进行自然的对话，仿佛在与团队成员直接交流。
本指南将带你把 ElevenLabs 对话式 AI 小组件添加到 Webflow 网站，并使用自定义 HTML 和 JavaScript 集成小组件。
开始前准备
开始前，请确认已具备以下条件：
- Webflow 账户：需要有效的 Core、Growth、Agency 或 Freelancer 工作区，或 Site Plan，才能使用 Embed Element。
- ElevenLabs 账户：在 ElevenLabs 中配置对话式 AI 语音智能体，并复制提供的嵌入代码（其中包含 < script > 和 < div > 代码片段）。
- 熟悉 Webflow Designer：了解如何在 Webflow 中添加和编辑 Embed Element 会更方便。
分步指南
第 1 步：准备 ElevenLabs 小组件
- 登录 ElevenLabs 账户。
- 前往对话式 AI 部分。
- 复制嵌入代码，其中包括：
- 用于加载小组件功能的 < script > 代码片段。
- 用于定义小组件在页面中显示位置的 < div > 代码片段。
第 2 步：将小组件添加到 Webflow 页面
如需在特定页面显示小组件，请使用 Embed Element。
- 在 Designer 中打开 Webflow 项目。
- 前往要显示小组件的页面。
- 从 Elements Panel 将 Embed Element 拖到页面所需位置。
- 在 Embed Element 的代码编辑器中，粘贴 ElevenLabs 嵌入代码中的 < div > 代码片段。
- 点击 Save & Close 应用更改。
注意：Embed Element 在 Designer 中充当小组件的占位符。只有发布网站后，实际小组件才会渲染。
第 3 步：全局添加脚本
为确保小组件正常运行，需要在网站中全局添加 < script > 代码片段。
- 前往 Webflow Dashboard，打开 Project Settings。
- 前往 Custom Code 标签页。
- 将 < script > 代码片段粘贴到 Footer Code 部分。这样可确保在使用小组件的所有页面上加载脚本。
- 点击 Save Changes。
第 4 步：发布并测试
- 将网站发布到 Webflow 的暂存域名或自定义域名。
- 在浏览器中打开网站，确认小组件是否正常显示和运行。
重要提示：自定义代码不会在 Webflow Designer 中渲染。必须发布网站才能查看实际运行的小组件。
常见问题与排查
设置集成时遇到问题？别担心，以下提示应该能帮到你。
1. 小组件未显示
- 原因：缺少 < script > 或 < div > 代码片段，或放置位置不正确。
- 解决方案：确认 < script > 代码片段位于 Footer Code 部分，且 < div > 代码片段已正确放入 Embed Element。
2. 小组件未对齐
- 原因：Embed Element 的位置或样式不正确。
- 解决方案：使用 Webflow 的 Style Panel 调整 Embed Element 的尺寸和对齐方式。
3. 错误
- 原因：与其他脚本冲突或受到浏览器限制。
- 解决方案：使用浏览器开发者控制台定位并修复 JavaScript 错误。
进阶技巧
如果想自定义小组件、在不同设备上测试，或在多个页面重复使用小组件，以下是你需要了解的内容。
- 自定义小组件：使用 Webflow 的 Style Panel 或自定义 CSS 调整小组件外观，例如大小、对齐方式或颜色。
- 在不同设备上测试：使用 Webflow 的响应式设计工具，确保小组件能在桌面设备、平板电脑和移动设备上流畅运行。
- 重复使用小组件：如果计划在多个页面使用小组件，可将 Embed Element 保存为 Component。这样能保持样式一致，也更易于管理。
总结
借助平台的 Embed Element 和 Custom Code 功能，将 ElevenLabs 对话式 AI 小组件集成到 Webflow 非常简单。无论是想提升单个页面还是整个网站的互动效果，都可以按照上述步骤开始。
如需进一步帮助，欢迎联系 ElevenLabs 支持团队，或浏览 Webflow 社区论坛获取更多指导。
如果还没有账户，今天就注册 ElevenLabs AI Agents Platform，立即开始。
