> For the complete documentation index, see [llms.txt](https://docs.maiagent.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.maiagent.ai/maiagent-user-guide/ja/serve/choose-channel/web-chat.md). # Web Chat の概要 Web Chat の対話機能とインターフェースのカスタマイズを紹介し、企業のブランドに合った Web Chat サービスの構築方法を説明します ## 一、WebChat とは？ MaiAgent で作成した AI アシスタントをウェブサイトに埋め込み、リアルタイムのカスタマーサポートやその他の対話を提供できます。Web Chat は**レスポンシブデザインを採用しており、デスクトップ、タブレット、スマートフォンに柔軟に対応します。** 現在、MaiAgent では次の 3 種類の埋め込み方法を提供しています。 ### 1. ウェブサイトの右下に埋め込む * 公式サイトのサービスに埋め込み、サイト内蔵のインテリジェントアシスタントとして利用できます * 通常の閲覧を妨げず、必要なときにいつでも利用できます * 一般的なカスタマーサポートや相談サービスに適しています ### 2. 全画面で埋め込む * 完全な対話体験を提供します * 複雑な相談やサービスのワークフローに適しています * 企業のニーズに合わせてデザインをカスタマイズできます ### 3. MaiGPT ウィンドウモードで埋め込む * ChatGPT スタイルの完全な対話インターフェース（左側に対話履歴一覧、右側にメインの対話エリア）を、ページの主要 UI として直接埋め込めます * 指定したコンテナ内に常時表示するか、右下のフローティングボタンをクリックしたときに全画面で展開できます * AI ポータル、社内ナレッジポータル、製品の主要な対話インターフェースに適しています {% hint style="info" %} MaiGPT ウィンドウモードは、対話プラットフォーム設定の「埋め込み」ウィンドウで選択できます。詳しい設定手順は [MaiGPT ウィンドウモードの埋め込み](/maiagent-user-guide/ja/serve/choose-channel/web-chat/maigpt-embed.md)をご覧ください。 {% endhint %} この設計には、次のメリットがあります。 * **即時性**：訪問者は待たずに専門的な回答を得られ、ユーザー体験が向上します * **利便性**：右下のフローティング表示は通常の閲覧を妨げず、必要なときにいつでも利用できます * **費用対効果**：AI アシスタントが 24 時間 365 日対応し、人件費を大幅に削減します * **専門的な印象**：企業の技術力とサービス品質を示します ## 二、企業のブランドに合った Web Chat サービスの構築 MaiAgent では、ロゴ、アバター、対話のテーマカラーなどをカスタマイズでき、企業のブランドに合った Web Chat サービスを構築できます。次の機能を利用できます。 1. アシスタントの表示名を選択します 2. 企業のロゴをアップロードします 3. AI アシスタントのアバターを選択します 4. Web Chat のテーマカラーを選択します 5. AI アシスタントが返信する際のメッセージ背景色を選択しますこれらの機能で、独自の Web Chat の外観を作成できます。このように、企業のカラー要件に合わせて、ブランドに合った Web Chat サービスを構築できます。 Web Chat は対話の入力エリアの下にプラットフォームのブランドロゴを表示します。ログイン、登録、読み込み画面でもブランド画像の比率を統一し、圧縮や拡大による変形を防ぎます。

Web Chat 下部のブランドロゴは、鮮明さと縦横比を維持して表示されます

### ダークモードの改善 MaiAgent の Web Chat のダークモードは全面的に改善され、より快適な視覚体験を提供します。 **動的な色の調整** * テーマカラーの明るさを自動調整し、暗い背景でも見やすくします * テキストのコントラストを適切に調整し、読みやすさを保ちます * アイコンとボタンの色を改善し、ダークモードで目立つようにします **コントラストの改善** * メッセージ吹き出しの背景色を工夫し、視覚的な疲労を抑えます * リンクや重要な情報にコントラストの高い色を使用し、識別しやすくします * 入力欄とボタンの枠線の色を改善し、操作性を高めます **スムーズな切り替え** * ユーザーはいつでもライトモードとダークモードを切り替えられます * 切り替え時も対話内容と操作状態を維持します * システムはユーザーのテーマ設定を記憶しますダークモードは、特に次の場合に適しています。 * 夜間や暗い環境での利用です * 長時間の対話で、目の疲れを軽減したい場合です * 企業ブランドに合ったダークカラーのデザインを採用する場合です ## 三、メッセージのカスタマイズユーザーが初めて Web Chat サービスにアクセスしたときに表示する AI アシスタントの挨拶を、次のような場面に合わせて自由に設定できます。 ### **1. 最初の挨拶のカスタマイズ** #### **ブランドに合わせた挨拶** 「当サイトへようこそ！私はお客様専用のサポートアシスタントです」などの挨拶を設定し、企業の専門性と親しみやすい対応を伝えます。 #### **サービスを案内する挨拶** 「製品情報の検索、使い方に関するご質問、ご注文の手続きをお手伝いできます」などの挨拶を設定し、提供できるサービスの範囲を明確に示して、サービスへの信頼を高めます。 ### 2. 対話を始めるための質問 * 「対話開始の質問」をクイック選択肢として設定します * ユーザーは入力せずに、よくある質問をクリックできます * **質問の例**： * 「注文した商品を確認するには？」 * 「注文するには？」 * 「会員ポイントのルール」 * 「営業時間」ユーザーは開始質問をクリックして対話を始められるため、質問から回答までを短縮できます。 ## 生成中の回答を停止する質問を送信した後に内容の誤りに気付いても、AI アシスタントが回答全体を生成し終えるまで待つ必要はありません。回答の生成中は、入力欄の右側の送信ボタンが四角い停止ボタンに変わります。クリックすると今回の回答を停止でき、修正した質問を入力し直せます。例えば、カスタマーサポート担当者が AI アシスタントに年間の製品発表会の企画を依頼した後、イベントの予算を伝え忘れたことに気付いたとします。回答の生成中に停止をクリックし、予算と参加人数を追加して再度質問すれば、要件に合わない内容が生成し終わるのを待つ必要がありません。 ### 回答を停止する {% stepper %} {% step %} ### 1. 停止ボタンを見つける質問を送信した後、AI アシスタントが回答の生成を開始するまで待ちます。このとき、入力欄の右側に四角い停止ボタンが表示されます。

Web Chat の回答生成中に入力欄の右側に表示される四角い停止ボタン — 回答の生成中は入力欄の右側の停止ボタンをクリックできます

{% endstep %} {% step %} ### 2. 停止して再度質問する停止をクリックします。「回答を入力しています」の表示が消えたら、入力欄に修正した質問を入力して再送信できます。 {% endstep %} {% endstepper %} {% hint style="info" %} 停止するのは現在生成中の回答だけです。送信済みの質問や過去の対話履歴は削除されません。 {% endhint %} ## 四、多様な質問と回答のコンテンツ ### 1. 多言語サポートユーザーが使用する言語で回答し、コミュニケーションの障壁を取り除きます。 * **自動検出**：ユーザーの入力言語に基づいて、アシスタントの回答言語を選択します **手動での切り替え**： 1. Web Chat のインターフェースで言語を選択します。[多言語](https://docs.maiagent.ai/maiagent-user-guide/ja/serve/choose-channel/pages/HdP5GFY4QStHYYrNWxxb#id-2.-web-chat-liao-tian-she-ding)[サポート](https://docs.maiagent.ai/maiagent-user-guide/ja/serve/choose-channel/pages/HdP5GFY4QStHYYrNWxxb#id-2.-web-chat-liao-tian-she-ding)[：Web Chat のチャット設定](https://docs.maiagent.ai/maiagent-user-guide/ja/serve/choose-channel/pages/HdP5GFY4QStHYYrNWxxb#id-2.-web-chat-liao-tian-she-ding)をご覧ください。 2. Web Chat の初期化スクリプト（javascript）で AI アシスタントの回答言語を指定します。[技術者向けマニュアル—Web Chat の初期化](https://docs.maiagent.ai/tech/api-integration/web-chat-chu-shi-hua#e5-9b-9bweb-chat-e5-b5-8c-e5-85-a5-e8-88-87-e8-aa-9e-e8-a8-80-e8-a8-a-d-e5-ae-9a)をご覧ください。 {% hint style="info" %} 対応言語の一覧は、[多言語](/maiagent-user-guide/ja/build/agent/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)[サポート](/maiagent-user-guide/ja/build/agent/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)[：対応言語一覧](/maiagent-user-guide/ja/build/agent/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)をご覧ください。 {% endhint %} ### 2. マルチモーダルの質問と回答テキストでの質問と回答に加えて、AI アシスタントはさまざまな種類のファイルのアップロードにも対応できます。 * スプレッドシート：.xls, .xlsx, .csv, .ods * 文書ファイル：.doc, .docx, .odt, .pdf, .md, .txt * プレゼンテーションファイル：.ppt, .pptx, .odp * ウェブページファイル：.html, .htm * データ形式：.json, .jsonl * 音声ファイル：.wav, .mp3, .m4a, .aac * 動画ファイル：.mp4 {% hint style="info" %} 添付ファイルのアップロードを許可せず、テキストだけで対話するように設定して、対話の安全性を確保できます。 {% endhint %} #### 画像コンテンツの処理 **画像の認識と分析** * **アップロード画像の分析**：ユーザーが製品画像をアップロードすると、AI が自動認識し、関連情報を提供します * **スクリーンショットの処理**：スクリーンショットの分析に対応し、利用時の問題解決を支援します * **画像の説明**：画像内容の説明と関連する提案を自動生成します **画像による回答機能** * **製品画像の表示**：回答に製品の実物画像を含めます * **操作ガイド画像**：手順ごとの操作画面のスクリーンショットを提供します例： 1. ユーザーが MaiAgent アシスタントの設定場所を尋ねると、アシスタントは設定画面の画像で回答します 2. ユーザーがスクリーンショットを送ってパスが正しいか確認すると、アシスタントが正しく解析して回答します #### 文書処理機能 **対応する文書形式** * **PDF 文書**：PDF の内容を自動解析し、関連する質問に回答します * **Word 文書**：.doc/.docx 形式の文書を処理します * **Excel スプレッドシート**：スプレッドシートのデータを分析し、知見を提供します * **PowerPoint プレゼンテーション**：プレゼンテーションの内容を抽出し、質問に回答します **文書を使った対話機能** * **文書内容の照会**：アップロードした文書に基づいて、具体的な質問に回答します * **データ分析**：表形式のデータを自動分析し、統計情報を表で提供します * **文書の要約**：長い文書の主要な内容を要約します *** 例 1：AI アシスタントに、データを表形式で提示し、参考資料へのリンクを提供するよう依頼します例 2：アシスタントに売上内容の分析と表による解析を依頼します例 3：docx ファイルを渡し、CV の書き方に関する問題の分析をアシスタントに依頼します {% hint style="success" %} AI アシスタントはすべての回答で Markdown 形式を使用し、回答内容を整然と整理します。 {% endhint %} ## 五、対話履歴の記憶と共有 ### **1. 対話履歴の記憶** 継続的なサービス体験を提供するため、WebChat はユーザーの対話履歴を自動的に記憶し、毎回の対話を前の対話に基づいて進められるようにします。 **記憶する内容の範囲** * **対話内容**：テキスト、画像、文書などを含む、質問と回答の完全な記録です * **サービスの状態**：未完了の照会や未対応の問題ですユーザーは Web Chat の左側にある対話一覧で過去の対話履歴を確認したり、新しい対話を開始したりできます。対話の記憶機能は、次の用途に利用できます。 * **継続的な相談**：ユーザーが「前回おすすめしてくれたテントのモデルは何でしたか？」と尋ねると、AI がすぐに思い出して回答します * **進捗の確認**：ユーザーが「前回の注文照会を続けてください」と伝えると、AI が関連情報を自動的に呼び出します * **個別対応のサービス**：過去の対話に基づいて、より的確なおすすめや提案を提供します ### **2. 対話の共有** AI アシスタントへの相談後に友人や同僚と対話を共有したい場合や、社内チームで顧客の問題について共同で検討したい場合は、MaiAgent サービスで対話の共有リンクを生成できます。チャットウィンドウ右上の共有をクリックし、ポップアップに表示される公開リンクをコピーして相手に送ります。 **共有する内容** * **完全な対話履歴**：すべてのテキスト、画像、文書などを含みます * **対話の要約**：対話の要点を自動的に要約します * **関連リソース**：対話で言及した製品リンクや文書などです対話履歴の共有は、次の用途に利用できます。 * **顧客による共有**：「このキャンプ用品のおすすめは良いので、登山サークルに共有します」 * **社内での共同対応**：カスタマーサポート担当者が複雑な問題を技術サポートチームに共有します * **研修での利用**：代表的な対話事例を従業員研修の教材として共有します ### **3. 対話のタイムアウト管理** 対話の品質とシステムの性能を確保するため、Web Chat はインテリジェントな対話タイムアウト管理機能を備えています。 **インテリジェントなフィルタリング** * **挨拶メッセージの自動除外**：システムが最初の挨拶を識別して除外し、対話のタイムアウト計算に含めません * **メッセージ数の正確なリセット**：対話を再開すると、メッセージカウンターが正しくリセットされます * **タイムアウト判定の改善**：実質的な対話内容だけをタイムアウト計算の対象とし、より正確に対話を管理します **対話の継続性の確保** * 通常の対話中に予期せずタイムアウトしないようにします * 長時間考えたり一時停止したりした後でも、対話を続けられます * システムが対話の継続状況を適切に判断します **実際の動作** 1. **対話の開始**：ユーザーが「こんにちは」などの挨拶を送信しても、システムはタイムアウト計算に含めません 2. **本題への移行**：ユーザーが具体的な質問を始めると、タイムアウトタイマーが開始します 3. **対話の一時停止**：ユーザーが一時的に離れた場合も、システムは対話状態を維持します 4. **再開**：ユーザーが戻って対話を続けると、メッセージ数が正しく更新されますこの改善により、対話がよりスムーズで自然になり、ユーザーは考える時間が長くなっても対話が中断される心配がありません。 ## 六、使用したツールと引用文書の一覧表示の選択 ### **1. 使用したツールの一覧表示** AI アシスタントが推論時に使用するツールの一覧を、ユーザーに表示するかどうかを選択できます。表示を許可すると、AI アシスタントが回答を生成する際に次の画面が表示されます。この一覧で、AI アシスタントによるツールの使用内容が正しいかどうかを確認できます。 ### **2. 引用文書の一覧表示** 各 AI 回答は引用文書の一覧を自動生成し、情報源を明示することで、回答の信頼性と追跡可能性を高めます。 **表示設定** 企業は、引用したツールの一覧や参考文書名をユーザーに表示するかどうかを、ニーズに応じて設定できます。表示を許可すると、AI アシスタントの回答下部に次の一覧が表示されます。「引用ノード」をクリックすると、参照した文書の抜粋を確認できます。利用場面に応じて、引用情報を公開するかどうかを選択できます。 * **公開のカスタマーサポート**：すべての引用情報を表示し、信頼を高めます * **社内サポート**：機密文書を非表示にし、機密情報を保護します * **教育機関**：学習リソースを表示し、学生が参照しやすくします ## 七、対話のアクセス制御 — 安全で管理可能な対話環境 ### 1. ログイン機能の設定 **ログインの必須化** 対話内容の安全性と管理可能性を確保するため、企業はログイン機能を有効にし、AI アシスタントのサービスを利用する前にログインするようユーザーに求められます。設定が完了すると、訪問者が WebChat をクリックした際にまずログインページへ移動し、ログインに成功したユーザーだけが AI アシスタントとの対話を開始できます。 **セキュリティ上のメリット** * **本人認証**：対話する各ユーザーの身元を明確にします * **アクセス制御**：ユーザーの身元に応じたサービス内容を提供します * **対話の追跡**：各ユーザーの対話履歴を完全に記録します * **データ保護**：権限のないユーザーが機密情報にアクセスするのを防ぎます ### 2. 3 種類のログイン方法 **AD（Active Directory）ログイン** * **利用場面**：社内従業員が利用し、既存の AD システムと統合します * **特徴**：シングルサインオン（SSO）により、追加のアカウント管理が不要です * **設定方法**：AD サーバーの接続情報と同期ルールを設定します * **活用例**：従業員が会社のアカウントで直接ログインし、対応する権限を自動的に取得します **Keycloak ログイン** * **利用場面**：複雑な ID 管理を必要とする企業向けで、複数の ID プロバイダーに対応します * **特徴**：OAuth2、SAML、OpenID Connect などの標準プロトコルに対応します * **設定方法**：Keycloak サーバー、ユーザープール、ID プロバイダーを設定します * **活用例**：複数のシステムのユーザー ID を統合し、権限を一元管理します * **追加機能**：AI アシスタントが MCP／API ツールを呼び出す際に、訪問者の Keycloak ログイン ID を使用できます。[Keycloak のログイン ID を使用したツールの呼び出し](#keycloak-token-passthrough)をご覧ください **MaiAgent ログイン** * **利用場面**：簡単なユーザー管理が必要で、迅速に導入したい場合です * **特徴**：内蔵のユーザー管理システムで、シンプルかつ直感的に操作できます * **設定方法**：MaiAgent プラットフォームでユーザーアカウントと権限を作成します * **活用例**：特定のユーザーグループ専用のログインシステムを構築します有効にすると、対話を開始する前に次の画面でログインを求められます。 ### 3. Keycloak のログイン ID を使用したツールの呼び出し訪問者が Keycloak で Web Chat にログインすると、AI アシスタントがその訪問者の代わりに [MCP ツール](/maiagent-user-guide/ja/build/tools/mcp-setup.md)や [API ツール](/maiagent-user-guide/ja/build/tools/setup_api_tool.md)を呼び出す際に、**訪問者本人の Keycloak ログイン認証情報**を自動的に付与できます。バックエンドシステムはリクエストを受信すると、同じ Keycloak で本人を確認し、その訪問者に閲覧権限のあるデータだけを返せます。ツールごとに別のアカウントを設定したり、訪問者に再度ログインを求めたりする必要はありません。この機能はデフォルトで無効です。無効の場合、すべてのツールの呼び出し方法は従来どおりです。 #### 利用場面ある企業では、社内サービスポータルの従業員アカウントを Keycloak で管理し、Web Chat を従業員向けアシスタントとして利用しています。IT 管理者は対話プラットフォームでこの機能を有効にし、会社の休暇管理システムのホストを許可リストに追加します。従業員が Web Chat にログインして「有給休暇はあと何日残っていますか？」と尋ねると、AI アシスタントはその従業員本人のログイン認証情報を付けて休暇管理システムの API ツールを呼び出します。休暇管理システムは認証情報から本人を識別し、その従業員の勤怠データだけを返します。別の従業員が尋ねた場合は、その従業員自身のデータが返されます。 #### 利用前の準備 * 組織で [Keycloak 連携](/maiagent-user-guide/ja/org/sso/sso-keycloak.md)が完了している必要があります。訪問者はこの組織のメンバーでなければなりません。組織が設定した Keycloak で初めてログインすると、システムが自動的にアカウントを作成して組織に追加します（[サードパーティーログイン：初回ログイン](/maiagent-user-guide/ja/org/sso.md#first-login)をご覧ください）。 * 対話プラットフォームの「ログイン設定」で「ログイン機能を有効にする」が有効になっており、「ログイン元」に Keycloak が選択されている必要があります。 * 認証情報を受け取る MCP／API ツールが作成され、この対話プラットフォームで使用する AI アシスタントに設定されている必要があります。相手側のシステムは、Keycloak Realm が発行する認証情報を検証できる必要があります。 #### 設定手順設定場所：左側のメニューで「カスタマー対話 > 対話プラットフォーム」を選択し、ウェブサイトタイプの対話プラットフォームを選んで「ログイン設定」タブを開きます。ログイン元に Keycloak を選択すると、下部にこの設定項目が表示されます。 1. 「Keycloak のログイン ID を使用してツールを呼び出す」を有効にします。 2. スイッチの下にある赤い警告「訪問者本人のログイン認証情報を以下のホストに転送します」を読み、認証情報の転送先を理解していることを確認します。 3. 「認証情報の受信を許可するツールホスト」に、認証情報を受け取るツールのホストを 1 行に 1 つ入力します（カンマ区切りでも入力できます）。 * `mcp.example.com` のようにホスト名だけを入力し、`https://`、ポート番号、パスは含めません。 * `*.example.com` は `example.com` 自体とそのすべてのサブドメインに一致します。`*.` のないホスト名は、完全に同じホストだけに一致します。 * ホスト名は、ツールの「MCP サーバー URL」または「API URL」と照合されます。 4. 設定を保存します。

Keycloak のログイン ID を使用したツール呼び出しを有効にした後の警告と許可ホスト一覧 — 有効にすると認証情報の転送に関する警告が表示され、認証情報の受信を許可するツールホストの入力が必要です

スイッチを有効にする場合、リストに少なくとも 1 つのホストを入力する必要があります。リストが空の場合や無効なホスト名が含まれる場合、画面に「有効にする場合は、認証情報の受信を許可するツールホストを少なくとも 1 つ入力してください」または「以下は有効なホスト名ではありません」と表示され、設定は送信されません。 {% hint style="warning" %} **この機能を有効にした後、訪問者は再度ログインする必要があります。** プラットフォームが Keycloak の認証情報を保存するのは訪問者のログイン時だけで、対話プラットフォームでこの機能が有効になっている場合に限ります。有効にする前からログインしていた訪問者には、一度ログアウトしてから再度ログインしてもらってください。その後のツール呼び出しに認証情報が付与されます。 {% endhint %} #### 相手側のシステムが受け取る内容 AI アシスタントがリスト内のホストの MCP／API ツールを呼び出すと、リクエストに次の HTTP ヘッダーが追加されます。 ``` Authorization: Bearer <訪客的 Keycloak access token> ``` これは Keycloak Realm がその訪問者に発行した標準の access token です。連携を担当するエンジニアは、通常の Keycloak token の検証方法（署名、有効期限、Realm の確認）でユーザーを識別できます。認証情報が期限切れになると、プラットフォームはまず訪問者のログイン状態を利用して同じ Keycloak で更新し、その後リクエストを送信します。ツール側で更新を処理する必要はありません。 #### 認証情報が付与される場合と付与されない場合 | 状況 | 結果 | | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | 訪問者が Keycloak でログイン済みで、ログイン状態を維持しており、ツールのホストがリストに含まれている | 訪問者本人の認証情報を付与します | | ツールのホストがリストに含まれていない | 認証情報を付与せず、通常どおり呼び出します | | ツール自体に `Authorization` が設定されている（OAuth、API ツールのヘッダー、[連絡先の MCP 認証情報](/maiagent-user-guide/ja/build/tools/setup-contacts-mcp-credentials.md)など） | 上書きせず、ツール本来の認証方式を維持します | | 訪問者がログアウト済み、またはこの組織のメンバーではない | 認証情報を付与しません | | 訪問者が [Source ID によるログイン不要のアクセス](/maiagent-user-guide/ja/serve/choose-channel/web-chat/source-id-access.md)で会話に参加する | 認証情報を付与しません。本人の識別には会話作成時に紐付けられた組織メンバーを使用し、埋め込み元から渡された Source ID は採用しません | | スイッチがオフになっている | この機能を有効にする前と同じ動作になります | {% hint style="danger" %} 転送されるのは訪問者本人の完全なログイン認証情報です。受け取ったシステムは、訪問者の権限で同じ Keycloak に保護された他のサービスにアクセスできます。リストには、信頼でき、実際にユーザーの識別を必要とするホストだけを登録し、範囲が広すぎるワイルドカードは避けてください。 {% endhint %} {% hint style="info" %} 訪問者がログアウトすると、プラットフォームは保存済みの認証情報を失効させます。同じ Keycloak サイトでこの機能を有効にしている会話チャネルがなくなると（スイッチの無効化、別のログイン元への変更、会話チャネルの削除）、保存済みの訪問者の認証情報もすべて削除します。 {% endhint %} ## 8. データ収集（Pre-chat フォーム）データ収集を有効にすると、訪問者は会話を開始する前にフォームを表示され、入力を完了してから会話に進みます。入力内容はその訪問者の[連絡先](/maiagent-user-guide/ja/serve/contact.md)に保存され、サポート担当者は会話ページで直接確認できます。販売代理店向けのサポートで会社名や法人番号を収集したり、イベントの問い合わせで氏名や Email を収集したりするなど、先に相手の情報を把握したい場合に適しています。 ### 1. データ収集フォームの設定操作経路：カスタマーサポートの会話 → 会話チャネル → Web Chat の会話チャネルを選択 → データ収集タブ。

データ収集タブ — 「データ収集」タブ：左側でスイッチ、タイトル、項目を設定し、右側の「リアルタイムプレビュー」でフォームの表示を確認できます

{% stepper %} {% step %} ### フォームを有効にする Pre-chat フォームを有効にするをオンにします。無効の場合、訪問者は従来どおり直接会話に進みます。 {% endstep %} {% step %} ### タイトルとサブタイトルを設定する（任意） * フォームタイトル：フォームの上部に表示されます。未入力の場合は、既定の文言「会話を始める前に、少しお聞かせください」を使用します。 * フォームサブタイトル：フォームの説明文です。`{name}` で会話チャネル名を挿入できます。未入力の場合は、既定の文言「{name} がよりお客様に合ったサービスを提供できるよう、情報をご入力ください」を使用します。どちらも多言語に対応しており、言語タブを切り替えてそれぞれ入力できます。 {% endstep %} {% step %} ### 項目を追加する項目を追加をクリックします。各項目には次の設定があります。 | 設定項目 | 説明 | | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 項目の種類 | テキスト、Email、電話、ドロップダウンの4種類です | | 項目ラベル | 訪問者に表示する項目名です。言語ごとに設定できます | | プレースホルダー | 入力欄内に表示する灰色のヒントです | | 必須 | チェックすると、訪問者は未入力のまま送信できません | | 対応する Contact フィールド | 連絡先の保存先を指定します。氏名（Contact.name）、Email（Contact.email）、電話（Contact.phoneNumber）、またはカスタムフィールド（Metadata）を選択します | ドロップダウンには選択肢のリストもあります。「その他」の自由入力を許可を選択すると、訪問者は「その他」を選んだ後に内容を自由に入力できます。

項目の編集エリア — 各項目で種類、ラベル（多言語）、プレースホルダー、対応する Contact フィールド、必須かどうかを設定できます

項目はドラッグで並べ替えられます。1つのフォームには最大10項目を設定できます。右側のプレビューには変更が即座に反映され、プレビュー言語を切り替えて各言語の表示を確認できます。 {% endstep %} {% step %} ### 保存するプレビューに問題がないことを確認して保存すると、Web Chat にすぐ反映されます。 {% endstep %} {% endstepper %} {% hint style="info" %} **Contact フィールドとの対応付けの制限** * 氏名は「テキスト」、Email は「Email」、電話は「電話」の種類にのみ対応付けられます。種類が一致しない場合は、利用できないことを示すヒントが表示されます。 * 氏名、Email、電話には、それぞれ1つのフォーム項目だけを対応付けられます。その他の項目（法人番号、会社名など）は「カスタムフィールド（Metadata）」を選択してください。 {% endhint %} ### 2. 訪問者の入力フロー訪問者が Web Chat を開くと、最初にフォームが表示されます。タイトル、サブタイトル、設定した項目、右上の言語切り替えが表示され、入力後に会話を開始をクリックすると会話に進みます。

訪問者に表示されるフォーム — Web Chat を開くと、最初にフォームが表示されます

* 必須項目が未入力、または Email や電話番号の形式が正しくない場合、項目の下にエラーが表示され、送信できません。 * 同じブラウザーで一度入力すると、同じ Web Chat を再び開いても入力を求められません。 * 情報を訂正する場合は、Web Chat 右上の⋮メニューから情報を再入力を選択すると、フォームが再表示されます。

### 3. ログイン機能との併用：データをログインアカウントに紐付ける同じ Web Chat で[ログイン機能](#login-config)とデータ収集を有効にすると、**ログイン → フォーム入力 → 会話開始**の順に進みます。入力したデータはブラウザーではなく、ユーザーのログインアカウントに紐付けられます。

ログイン設定タブ — 「ログイン設定」タブ：「ログイン機能を有効にする」をオンにしてログイン元を選択します。「データ収集」タブとは独立した設定です

| 状況 | Web Chat の動作 | | -------------------------------------------------------- | --------------------------------------- | | アカウントを初めて使用し、フォームをまだ入力していない | ログイン後にフォームを表示し、送信後にそのアカウントに紐付く連絡先を作成します | | 同じアカウントで別の端末やブラウザーからログインする | フォームを表示せず、アカウントの既存データで会話を開始します | | この端末で以前ログインせずに入力したデータがあり、アカウント自体にはまだデータがない | 「この情報はあなたのものですか？」という確認画面を表示します（下記参照） | | アカウントにデータがあり、この端末にも未ログイン時に入力した別のデータがある | アカウントのデータを優先し、確認も統合もしません | | ログイン済みのユーザーが情報を再入力を選択する | アカウントの既存の連絡先を更新し、新しい連絡先は作成しません | **確認画面：この情報はあなたのものですか？** この端末で以前ログインせずにフォームを入力した人がいて、現在ログインしているアカウントにまだデータがない場合、ログイン直後にフォームを表示せず、先に確認画面を表示します。画面には、この端末で以前入力した内容を一部マスクして表示し、次の2つのボタンを提供します。 * はい、私の情報です：そのデータを現在のアカウントに紐付けます。以降、同じアカウントならどの端末からログインしても再入力は不要です。 * いいえ：データを統合せず、元のデータを維持します。その後フォームを表示し、ユーザーに一度入力してもらいます。

この情報はあなたのものですか？の確認画面 — 確認画面では内容を一部マスクし、自分が入力した情報かどうかを識別できるようにします

{% hint style="info" %} * ログイン機能を有効にしていない Web Chat には影響しません。引き続きブラウザー単位で入力済みかどうかを判断します。 * アカウントのデータがフォームに自動入力されることはありません。アカウントを初めて使用するときは、管理画面にデータがあっても、一度入力を求められます。 {% endhint %} 会話に進むと、AI アシスタントとサポート管理画面には、このアカウントに紐付く同じ連絡先が表示されます。

ログイン後の会話 — AI アシスタントはフォームに入力された氏名でユーザーを呼びます

### 4. 管理画面で収集したデータを確認する **会話で確認する**：カスタマーサポートの会話 → すべての会話 → 会話を開きます。右側の連絡先情報には、フォームで受け取った内容が項目ごとに表示されます。Email、電話に対応付けた項目は「メールアドレス」「電話番号」として表示され、カスタムフィールドには設定した項目ラベルが表示されます。

会話ページ右側の連絡先情報エリア — 会話ページ右側の「連絡先情報」にフォームで受け取った内容が項目ごとに表示されます

{% hint style="info" %} 連絡先一覧の「連絡先」列には Contact の氏名が表示されます。フォームの氏名項目を「氏名（Contact.name）」ではなく「カスタムフィールド（Metadata）」に対応付けると、未ログインの訪問者の連絡先は「匿名」と表示され、氏名はカスタム属性にのみ表示されます。一覧に訪問者の氏名を直接表示するには、氏名項目を「氏名（Contact.name）」に対応付けてください。 {% endhint %} **連絡先ページで確認する**：カスタマーサポートの会話 → 連絡先 → 連絡先を開きます。基本情報タブには氏名と電話番号、カスタム属性タブにはその他のフォーム項目が表示されます。

ログイン済みのユーザーが入力したデータはアカウントに紐付けられ、所有者のない匿名の連絡先ではなくなります。連絡先名はフォームの設定によって決まります。氏名項目を「氏名（Contact.name）」に対応付けている場合は入力した氏名が表示され、氏名項目がない場合はログインアカウントの名前が表示されます。 ## 接続に失敗したときの対処方法例えば、訪問者から Web Chat を開くと接続できないという報告を受けた場合、訪問者はまずシステムの自動再試行を待ちます。エラー画面が引き続き表示される場合は、失敗した段階、エラー分類、発生時刻を含む画面全体をキャプチャして管理者に渡すと、原因をより早く判断できます。 Web Chat が AI アシスタントの設定を読み込む際にネットワークが切断されると、まず自動的に再試行し、その間は読み込み中の画面を維持します。再試行後も接続できない場合、エラー画面には次の情報が表示されます。 * 読み込みに失敗した段階 * エラー分類と、取得できた場合は HTTP ステータスコード * エラーが発生した現地時刻

Web Chat のアシスタント設定読み込み段階で表示されるネットワーク接続失敗の診断情報 — 自動再試行でも失敗すると、失敗した段階、エラー分類、発生時刻が表示されます

HTTP エラーステータスコードを受信している場合、サーバーから応答があったことを意味します。この場合は自動再試行せず、診断情報を含むエラー画面をすぐに表示します。 {% hint style="info" %} まず端末が正常にインターネットに接続できることを確認し、エラー画面の再試行をクリックしてください。問題が続く場合、スクリーンショットには診断情報をすべて含め、会話内容や個人情報が写らないようにしてください。 {% endhint %} ## 回答の生成中に以前のメッセージを確認する AI アシスタントが回答を生成している間も、訪問者は上にスクロールして以前のメッセージを確認できます。回答は下で生成され続けますが、画面はスクロールした位置に留まり、新しい文字によって移動しません。最新の位置から離れると、入力欄の上に最新に戻るが表示されます。 ### 使用例訪問者が AI アシスタントに複数のプランの比較を依頼します。回答が完成する前に最初のプランの価格を確認したくなり、上にスクロールします。後続の文字が表示され続けても、画面はその位置に留まります。確認後に最新に戻るをクリックすると、最後の質問の位置に戻り、残りの比較内容を読み続けられます。 ### 操作方法 {% stepper %} {% step %} ### 1. 上にスクロールする AI アシスタントが回答を生成している間に、マウスホイール、タッチ操作、スクロールバーのドラッグで上にスクロールします。 {% endstep %} {% step %} ### 2. その位置で読む画面はスクロールした位置に留まり、生成中の新しい内容によって現在の位置は変わりません。

Web Chat の回答生成中に上にスクロールすると、入力欄の上に「最新に戻る」が表示されます — 回答の生成中（入力欄の右側に四角い停止ボタンが表示されています）に上へスクロールすると、入力欄の上に「最新に戻る」が表示されます

{% endstep %} {% step %} ### 3. 最新に戻る最新に戻るをクリックすると、最後の質問の位置に戻り、最新の内容への自動追従が再開します。 {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.maiagent.ai/maiagent-user-guide/ja/serve/choose-channel/web-chat.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.