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

ElevenLabsの会話型AIウィジェットを使えば、インタラクティブなAI搭載の会話機能でFramerウェブサイトを強化できます。顧客エンゲージメントの向上やカスタマーサポートの強化を目指す場合に、会話型AIが役立ちます。 

このガイドでは、Framerウェブサイトにウィジェットを追加する手順を解説します。サイト全体またはページごとのウィジェットの設定方法と、よくある問題のトラブルシューティング方法を学べます。

始める前に

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

1. Framerアカウント：カスタムコードを追加できるFramerプロジェクトへのアクセス（有料プランで利用可能）。
2. ElevenLabsアカウント：会話型AIエージェントを設定し、埋め込み コード（< script >および< div >スニペットを含む）をコピーします。
3. Framerの基本知識：Framerのサイト設定と埋め込み要素に関する基本的な理解

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

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

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

ステップ2：スクリプトをFramerのサイト設定に追加する

1. Framerプロジェクトを開きます。
2. 右上にある「Project Settings」をクリックします。
3. 「General」タブに移動し、「Custom Code」セクションまでスクロールします。
4. ElevenLabsの埋め込みコードにある< script >スニペットを、「End of < body > tag」フィールドに貼り付けます。
5. 変更を保存します。これにより、サイトで必要なスクリプトが読み込まれます。

ステップ3：特定のページにウィジェットを追加する

1. Framerプロジェクトで、ウィジェットを表示したいページに移動します。
2. 「Insert」メニューの「Utilities」セクションから「Embed Element」を追加します。
3. キャンバス上の「Embed Element」を選択して、設定を開きます。
4. 「Type」をHTMLに変更します。
5. ElevenLabsの埋め込みコードにある< div >スニペットをHTMLフィールドに貼り付けます。
6. 必要に応じて、キャンバス上で「Embed Element」の位置とサイズを調整します。

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

1. 「Publish」をクリックして変更を公開します。
2. ブラウザでウェブサイトを開き、ウィジェットが表示されて正しく動作することを確認します。
3. • 注：カスタムコードはFramerのプレビューモードでは表示されません。確認するには公開が必要です。

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

インテグレーションがうまく動作しなくても、ご心配なく。以下のトラブルシューティングのヒントをご確認ください。 

問題1：ウィジェットが表示されない

• 原因：< script >または< div >スニペットがない、または配置が正しくない。
• 解決方法：< script >スニペットが「Site Settings」の「End of < body > tag」フィールドに追加され、< div >スニペットが「Embed Element」内にあることを確認してください。

問題2：ウィジェットが一部しか表示されない

• 原因：「Embed Element」のサイズまたは位置が正しくない。
• 解決方法：Framerエディターで「Embed Element」のサイズと配置を調整してください。

問題3：スクリプトエラー

• 原因：競合するスクリプト、またはブロックされた外部リソース。
• 解決方法：ブラウザコンソールを開き、JavaScriptエラーを確認してください。Framerに外部スクリプトを読み込む権限があることを確認してください。

高度なヒント

より高度なカスタマイズオプションをお探しですか？以下のヒントが役立ちます。 

• ウィジェットのカスタマイズ：カスタムCSSを使ってウィジェットをスタイリングし、ウェブサイトのデザインに自然に統合できます。
• デバイス間でのテスト：Framerのレスポンシブデザインツールを使えば、モバイル、タブレット、デスクトップビューでウィジェットを簡単にテストし、適切に拡大・縮小されることを確認できます。
• 特定のページへのウィジェット追加：特定のページだけにウィジェットを追加するには、対象ページの「Embed Element」に< div >スニペットを追加し、< script >スニペットが「Site Settings」にあることを確認してください。

最後に 

このガイドに従えば、オーディエンスのニーズに合わせた動的なAI搭載インタラクションでFramerサイトを強化できます。変更を公開して設定をテストし、会話型AIで今日から訪問者との対話を始めましょう。さらにサポートが必要な場合は、ElevenLabsサポートまでお問い合わせください。

登録して、AI音声エージェントを今すぐ始めましょう。