> 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.

# WebflowでElevenAgentsを使用

このチュートリアルでは、ElevenLabs AgentsエージェントをWebflowのWebサイトに追加する方法を説明します。

## 前提条件

* [このガイド](/docs/ja/eleven-agents/quickstart)に従って作成したElevenLabs Agentsエージェント
* Core、Growth、Agency、またはFreelancer Workspace（またはSite Plan）のWebflowアカウント
* Webflow Designerの基本的な知識

## ガイド

#### 埋め込みコードを取得

[ElevenLabsダッシュボード](https://elevenlabs.io/app/agents)にアクセスし、エージェントの埋め込みウィジェットを見つけます。

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

#### ページにウィジェットを追加

1. WebflowプロジェクトをDesignerで開きます
2. Embed Elementを目的の場所にドラッグします
3. `<elevenlabs-convai agent-id="YOUR_AGENT_ID"></elevenlabs-convai>`スニペットをEmbed Elementのコードエディターに貼り付けます
4. Save & Closeをクリックします

#### スクリプトをグローバルに追加

1. Project Settings > Custom Codeに移動します
2. `<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>`スニペットをFooter Codeセクションに貼り付けます
3. Save Changesをクリックします
4. サイトを公開して変更を確認します

注：ウィジェットはDesignerではなく、サイトの公開後にのみ表示されます。

## トラブルシューティング

ウィジェットが表示されない場合は、以下を確認してください：

* `<script>`スニペットがFooter Codeセクションにある
* `<elevenlabs-convai>`スニペットがEmbed Elementに正しく配置されている
* 変更後にサイトを公開している

## 次のステップ

ElevenLabsエージェントをWebflowに追加したら、次のことができます：

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