指南无代码

Webflow 中的 ElevenAgents

了解如何将 ElevenLabs 智能体部署到 Webflow

本教程将指导你将 ElevenLabs Agents 智能体添加到 Webflow 网站。

前提条件

  • 按照本指南创建的 ElevenLabs Agents 智能体
  • 拥有 Core、Growth、Agency 或 Freelancer Workspace（或 Site Plan）的 Webflow 账户
  • 熟悉 Webflow 的 Designer

指南

1

获取嵌入代码

访问 ElevenLabs 控制台，找到智能体的嵌入式小组件。

<elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
2

将小组件添加到页面

  1. 在 Designer 中打开 Webflow 项目
  2. 将 Embed Element 拖到所需位置
  3. 将 <elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai> 代码片段粘贴到 Embed Element 的代码编辑器中
  4. 选择 Save & Close
3

全局添加脚本

  1. 前往 Project Settings > Custom Code
  2. 将代码片段 <script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script> 粘贴到 Footer Code 部分
  3. 保存更改
  4. 发布网站以查看更改

注意：小组件仅会在发布网站后显示，不会在 Designer 中显示。

故障排除

如果小组件未出现，请确认：

  • <script> 代码片段位于 Footer Code 部分
  • <elevenlabs-convai> 代码片段已正确放置在 Embed Element 中
  • 更改后已发布网站

后续步骤

将 ElevenLabs 智能体添加到 Webflow 后，可以：

  1. 在 ElevenLabs 控制台中自定义小组件以匹配品牌
  2. 添加更多语言
  3. 添加工具和知识库等高级功能