ブラックフライデー

引き換え

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

Wixサイトに会話型AIを追加する方法を学びましょう。

A speech bubble with a brain designed as a circuit board inside.

カスタマーサポートやエンゲージメントを向上させたいですか?ElevenLabsの会話型AIをWixサイトに追加することで実現できます。このガイドでは、ステップバイステップでプロセスを説明し、よくある落とし穴を避ける方法を紹介します。Conversational AIをWixサイトに追加する方法をお探しなら、こちらが最適です。このガイドでは、ステップバイステップでプロセスを説明し、よくある落とし穴を避ける手助けをします。

landing page

ウェブ、モバイル、または電話でも、わずか数分でエージェントに音声を追加できます。私たちのリアルタイム API は、低レイテンシでフルカスタマイズが可能、さらにシームレスな拡張性を提供します。

始める前に

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

  1. Wixプレミアムアカウント:カスタムJavaScriptの埋め込みはプレミアムプランでのみ利用可能です。
  2. ElevenLabsアカウント:会話型AI音声エージェントを作成するにはElevenLabsアカウントが必要です。AI音声エージェントこちらでサインアップ
  3. Devモードが有効なWixエディターへのアクセス:カスタムコードを追加するにはDevモードが必要です。

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

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

  1. ElevenLabsアカウントにログインします。
  2. 会話型AIセクションに移動します。
  3. 会話型エージェントを設定し、提供されたJavaScript埋め込みコードをコピーします。

ステップ2:WixでDevモードを有効にする

  1. Wixサイトをエディターで開きます。
  2. トップメニューのDevモードをクリックして、カスタムコードの追加などの高度な機能を有効にします。

注意:Devモードが表示されない場合は、Wix ADI(人工デザインインテリジェンス)ではなく、完全なWixエディターを使用していることを確認してください。

ステップ3:JavaScript埋め込みコードを追加

  1. Wixエディターで設定 > カスタムコードに移動します。
  2. + カスタムコードを追加をクリックします。
  3. ElevenLabsのJavaScriptコードを指定されたフィールドに貼り付けます。
  4. コードの適用先で、すべてのページ(またはウィジェット用の特定のページ)を選択します。
  5. 変更を保存して公開します。

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

Wixサイトに会話型AIウィジェットを追加する際に問題が発生しましたか?これらの簡単な手順で問題を解決してください。

問題1:ウィジェットが切断される、または読み込まれない

  • 原因:許可リストの設定が不正確、または無料のWixプランを使用している。
  • 解決策:サイトURLが許可リストから削除されているか、ElevenLabsダッシュボードで正しく設定されていることを確認してください。

問題2:JavaScriptが動作しない

  • 原因:JavaScriptコードが正しく追加されていない。
  • 解決策:JavaScriptがカスタムコードの正しいフィールドに貼り付けられていることを再確認してください。

問題3:無料のWixプラン

  • 原因:無料のWixプランではカスタムJavaScriptの埋め込みがサポートされていません。
  • 解決策:Wixプレミアムプランにアップグレードしてください。

高度なヒント

ウェブサイトの訪問者に最高の体験を提供したい場合は、これらの高度なベストプラクティスを確認してください。

許可リストの調整

コードを埋め込んでもウィジェットが動作しない場合は、次の手順に従ってください:

  1. ElevenLabsアカウントにログインします。
  2. 会話型AIエージェントの許可リスト設定に移動します。
  3. ウェブサイトのドメインが正しく追加されていることを確認します。問題が続く場合は、ドメインを許可リストから削除して再テストしてください。

ライブドメインでのテスト

ウィジェットはWixのプレビューモードでは正しく機能しない場合があります。サイトを公開し、ライブドメインでテストして期待通りに動作するか確認してください。

クロスブラウザ互換性テスト

ウィジェットがライブになったら、Chrome、Firefox、Edge、Safariなど複数のブラウザでテストしてください。JavaScriptの扱い方の違いにより、ブラウザ間で機能が異なる場合があります。

  1. 各ブラウザでウェブサイトを開きます。
  2. ウィジェットと対話し、その応答性を確認します。
  3. スタイルの崩れや機能のエラーなどの問題を探します。問題が発生した場合は、JavaScriptコードを確認するか、ElevenLabsサポートに問い合わせてください。

モバイル対応

多くのユーザーがスマートフォンやタブレットを介してウェブサイトにアクセスするため、ウィジェットがモバイルデバイスでシームレスに動作することを確認してください。

  1. Wixのモバイルエディターを使用してサイトのモバイルレイアウトをプレビューします。
  2. 実際のデバイスでウィジェットをテストし、その機能と使いやすさを確認します。
  3. 重なり合う要素やフォーマットの問題を確認します。調整が必要な場合は、Wixのモバイルデザインツールを使用して配置とサイズを最適化してください。

JavaScriptデバッグのヒント

ウィジェットが期待通りに動作しない場合、ブラウザの開発者ツールが問題の特定に役立ちます。

  1. ブラウザ(Chrome推奨)でサイトを開きます。
  2. ページ上で右クリックし、検証を選択してDevToolsを開きます。
  3. コンソールタブに移動し、ウィジェットに関連するエラーメッセージを探します。
  4. エラーが表示された場合、JavaScript埋め込みコードを確認し、必要なすべてのURLが許可リストに追加されていることを確認してください。この方法は、欠落している依存関係やウィジェットの機能を妨げる他の問題を特定するのにも役立ちます。

最終的な考え

ElevenLabsの会話型AIウィジェットをWixに統合するには、慎重な設定が必要ですが、適切な手順を踏めばすぐに稼働させることができます。Wixプレミアムプランを用意し、上記の手順に従い、必要に応じて一般的な問題をトラブルシューティングしてください。さらに問題が発生した場合は、ElevenLabsのサポートにお問い合わせください。

また、まだの場合は、サインアップして、会話型

landing page

ウェブ、モバイル、または電話でも、わずか数分でエージェントに音声を追加できます。私たちのリアルタイム API は、低レイテンシでフルカスタマイズが可能、さらにシームレスな拡張性を提供します。

ElevenLabsチームによる記事をもっと見る

ElevenLabs

最高品質のAIオーディオで制作を

無料で始める

すでにアカウントをお持ちですか? ログイン