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

お客様体験を向上させたいですかか？ElevenLabsの会話型AIをWebflowのウェブサイトに追加することで、訪問者はConversational AI自然な会話を、まるでチームのメンバーと話しているかのように楽しめます。 conversations as if they were actually speaking to a member of your team. 

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

始める前に

始める前に、以下を確認してください：

1. Webflowアカウント：Embed Elementにアクセスするには、Core、Growth、Agency、Freelancer Workspace、またはサイトプランが必要です。
2. ElevenLabsアカウント：ElevenLabsで会話型AIエージェントを設定し、提供された埋め込みコード（< script >と< div >スニペットを含む）をコピーします。
3. Webflowのデザイナーに慣れていること：WebflowでEmbed Elementを追加および編集する基本的な理解が役立ちます。

ステップバイステップガイド

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

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

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

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

1. Webflowプロジェクトをデザイナーで開きます。
2. ウィジェットを表示したいページに移動します。
3. Elements PanelからEmbed Elementをページの希望する場所にドラッグします。
4. Embed Elementのコードエディタに、ElevenLabsの埋め込みコードから< div >スニペットを貼り付けます。
5. 変更を適用するには「保存して閉じる」をクリックします。

注意：Embed Elementはデザイナー内でウィジェットのプレースホルダーとして機能します。実際のウィジェットはサイトが公開されたときにのみ表示されます。

ステップ3：スクリプトをグローバルに追加する

ウィジェットが正しく機能するように、< script >スニペットをサイト全体にグローバルに含める必要があります。

1. Webflowダッシュボードに移動し、プロジェクト設定を開きます。
2. カスタムコードタブに移動します。
3. フッターコードセクションに< script >スニペットを貼り付けます。これにより、ウィジェットが使用されるすべてのページでスクリプトが読み込まれます。
4. 変更を保存をクリックします。

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

1. サイトをWebflowのステージングドメインまたはカスタムドメインに公開します。
2. ブラウザでサイトを開き、ウィジェットが期待通りに表示され、機能するか確認します。

重要：カスタムコードはWebflowのデザイナーでは表示されません。ウィジェットをライブで見るにはサイトを公開する必要があります。

一般的な問題とトラブルシューティング

統合の設定に 問題がありますか？心配しないでください。以下のヒントが役立つはずです。

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

• 原因：< script >または< div >スニペットが欠落しているか、誤った場所にあります。
• 解決策：< script >スニペットがフッターコードセクションにあり、< div >スニペットがEmbed Elementに正しく配置されていることを確認してください。

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

• 原因：Embed Elementの配置やスタイリングが不適切です。
• 解決策：Webflowのスタイルパネルを使用して、Embed Elementの寸法と配置を調整してください。

3. エラー

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

高度なヒント

ウィジェットをカスタマイズしたり、異なるデバイスでテストしたり、複数のページで再利用したい場合、知っておくべきことがあります。

• ウィジェットのカスタマイズ：WebflowのスタイルパネルやカスタムCSSを使用して、ウィジェットの外観（サイズ、配置、色など）を調整します。
• 異なるデバイスでのテスト：Webflowのレスポンシブデザインツールを使用して、ウィジェットがデスクトップ、タブレット、モバイルデバイスでシームレスに動作することを確認します。
• ウィジェットの再利用：ウィジェットを複数のページで使用する予定がある場合、Embed Elementをコンポーネントとして保存します。これにより、一貫したスタイリングと簡単な管理が可能になります。

最終的な考え

ElevenLabsの会話型AIウィジェットをWebflowに統合するのは、プラットフォームのEmbed Elementとカスタムコード機能のおかげで簡単です。単一ページまたはサイト全体でエンゲージメントを向上させたい場合でも、上記の手順に従って開始してください。

さらなるサポートが必要な場合は、ElevenLabsのサポートにお問い合わせいただくか、Webflowのコミュニティフォーラムを探索して追加のガイダンスを得てください。

まだの場合は、ElevenLabsにサインアップしてプロセスを開始してください。

よくある質問