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

ElevenLabsの会話型AIは、強力なカスタマーサポートツールです。インタラクティブでAIを活用した体験を作り、エンゲージメントを高めます。WordPressサイトをお持ちなら、ElevenLabsの会話型AIのような動的機能を含むカスタムHTMLやJavaScriptを簡単に統合できます。

このガイドでは、特定のページにはカスタムHTMLブロックを、サイト全体の機能にはコードインジェクションを使用して、WordPressサイトに会話型AIウィジェットを追加する方法をご紹介します。

始める前に

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

1. WordPressプラン：WordPress.comユーザーがカスタムJavaScriptを追加するには、ビジネスまたはコマースプランが必要です。セルフホスト型WordPressユーザーは、こうした制限なしでコードを追加できます。
2. ElevenLabsアカウント：ElevenLabsで会話型AI音声エージェントを設定し、< script >と< div >のスニペットを含む埋め込みコードをコピーします。
3. 基本的なWordPressの知識：ブロックの追加、ページの編集、プラグインの使用に慣れていると便利です。

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

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

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

ステップ2：カスタムHTMLブロックを使って特定のページにウィジェットを追加する

特定のページにウィジェットを表示するには、WordPressのカスタムHTMLブロックを使用します。

1. WordPressダッシュボードにログインします。
2. 「ページ」に移動し、新しいページを作成するか既存のページを編集します。
3. ＋アイコンをクリックして、新しいブロックを追加します。
4. ブロックのオプションから「カスタムHTML」を検索して選択します。
5. ElevenLabsの埋め込みコードにある< div >スニペットをブロックに貼り付けます。
6. 「プレビュー」をクリックし、ウィジェットが正しく表示されることを確認します。
7. ページを公開または更新して、変更を反映します。

ステップ3：プラグインまたはテーマ設定を使ってスクリプトをグローバルに追加する

ウィジェットを正しく機能させるには、< script >スニペットをグローバルに含める必要があります。

オプションA：プラグインを使用する（デベロッパー以外に推奨）

1. Header Footer Code Managerなどのプラグインをインストールして有効化します。
2. プラグイン設定に移動し、新しいコードスニペットを作成します。
3. < script >スニペットを「Footer」セクションに貼り付けます。
4. スニペットが「All Pages」で実行されるように設定します。
5. 変更を保存します。

オプションB：テーマにスクリプトを直接追加する

1. WordPressダッシュボードで「外観」＞「テーマエディター」に移動します。
2. 有効なテーマのfooter.phpファイルを開きます。
3. 閉じタグ< /body >の直前に< script >スニペットを貼り付けます。
4. ファイルを保存します。

ステップ4：公開してテストする

1. ウィジェットを追加したページにアクセスし、正しく表示・動作することを確認します。
2. 複数のデバイスとブラウザでウィジェットをテストし、問題なく動作することを確認します。

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

ウィジェットをうまく起動できませんか？以下のヒントが役立つかもしれません。 

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

• 原因：< script >または< div >スニペットがない、または配置が誤っています。
• 解決策：< script >がグローバルに追加され、< div >がページ上に配置されていることを再確認してください。

問題2：ウィジェットの位置がずれている

• 原因：ブロックの配置設定、またはスタイリングの不足。
• 解決策：WordPressのブロック配置ツールを使うか、カスタムCSSを追加してウィジェットを適切に配置してください。

問題3：プラグインの競合

• 原因：他のプラグインがJavaScriptの実行を妨げています。
• 解決策：プラグインを1つずつ無効化して、競合の原因を特定してください。

高度なヒント

ウィジェットを希望どおりに動作させるために、以下のヒントもご確認ください。 

• ウィジェットのカスタマイズ：WordPressの「カスタマイズ」＞「追加CSS」セクションを使用してウィジェットをスタイリングし、サイトのデザインに合わせます。
• デバイス間でのテスト：デスクトップ、タブレット、モバイルデバイスでウィジェットをテストし、一貫したユーザー体験を提供できることを確認します。
• ページ固有のウィジェット：特定のページにのみウィジェットを表示したい場合は、< script >スニペットをグローバルに追加しないでください。代わりに、それらのページを対象とするプラグインまたはブロック内に含めます。

まとめ

ElevenLabs会話型AIウィジェットをWordPressサイトに追加すれば、AIを活用したインタラクションで訪問者を効果的に引き付けられます。単一のページに埋め込む場合でもサイト全体に導入する場合でも、WordPressにはシームレスに統合するためのツールが用意されています。

ここで紹介した手順に従い、実装を十分にテストして、必要に応じて調整してください。問題が発生した場合は、ElevenLabsサポートまでお気軽にお問い合わせください。

まだお済みでない場合は、今すぐ登録して、ElevenLabs Agents Platformで始めましょう。