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

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

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

始める前に

始める前に、次のものを用意してください。

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

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

ステップ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のPreviewモードでは表示されません。確認するには公開が必要です。

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

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

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

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

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

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

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

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

高度なヒント

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

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

まとめ 

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

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