ウェブサイト検索

GenAIを使用してあなたのGhostウェブサイトにチャットボットを追加する

紹介

Ghostは、公開とブログに焦点を当てたオープンソースのコンテンツ管理システム（CMS）です。コンテンツ作成のためのミニマリストインターフェースを提供します。軽量で高速であり、ブロガーや出版社のために設計されています。

使用例：ブログ、ニュースウェブサイト、およびコンテンツ重視のサイト。

あなたのウェブサイトにチャットボットを導入することで、ユーザーのインタラクションやエンゲージメントを大幅に向上させることができます。24時間365日対応のカスタマーサポートを提供したり、リードを生成したり、ユーザーをサイト内で案内したりすることを望んでいる場合、チャットボットは貴重な追加機能となるでしょう。このチュートリアルでは、既存のGhostで運営されているウェブサイトにDigitalOcean GenAIチャットボットを統合する方法をお示しします。これは、シンプルなスクリプトを使用して任意のウェブサイトに容易に統合できるAI搭載のチャットボットプラットフォームです。

さまざまな方法、コードインジェクション、プラグイン、直接テーマファイルの編集を含む、チャットボットを追加する手順を説明します。ここでは、エージェントに明確な指示を提供し、どのように応答するかをトレーニングできます。

これらの指示はエージェントのタスク、トーン、行動を定義し、精度を向上させます。ナレッジベース（KB）には、エージェントがより正確な応答のために関連情報を取得するのに役立つ文書、FAQ、およびガイドが含まれることがあります。

DigitalOcean GenAIプラットフォームは、GPUパワーのインフラ上でAIエージェントを構築するための強力な提供です。これは、基盤モデル、エージェントルート、ナレッジベース、リトリーバル強化生成（RAG）パイプラインを使用してAIアプリケーションを作成することを可能にします。このプラットフォームは、早期利用可能（EA）です。EAにサインアップして、こちらから始めてください。

ユースケース

ここでは、DigitalOcean GenAIを使用してあなたのGhostサイトにチャットボットを追加することで大きな影響を与えるいくつかのシナリオを紹介します:

  1. カスタマーサポート: 一般的な質問に即座に回答し、チームがオフラインのときでも24時間年中無休のカスタマーサポートを提供します。
  2. リードジェネレーション: 訪問者の名前、メールアドレス、電話番号などの情報を収集し、GenAIのインタラクティブフォームを使用して自動的にリードを特定します。
  3. 商品推薦: Eコマースのウェブサイトは、ユーザーの好みに基づいて製品を推薦するためにチャットボットを使用でき、コンバージョンの増加に貢献します。
  4. 予約スケジューリング: 医療機関、美容サロン、コンサルティングサービスなどのビジネスにおける予約の自動化。
  5. インタラクティブエンゲージメント: ユーザーがクイズ、調査、インタラクティブなコンテンツで参加し、サイトに長く留まるように促し、ユーザーエクスペリエンスを向上させましょう。

前提条件

DigitalOcean GenAI チャットボットをサイトに追加する前に、以下の要件を満たしていることを確認してください：

  1. ライブウェブサイト: まだGhostを利用したウェブサイトをセットアップしていない場合、市場にはGhostの1クリックアプリがあり、これを使えばわずか2分で自分自身のGhostインスタンスをホストして稼働させることができます。
  2. 管理者アクセス: Ghostサイトを設定するには、管理者アクセスが必要です。管理者インターフェースは <http://use_your_droplet_ip/ghost> にあります。
  3. DigitalOcean GenAI チャットボットスクリプト: DigitalOcean GenAI プラットフォームから提供される GenAI チャットボット統合スクリプトが必要です。このスクリプトは通常、エンドポイントを公開にした際にクラウドパネルに見つかる <script> タグの形で提供されます。GenAI エージェントとナレッジベースを作成および管理する方法については、詳細な情報がリンクに記載されています。

DigitalOcean GenAI チャットボットの追加

