ウェブ、モバイル、または電話でも、わずか数分でエージェントに音声を追加できます。私たちのリアルタイム API は、低レイテンシでフルカスタマイズが可能、さらにシームレスな拡張性を提供します。
ElevenLabsConversational AIウィジェットを使えば、FramerのウェブサイトにインタラクティブなAI駆動の会話を追加できます。例えば、顧客エンゲージメントを高めるやカスタマーサポートを強化するなど、会話型AIが役立ちます。
このガイドでは、Framerのウェブサイトにウィジェットを追加する手順を説明します。サイト全体または特定のページ用のウィジェットの設定方法や、一般的な問題のトラブルシューティングについて学びます。
始める前に
始める前に、以下を確認してください：
- Framerアカウント：カスタムコードを追加できるFramerプロジェクトへのアクセス（有料プランで利用可能）。
- ElevenLabsアカウント：会話型AIエージェントを設定し、埋め込みコードをコピー （< script >と< div >スニペットを含む）。
- Framerの基本知識：Framerのサイト設定と埋め込み要素の基本的な理解
ステップバイステップガイド
ステップ1：ElevenLabsウィジェットの準備
- ElevenLabsアカウントにログインします。
- 会話型AIセクションに移動します。
- AIエージェントを設定し、提供された埋め込みコードをコピーします。これには以下が含まれます：
- ウィジェットの機能を読み込むための< script >スニペット。
- ウィジェットが表示される場所を定義するための< div >スニペット。
ステップ2：Framerのサイト設定にスクリプトを追加
- Framerプロジェクトを開きます。
- 右上のプロジェクト設定をクリックします。
- 一般タブに移動し、カスタムコードセクションまでスクロールします。
- ElevenLabsの埋め込みコードから< script >スニペットを< body >タグの終了フィールドに貼り付けます。
- 変更を保存します。このステップで、必要なスクリプトがサイトに読み込まれることを確認します。
ステップ3：特定のページにウィジェットを追加
- Framerプロジェクトで、ウィジェットを表示したいページに移動します。
- 挿入メニューのユーティリティセクションから埋め込み要素を追加します。
- キャンバス上の埋め込み要素を選択して設定にアクセスします。
- タイプをHTMLに切り替えます。
- ElevenLabsの埋め込みコードから< div >スニペットをHTMLフィールドに貼り付けます。
- キャンバス上で埋め込み要素の位置とサイズを必要に応じて調整します。
ステップ4：公開とテスト
- 公開をクリックして変更を反映させます。
- ブラウザでウェブサイトを開き、ウィジェットが正しく表示され、機能しているか確認します。
- 注意：カスタムコードはFramerのプレビューモードでは表示されません。公開して確認してください。
一般的な問題とトラブルシューティング
統合がうまくいかない場合は、以下のトラブルシューティングのヒントを確認してください。
問題1：ウィジェットが表示されない
- 原因：< script >または< div >スニペットが欠落しているか、正しく配置されていない。
- 解決策：< script >スニペットがサイト設定の< body >タグの終了フィールドに追加され、< div >スニペットが埋め込み要素にあることを確認してください。
問題2：ウィジェットが部分的にしか表示されない
- 原因：埋め込み要素のサイズや位置が不適切。
- 解決策：Framerエディターで埋め込み要素の寸法と配置を調整してください。
問題3：スクリプトエラー
- 原因：スクリプトの競合や外部リソースのブロック。
- 解決策：ブラウザコンソールを開いてJavaScriptエラーを確認します。Framerが外部スクリプトを読み込む権限を持っていることを確認してください。
高度なヒント
より高度なカスタマイズオプションをお探しですか？これらのヒントが役立ちます。
- ウィジェットのカスタマイズ：カスタムCSSを使用してウィジェットをスタイリングし、ウェブサイトのデザインにシームレスに統合します。
- デバイス間でのテスト：Framerのレスポンシブデザインツールを使えば、モバイル、タブレット、デスクトップビューでウィジェットをテストし、適切なスケーリングを確認できます。
- 特定のページへのウィジェット追加：特定のページにのみウィジェットを含めるには、< div >スニペットを目的のページの埋め込み要素に追加し、< script >スニペットがサイト設定にあることを確認してください。
最終的な考え
このガイドに従うことで、Framerサイトを動的でAI駆動のインタラクションで強化し、オーディエンスのニーズに合わせることができます。変更を公開し、設定をテストし、会話型AIが訪問者と交流を始めるようにしましょう。さらなるサポートが必要な場合は、ElevenLabsのサポートにお問い合わせください。
サインアップして、会話型AIを今日から始めましょう。
ウェブ、モバイル、または電話でも、わずか数分でエージェントに音声を追加できます。私たちのリアルタイム API は、低レイテンシでフルカスタマイズが可能、さらにシームレスな拡張性を提供します。
いいえ。このプロセスは、Framerの適切なフィールドにコードをコピー＆ペーストするだけです。
Framerはプレビューモードでカスタムコードをレンダリングしません。サイトを公開してウィジェットを確認してください。
はい。特定のページに埋め込み要素を追加し、それぞれに独自の< div >スニペットを設定してください。
もっと見る
ElevenLabsの会話型AIウィジェットをWebflowサイトに追加する方法
Webflowサイトに会話型AI機能を追加。
ElevenLabsの会話型AIウィジェットをWordPressサイトに追加する方法
WordPressサイトに会話型AI機能を追加する方法を学びましょう。