> 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のWebサイトに追加する方法を説明します。

## 前提条件

* [このガイド](/docs/ja/eleven-agents/quickstart)に従って作成したElevenLabs Agentsエージェント
* FramerアカウントとWebサイト（[こちら](https://framer.com)から作成）

![Convai Framerのプロジェクト例](/docs/_fern-img/a0681bdfc73398af1391e381bc11f8d450a4eea0788991bc418f83ac6490c34f.webp)

## ガイド

#### Framerエディターにアクセス

FramerエディターでWebサイトを開き、左側のメインデスクトップをクリックします。

#### ElevenAgentsコンポーネントを追加

ElevenLabsエージェントを追加したいページに、以下のURLをコピー＆ペーストします。

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

左側の「Layers」バーにElevenAgentsアセットが表示され、右側にElevenAgentsコンポーネントの詳細が表示されます。

#### エージェントの詳細を入力

右側のバーにエージェントIDを入力して、ElevenLabsエージェントを有効にします。
エージェントIDは[ElevenLabsダッシュボード](https://elevenlabs.io/app/agents)で確認できます。

問題が発生した場合は、レイヤーパネルでElevenAgentsコンポーネントがデスクトップコンポーネントの下に配置されていることを確認してください。

![Convai Framerのプロジェクト例](/docs/_fern-img/17f4e7b2bbc3ebafadb1b705e6c963c6900ae162236b39feff2c6839654cf4f9.webp)![Convai Framerのプロジェクト例](/docs/_fern-img/fcb5867e142022ca7ebc3aba3904fffc7ce0f4ddca716e2c7bac38012e2e1641.webp)

## 次のステップ

ElevenLabsエージェントをFramerのWebサイトに追加したら、以下を行えます。

1. ElevenLabsダッシュボードでウィジェットをブランドに合わせてカスタマイズする
2. 追加の言語を追加する
3. ツールやナレッジベースなどの高度な機能を追加する