ウェブ、モバイル、または電話でも、わずか数分でエージェントに音声を追加できます。私たちのリアルタイム API は、低レイテンシでフルカスタマイズが可能、さらにシームレスな拡張性を提供します。
Ghostのウェブサイトを次のレベルに引き上げたいですか？ElevenLabsのConversational AIは顧客エンゲージメントを変革します。GhostプラットフォームにElevenLabsの会話型AIを追加することで、インタラクティブでリアルな顧客サポートの会話を提供し、ブランドとの距離を縮めます。
始める前に
始める前に、以下を確認してください：
- Ghostのウェブサイト：有料プランまたはセルフホストのGhostインスタンスが必要です。Ghostの無料プランではカスタムJavaScriptはサポートされていません。
- Ghost管理パネルへのアクセス：コードインジェクション設定またはエディターへのアクセスが必要です。
- ElevenLabsアカウント：会話型AIエージェントを設定し、そのJavaScript埋め込みコードをコピーします。
ステップバイステップガイド
オプション1：コードインジェクションを使用してウィジェットを全ページに追加
ウェブサイトのすべてのページにウィジェットを表示したい場合は、Ghostのコードインジェクション機能を使用します。
ステップ1：ウィジェットを準備
- ElevenLabsアカウントにログインします。
- 会話型AIセクションに移動し、エージェントを設定します。
- 提供されたJavaScript埋め込みコードをコピーします。
ステップ2：コードインジェクション設定にアクセス
- Ghost管理パネルにログインします。
- 設定 > コードインジェクションに移動します。
ステップ3：JavaScriptコードを埋め込む
- コピーしたJavaScriptコードをサイトフッターのフィールドに貼り付けます。
- 変更を保存します。
ステップ4：統合をテスト
- Ghostのウェブサイトを開き、ウィジェットが表示され、期待通りに機能することを確認します。
- 表示されない場合は、コードの配置とElevenLabsの設定を再確認してください。
オプション2：特定のページや投稿にウィジェットを追加
特定のページや投稿にのみウィジェットを表示したい場合は、Ghostのエディターでプラス記号を使用してコンテンツに直接埋め込むことができます。
ステップ1：ウィジェットを準備
- ElevenLabsアカウントからJavaScript埋め込みコードをコピーします。
ステップ2：Ghostで投稿やページを編集
- ウィジェットを追加したいページや投稿のGhostエディターを開きます。
- プラス記号（+）をクリックしてブロックメニューを開きます。
ステップ3：HTMLブロックを挿入
- ブロックオプションからHTMLを選択します。
- HTMLブロックにJavaScriptコードを貼り付けます。
ステップ4：公開してテスト
- ページや投稿を保存して公開します。
- ページを開き、ウィジェットが表示され、期待通りに機能することを確認します。
一般的な問題とトラブルシューティング
統合が期待通りに動作しない場合は、以下の手順に従って問題を解決してください。
問題1：ウィジェットが読み込まれない
- 原因：JavaScriptコードが正しく追加されていないか、不完全です。
- 解決策：コードの配置を再確認し、ElevenLabsエージェントが正しく設定されていることを確認してください。
問題2：スクリプトの競合
- 原因：コードインジェクション設定内の他のカスタムスクリプトがウィジェットと競合している可能性があります。
- 解決策：他のスクリプトを一時的に無効にして競合をテストします。問題を特定するために一つずつ再追加します。
高度なヒント
ウィジェットをカスタマイズする方法をもっと探していますか？以下のヒントをご覧ください。
- ウィジェットの配置をカスタマイズ：CSSを使用して、コードインジェクションやHTMLブロックを通じて追加されたウィジェットの外観や位置を調整します。ウィジェットを一貫した場所（例：フッターやサイドバー）に表示したい場合は、Ghostテーマファイルを編集します。JavaScript埋め込みコードをdefault.hbsファイルに追加し、テーマを再アップロードします。
- モバイル対応：モバイルデバイスでウィジェットをテストし、適切にスケールし機能することを確認します。Ghostのレスポンシブプレビューを使用するか、実際のデバイスで直接テストします。
- クロスブラウザテスト：Chrome、Firefox、Safari、Edgeなどの人気ブラウザでウィジェットが動作することを確認し、すべてのユーザーに一貫性を持たせます。
- JavaScriptの問題をデバッグ：ブラウザのデベロッパーツール（例：Chrome DevTools）を使用して、コンソール内のエラーを確認します。依存関係の欠如やスクリプトの競合などの問題を修正します。
最終的な考え
ElevenLabsの会話型AIウィジェットをGhostに統合するのは簡単で柔軟です。少ない労力でウェブサイトのインタラクティビティを向上させることができます。問題が発生した場合は、手順を再確認し、徹底的にテストするか、必要に応じてElevenLabsのサポートに連絡してください。
サインアップして、会話型AIを始めましょう。
いいえ、プロセスは簡単です。プラス記号やコードインジェクションを使用してウィジェットを追加するのにコーディングの専門知識は必要ありません。
はい、GhostエディターのHTMLブロックを使用することで、特定のページや投稿にウィジェットを埋め込むことができます。
有料のGhostプランを使用していることを確認し、JavaScript埋め込みコードが正しく追加されているかを再確認してください。
ElevenLabsチームによる記事をもっと見る
ElevenLabsの会話型AIウィジェットをWebflowサイトに追加する方法
Webflowサイトに会話型AI機能を追加。
ElevenLabsの会話型AIウィジェットをWordPressサイトに追加する方法
WordPressサイトに会話型AI機能を追加する方法を学びましょう。