WebサイトにカスタムChatGPTを5分で追加する

Patryk Lasek
公開日 読了時間:約4分
5分でカスタムAI AgentをWebサイトに追加する記事のサムネイル

はじめに

このブログ記事では、カスタムAI AgentをWebサイト上で構築し、デプロイする方法を説明します。

これにより、ビジネスで次のことが可能になります。

  • 即時の24時間365日の回答により、Webサイトのエンゲージメントを高める
  • より多くのリードを自動的に獲得する
  • チームから反復的なサポート業務を切り離す

Quickchatのダッシュボードを使用してAI Agentを設定し、ビジネス知識を読み込ませ、シンプルなスニペットでサイトに埋め込みます。

仕組み

プロセスの概要は次のとおりです。

  1. テキストの貼り付け、ドキュメントのアップロード、またはWebサイトからのコンテンツのインポートにより、AI Agentに知識を提供します。
  2. AI Agentはこの情報を処理し、ビジネスに詳しいエキスパートになります。
  3. Webサイトにチャットウィジェットを埋め込み、訪問者が質問し、提供した知識に基づく正確な回答を即座に得られるようにします。

以下の手順に従ってください。全体の設定は5分もかからないはずです。

ステップ0 - アカウントなしで試す

まず動作を確認したい場合は、登録せずに一時的なAI Agentを生成できます。

  1. Quickchat AIデモページに移動します。
  2. Webサイト、ヘルプセンター、またはShopifyストアへのリンクを貼り付けます。
  3. 自分のコンテンツを使用してAI Agentがどのように応答するかをテストします。登録は不要です。

ドキュメントツールからAI Support Agentを構築する画面のスクリーンショット

ステップ1 - AgentのIdentityとPersonalityを定義する

Quickchat AIアカウントが必要です。こちらから登録してください。

Quickchat AIアプリにログインしたら、Identityタブに移動します。

  1. AgentにName(例: “Eco AI Agent”)と、その役割のDescription(例: “持続可能な暮らしについてアドバイスします”)を設定します。
  2. AI Personalityで、ブランドに合う話し方(classic、friendly、professional、playful)を選択します。
  3. Shopping Assistant や Support Agent のようなAI Professionを選択し、トーンと優先事項の指針にします。

ステップ2 - Knowledgeを追加する

Knowledge Baseタブに移動し、AI Agentにビジネスについて学習させます。いくつかの方法があります。

  • Enter text manually: FAQ、製品説明、ガイドラインを貼り付けます。
  • Upload documents: PDFまたはWordファイルを追加します。
  • Import web pages: URLを指定すると、Quickchatがコンテンツを取得します。開始する最速の方法です。

ページをインポートするには、Add Knowledgeをクリックし、Website → Single page importを選択し、URLを貼り付けてImportをクリックします。主要なページでこれを繰り返し、強固な基盤を構築します。

知識を追加または更新するたびに、Retrain AIボタンをクリックすることを忘れないでください。

ステップ3 - テストしてデプロイする

Agentのトレーニングが完了したら、AI Previewツールに移動して応答をテストします。提供したコンテンツに基づいて質問し、正確性とトーンを確認します。

公開する準備ができたら、次の手順を実行します。

  1. Channels → Your Website → Installに移動します。
  2. 提供された埋め込みコードスニペットをコピーします。
  3. WebサイトのHTMLで、閉じる</body>タグの前にコードを貼り付けます。

これで完了です。サイトにチャットバブルが表示されます。

ステップ4 - 外観をカスタマイズする

同じInstallタブで、ブランドに合わせてチャットウィジェットの外観をカスタマイズできます。

  1. primary and header colorsを設定します。
  2. AI Agent用のcustom avatarをアップロードします。
  3. バブルのサイズ、位置、ウィンドウ寸法、アニメーションスタイルを調整します。
  4. white-labelingを有効にして、Quickchat AIのブランディングを削除します。

訪問者がタップするランチャーから共有チャットページまで、すべての表示面のブランディングに関する完全な手順については、チャットウィジェットをホワイトラベル化する方法を最初から最後まで確認してください。

ステップ5 - 任意機能でAgentを強化する

ダッシュボードでより高度な機能を有効にできます。

  • Human Handoff: Capabilitiesセクションにあり、複雑な会話をAI Agentから人間のサポートチームへシームレスに転送できます。
  • Smart Lead Generation: Actionsタブで有効化すると、AIがユーザーの名前、メールアドレス、電話番号を尋ねる機会をインテリジェントに特定できます。
  • Advanced AI Actions: 技術者向けに、Custom Actionsを使用すると、AI Agentが外部システムをトリガーできます。たとえば、API呼び出しを通じて別のアプリでサポートチケットを作成できます。

ベストプラクティス

  • 高品質なコンテンツを提供する: AIの品質は、提供する情報の品質に依存します。正確で包括的なコンテンツを使用してください。
  • 明確なガイドラインを設定する: Identityタブのガイドラインセクションを使用して、Agentの範囲と望ましい動作を定義します。
  • 徹底的にテストする: AI Previewツールを使用して実際の質問を行い、正確性のためにKnowledge Baseを改善します。
  • Analyticsを監視する: ダッシュボードを確認してユーザー感情と人気のトピックを追跡し、その知見を使用してコンテンツを改善します。