ガイドノーコード

WebflowでElevenAgentsを使用

ElevenLabsエージェントをWebflowにデプロイする方法

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

前提条件

  • このガイドに従って作成した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. WebflowプロジェクトをDesignerで開きます
  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. Save Changesをクリックします
  4. サイトを公開して変更を確認します

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

トラブルシューティング

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

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

次のステップ

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

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