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

想提升客户体验？对话式 AI 可以帮忙。将 ElevenLabs 的对话式 AI 添加到 Webflow 网站后，访客可以进行自然的对话，就像在和团队成员交流一样。

本指南将带你一步步完成在 Webflow 网站添加 ElevenLabs 对话式 AI 小组件的流程，并通过自定义 HTML 和 JavaScript 集成小组件。

开始前准备

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

1. Webflow 账户：需要开通 Core、Growth、Agency 或 Freelancer 工作区，或拥有站点套餐，才能使用嵌入元素。
2. ElevenLabs 账户：在 ElevenLabs 配置对话式AI 语音智能体，并复制提供的嵌入代码（包含 < script > 和 < div > 片段）。
3. 熟悉 Webflow Designer：了解如何在 Webflow 添加和编辑嵌入元素会更方便操作。

操作步骤

步骤 1：准备 ElevenLabs 小组件

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

步骤 2：将小组件添加到 Webflow 页面

如需在指定页面显示小组件，请使用嵌入元素。

1. 在 Designer 打开 Webflow 项目。
2. 进入需要显示小组件的页面。
3. 在元素面板中，将嵌入元素拖到页面指定位置。
4. 在嵌入元素的代码编辑器中，粘贴 ElevenLabs 嵌入代码中的 < div > 片段。
5. 点击“保存并关闭”应用更改。

注意：嵌入元素在 Designer 中仅作为小组件的占位符。实际小组件需发布网站后才会显示。

步骤 3：全站添加脚本

为确保小组件正常运行，需要将 < script > 片段全站添加。

1. 进入 Webflow 控制台，打开项目设置。
2. 进入自定义代码标签页。
3. 将 < script > 片段粘贴到页脚代码区域。这样可确保所有使用小组件的页面都能加载脚本。
4. 点击“保存更改”。

步骤 4：发布并测试

1. 将网站发布到 Webflow 的测试域名或自定义域名。
2. 在浏览器中打开网站，确认小组件正常显示和运行。

重要提示：自定义代码不会在 Webflow Designer 中渲染。需发布网站后才能看到小组件效果。

常见问题与排查

遇到 集成设置问题？别担心，下面这些方法可以帮你解决。

1. 小组件未显示

• 原因：< script > 或 < div > 片段缺失或放置位置不正确。
• 解决方法：确保 < script > 片段已放在页脚代码区域，< div > 片段正确放在嵌入元素中。

2. 小组件位置不对齐

• 原因：嵌入元素放置或样式设置不正确。
• 解决方法：可通过 Webflow 样式面板调整嵌入元素的尺寸和对齐方式。

3. 报错

• 原因：与其他脚本冲突或浏览器限制。
• 解决方法：可用浏览器开发者工具查找并修复 JavaScript 报错。

进阶技巧

如需自定义小组件、在不同设备测试，或在多个页面复用小组件，可参考以下内容。

• 自定义小组件：可用 Webflow 样式面板或自定义 CSS 调整小组件外观，如尺寸、对齐或颜色。
• 不同设备测试：可用 Webflow 响应式设计工具，确保小组件在桌面、平板和手机端都能正常显示。
• 复用小组件：如需在多个页面使用小组件，可将嵌入元素保存为组件，便于统一样式和管理。

结语

借助 Webflow 的嵌入元素和自定义代码功能，集成 ElevenLabs 对话式 AI 小组件非常简单。不论是单页还是全站提升互动体验，按上述步骤操作即可。

如需进一步协助，欢迎联系 ElevenLabs支持团队，或在 Webflow 社区论坛获取更多帮助。

如果还没有账号，立即注册 ElevenLabsAI 智能体平台，马上开始体验。

常见问题