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

Squarespaceサイトでエンゲージメントを高め、次のレベルのカスタマーサポートを提供したいですか？ElevenLabsのConversational AIが役立ちます。

このガイドでは、Squarespaceサイトにウィジェットを追加する手順を説明します。特定のページやサイト全体に追加したい場合でも対応しています。また、よくある問題とその解決方法も紹介します。

始める前に

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

1. Squarespaceアカウント：ビジネスまたはコマースプランへのアクセスが必要です。これらのプランでは、コードブロックとコードインジェクションが使用できます。
2. ElevenLabsアカウント：ElevenLabsで会話型AIエージェントを設定し、埋め込みコード（< script >と< div >スニペットを含む）をコピーします。
3. Squarespaceの基本知識：ブロックの追加やコードインジェクション設定の基本的な知識。

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

ステップ1: ElevenLabsウィジェットの準備

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

ステップ2: コードブロックを使ってウィジェットを追加

特定のページやブログ投稿にウィジェットを追加したい場合は、コードブロックを使用します。

1. ウィジェットを表示したいSquarespaceのページまたは投稿に移動します。
2. +記号をクリックしてブロックを追加します。
3. メニューからコードを選択します。
4. ElevenLabsの埋め込みコードから< div >スニペットをコードブロックに貼り付けます。
5. ブロックを保存し、ページ上で正しく配置されていることを確認します。

ステップ3: コードインジェクションを使ってスクリプトを追加

ウィジェットが正しく機能するように、< script >スニペットをコードインジェクションで追加する必要があります。

1. Squarespaceダッシュボードから、設定 > 高度な設定 > コードインジェクションに移動します。
2. フッターセクションに< script >スニペットを貼り付けます。
3. 変更を保存します。

注: フッターセクションは、スクリプトがすべてのページで読み込まれることを保証し、コードブロックを介して追加されたウィジェットの機能を有効にします。

ステップ4: 公開とテスト

1. ウィジェットを追加したページまたは投稿を公開します。
2. ライブサイトを開いて、ウィジェットが正しく表示され、機能していることを確認します。重要: カスタムコードはSquarespaceのエディタプレビューに表示されないことが多いので、統合をテストするにはページを公開してください。

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

統合がうまくいかない場合でも心配しないでください。これらのヒントが役立ちます。

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

• 原因: < script >または< div >スニペットが欠落しているか、誤った位置に配置されています。
• 解決策: < script >スニペットがフッターコードインジェクションセクションにあり、
  スニペットがコードブロックに正しく追加されていることを確認します。

問題2: ウィジェットが部分的にしか表示されない

• 原因: コードブロックのサイズやレイアウトの競合。
• 解決策: ブロックのサイズと配置を調整します。必要に応じてカスタムCSSを使用して正確な配置を行います。

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

• 原因: スクリプトの競合やブラウザの制限。
• 解決策: ブラウザコンソール（例: Chrome DevTools）を使用してエラーを特定します。スクリプトの競合を解決するか、CORSの問題を確認します。

高度なヒント

より高度なカスタマイズオプションをお探しですか？以下のヒントをご覧ください。

• ウィジェットのカスタマイズ: Squarespaceのデザイン > カスタムCSSセクションでカスタムCSSを使用してウィジェットをスタイルします。色、フォント、配置を調整してサイトのデザインに合わせます。
• デバイス間でのテスト: 異なるデバイス（デスクトップ、タブレット、モバイル）でサイトをテストし、ウィジェットがすべての画面サイズで正しくスケールし、機能することを確認します。
• 複数ページへのウィジェット追加: 複数のページにウィジェットを含めるには、各ページでコードブロックのプロセスを繰り返し、スクリプトがコードインジェクションフッターでアクティブであることを確認します。

最終的な考え

ElevenLabsの会話型AIウィジェットをSquarespaceサイトに追加することは、インタラクティブ性とエンゲージメントを向上させる簡単な方法です。単一ページに埋め込む場合でも、サイト全体に埋め込む場合でも、Squarespaceのコードブロックとコードインジェクション機能により、統合はシームレスです。

このガイドに従ってステップバイステップで設定をテストし、ウェブサイトで会話型AIの利点を楽しんでください。さらにサポートが必要な場合は、ElevenLabsサポートにお問い合わせください。

または、まだの場合は、今すぐ会話型AIにサインアップしてください。