> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# 在 Framer 中使用 ElevenAgents

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

## 前提条件

* 按照[本指南](/docs/zh/eleven-agents/quickstart)创建的 ElevenLabs Agents 智能体
* Framer 账户和网站，可在[此处](https://framer.com)创建

![Convai Framer 示例项目](/docs/_fern-img/a0681bdfc73398af1391e381bc11f8d450a4eea0788991bc418f83ac6490c34f.webp)

## 指南

#### 访问 Framer 编辑器

在 Framer 编辑器中打开网站，然后点击左侧的主桌面视图。

#### 添加 ElevenAgents 组件

将以下 URL 复制并粘贴到要添加 ElevenLabs 智能体的页面中：

```
https://framer.com/m/ConversationalAI-iHql.js@y7VwRka75sp0UFqGliIf
```

现在，左侧“图层”栏中会显示 ElevenAgents 资源，右侧会显示 ElevenAgents 组件详情。

#### 填写智能体详情

在右侧栏中填写智能体 ID，以启用 ElevenLabs 智能体。
可在 [ElevenLabs 控制台](https://elevenlabs.io/app/agents)中找到智能体 ID。

遇到问题？请确保 ElevenAgents 组件位于图层面板中桌面组件的下方。

![Convai Framer 示例项目](/docs/_fern-img/17f4e7b2bbc3ebafadb1b705e6c963c6900ae162236b39feff2c6839654cf4f9.webp)![Convai Framer 示例项目](/docs/_fern-img/fcb5867e142022ca7ebc3aba3904fffc7ce0f4ddca716e2c7bac38012e2e1641.webp)

## 后续步骤

将 ElevenLabs 智能体添加到 Framer 网站后，可以：

1. 在 ElevenLabs 控制台中自定义小组件，使其符合品牌风格
2. 添加更多语言
3. 添加工具和知识库等高级功能。