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

ElevenLabsのカスタマーサポートとエンゲージメントを高めるために、WixウェブサイトへElevenLabsの会話型AIの追加をお考えですか？こちらが最適なガイドです。このガイドでは、よくある落とし穴を避けながら、プロセス全体を手順ごとに説明します。

始める前に

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

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

手順ガイド

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

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

ステップ2：WixでDev Modeを有効にする

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

注意：Dev Modeが表示されない場合は、Wix ADI（Artificial Design Intelligence）ではなく、完全版の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. 「Console」タブに移動し、ウィジェットに関連するエラーメッセージを確認します。
4. エラーが表示された場合は、JavaScript埋め込みコードを照合し、必要なすべてのURLが許可リストに追加されていることを確認してください。この方法では、依存関係の不足や、ウィジェットの正常な動作を妨げるその他の問題も特定できます。

まとめ

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

まだ登録していない場合は、今すぐ会話型登録して、AIエージェントプラットフォームを始めましょう。