ElevenLabsの会話型AIウィジェットをWebflowサイトに追加する方法

カスタマーエクスペリエンスを向上させたいですか？会話型AIがお役に立ちます。WebflowサイトにElevenLabsの会話型AIを追加すれば、訪問者は自然な会話を通じて、まるでチームのメンバーと直接話しているかのような体験を得られます。 

このガイドでは、ElevenLabsの会話型AIウィジェットをWebflowサイトに追加し、カスタムHTMLとJavaScriptを使って統合する方法をご紹介します。

始める前に

始める前に、以下を用意してください。

1. Webflowアカウント：Embed Elementにアクセスするには、有効なCore、Growth、Agency、Freelancer Workspace、またはSite Planが必要です。
2. ElevenLabsアカウント：ElevenLabsで会話型AI音声エージェントを設定し、提供される埋め込みコード（< script >と< div >のスニペットを含む）をコピーしてください。
3. WebflowのDesignerに関する知識：WebflowでEmbed Elementを追加・編集する基本的な知識があると便利です。

手順ガイド

ステップ1：ElevenLabsウィジェットを準備する

1. ElevenLabsアカウントにログインします。
2. 会話型AIセクションに移動します。
3. 以下を含む埋め込みコードをコピーします。
4. • ウィジェットの機能を読み込むための< script >スニペット。
   • ページ上でウィジェットを表示する場所を指定する< div >スニペット。

ステップ2：Webflowページにウィジェットを追加する

特定のページにウィジェットを表示するには、Embed Elementを使用します。

1. DesignerでWebflowプロジェクトを開きます。
2. ウィジェットを表示したいページに移動します。
3. Elements PanelからEmbed Elementをページ上の任意の場所へドラッグします。
4. Embed Elementのコードエディターに、ElevenLabsの埋め込みコードに含まれる< div >スニペットを貼り付けます。
5. Save & Closeをクリックして変更を適用します。

注：Embed Elementは、Designer内でウィジェットのプレースホルダーとして機能します。実際のウィジェットは、サイトを公開した場合にのみレンダリングされます。

ステップ3：スクリプトをサイト全体に追加する

ウィジェットを正しく機能させるには、< script >スニペットをサイト全体に追加する必要があります。

1. Webflow Dashboardに移動し、Project Settingsを開きます。
2. Custom Codeタブに移動します。
3. < script >スニペットをFooter Codeセクションに貼り付けます。これにより、ウィジェットを使用するすべてのページでスクリプトが読み込まれます。
4. Save Changesをクリックします。

ステップ4：公開してテストする

1. サイトをWebflowのステージングドメインまたはカスタムドメインに公開します。
2. ブラウザでサイトを開き、ウィジェットが想定どおりに表示・動作することを確認します。

重要：カスタムコードはWebflowのDesignerではレンダリングされません。ウィジェットを実際に表示するには、サイトを公開する必要があります。

よくある問題とトラブルシューティング

統合の設定で お困りですか？ご安心ください。以下のヒントが役立ちます。

1. ウィジェットが表示されない

• 原因：< script >または< div >スニペットが不足しているか、配置が誤っています。
• 解決策：< script >スニペットがFooter Codeセクションにあり、< div >スニペットがEmbed Element内に正しく配置されていることを確認してください。

2. ウィジェットの位置ずれ

• 原因：Embed Elementの配置またはスタイルが正しくありません。
• 解決策：WebflowのStyle Panelを使用して、Embed Elementのサイズと配置を調整してください。

3. エラー

• 原因：他のスクリプトとの競合、またはブラウザの制限。
• 解決策：ブラウザのデベロッパーコンソールを使用して、JavaScriptエラーを特定・修正してください。

応用のヒント

ウィジェットのカスタマイズ、異なるデバイスでのテスト、複数ページでの再利用を検討している場合は、以下をご確認ください。

• ウィジェットのカスタマイズ：WebflowのStyle PanelまたはカスタムCSSを使用して、サイズ、配置、色などウィジェットの外観を調整します。
• 異なるデバイスでのテスト： Webflowのレスポンシブデザインツールを使用して、デスクトップ、タブレット、モバイルデバイスでウィジェットがスムーズに動作することを確認してください。
• ウィジェットの再利用：複数のページでウィジェットを使用する場合は、Embed ElementをComponentとして保存します。これにより、スタイルの一貫性を保ち、管理も簡単になります。

まとめ

WebflowのEmbed ElementとCustom Code機能を使えば、ElevenLabsの会話型AIウィジェットを簡単に統合できます。1つのページでもサイト全体でも、エンゲージメントを高めたい場合は、上記の手順に従って始めてください。

さらにサポートが必要な場合は、ElevenLabsのサポートまでお気軽にお問い合わせいただくか、Webflowのコミュニティフォーラムで追加のガイダンスをご確認ください。 

まだお済みでない場合は、今すぐ登録して、ElevenLabsのAIエージェントプラットフォームを活用しましょう。 

よくある質問