エージェントが外部アプリケーションに利用可能であることを保証します。エンドポイントがプレイグラウンドモードに設定されている場合、これはエージェントのルーティングなどの内部リソースへのアクセスを制限します。エンドポイントがパブリックに設定されている場合、エンドポイントは外部トラフィックにアクセス可能になります。

チャットボットの準備と設定が完了したら、エンドポイントを公開設定にします。そうすると、JavaScriptコードのスニペットが提供されます。例えば:

<script async
  src="https://agent-14066a373cb3ac799541-5kekp.ondigitalocean.app/static/chatbot/widget.js"
  data-agent-id="7ff110ef-9da8-11ef-bf8f-4e013e2ddde4"
  data-chatbot-id="ZoamtI2KXJusoNBYbbD5lgoWX2hLfH-J"
  data-name="ghostblog-chatbot Chatbot"
  data-primary-color="#031B4E"
  data-secondary-color="#E5E8ED"
  data-button-background-color="#0061EB"
  data-starting-message="Hello! How can I help you today?"
  data-logo="/static/chatbot/icons/default-agent.svg">
</script>

方法1: コードスニペットを使ってチャットボットを追加する

  • あなたのGhost管理ダッシュボードにログインします [yourwebsite/ghost]。
  • 設定に移動し、コードインジェクションを選択してください。
  • チャットボットのコードスニペットを「サイトのフッターのためのコード挿入」セクションのサイトフッターに貼り付けてください。

  • 保存をクリックしてください。

これにより、チャットボットウィジェットがあなたのウェブサイトのすべてのページに追加されます。ウェブサイトを開いて、チャットボットが表示され、期待通りに動作することを確認してください。

方法2：Ghostテーマを使用してチャットボットを追加する（default.hbsの編集）

チャットボットが表示される場所をより制御したい場合は、Ghostテーマのファイルを直接編集できます。

ステップ1：テーマファイルにアクセスする

  • あなたのGhost管理ダッシュボードに移動してください。
  • 設定 > デザインとブランディングに移動し、「カスタマイズ」をクリックします。
  • 下部に移動し、テーマの変更を選択して、インストール済みのテーマをダウンロードします。

  • ダウンロードしたテーマをコンピュータ上で解凍してください。

ステップ2: default.hbsにチャットボットコードを追加する

  • コードエディタ（例：VS Code）でdefault.hbsファイルを開いてください。
  • 閉じタグ </body> を見つけてください。
  • 閉じる </body> タグの直前にチャットボットのJavaScriptコードを貼り付けてください。

  • 変更を保存します。
  • テーマフォルダを .zip ファイルに再圧縮してください。

ステップ3：変更されたテーマをアップロードする

  • ゴースト管理ダッシュボードに戻る。
  • 設定 > デザイン > 高度な設定 > テーマをアップロードする に移動します。
  • 修正したテーマをアップロードしてください。
  • 新しいテーマをアクティブにしてください。

Ghostのウェブサイトをリフレッシュして、チャットボットが期待通りに表示されることを確認してください。

方法3: Ghostアプリを使用する（Dockerを使用した自己ホスト）

自己ホスト型のGhostブログ（特にDocker上で）を使用している場合は、Ghost AppsやDockerサービスを使用してカスタムスクリプトを追加できます。

  • サーバーにSSHで接続してください。
  • チャットボットスクリプトを含めるために、.envファイルまたはDocker構成ファイルを編集してください。
  • あなたのGhostインスタンスを再起動してください。

結論

DigitalOcean GenAIチャットボットをGhostウェブサイトに追加することは、訪問者と交流し、即座にサポートを提供する素晴らしい方法です。

この統合にはいくつかの重要な利点があります:

  • エンゲージメントの向上: 訪問者はチャットボットを通じてサポートにアクセスしたり、質問をすることが簡単にできます。
  • カスタマイズ: チャットボットの外観、初期メッセージ、色をあなたのサイトのブランディングに合わせて個別化できます。
  • シームレスなユーザー体験：チャットボットは適切なタイミングで読み込まれ、ユーザーにブラウジング体験を妨げることなく迅速な支援を提供します。

関連記事: