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

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

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

CONVERSATIONAL AI（会話型AI）

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

始める前に

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

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>スニペットを貼り付けます。
4. スニペットをすべてのページで実行するように設定します。
5. 変更を保存します。

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

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

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

1. ウィジェットを追加したページを訪問し、正しく表示され機能しているか確認します。
2. 複数のデバイスやブラウザでウィジェットをテストし、シームレスに動作することを確認します。

一般的な問題とトラブルシューティング

ウィジェットの設定に苦労していますか？これらのヒントが役立つかもしれません。

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

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

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

• 原因：ブロックの配置やスタイリングの欠如。
• 解決策：WordPressのブロック配置ツールを使用するか、カスタムCSSを追加してウィジェットを適切に配置します。

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

• 原因：他のプラグインがJavaScriptの実行を妨げている。
• 解決策：競合を特定するためにプラグインを一つずつ無効化します。

高度なヒント

ウィジェットを希望通りに動作させるための追加のヒントをチェックしてください。 

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

最終的な考え

ElevenLabsの会話型AIウィジェットをWordPressサイトに追加することは、AI駆動のインタラクションで訪問者を引き付ける効果的な方法です。単一ページに埋め込む場合でも、サイト全体にわたって埋め込む場合でも、WordPressはシームレスな統合のためのツールを提供します。

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

また、まだの場合は、ElevenLabsにサインアップしてプロセスを開始してください。