> 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/conversations/web-chat.md).

# Web Chat 紹介総覧

本ページでは、Web Chat のインタラクティブ機能とインターフェースのカスタマイズについてご紹介し、企業スタイルに合った Web Chat サービスを構築できるよう支援します

## <mark style="color:blue;">一、Web Chat とは？</mark> <a href="#what-is-webchat" id="what-is-webchat"></a>

MaiAgent で作成した AI アシスタントを自社のウェブサイトに埋め込み、リアルタイムのカスタマーサポートやその他の対話サービスを提供できます。Web Chat は**レスポンシブデザインを採用しており、デスクトップ・タブレット・スマートフォンのいずれにも完璧に対応します。**

現在、MaiAgent では以下の 3 種類の埋め込み方法を提供しています。

### 1. ウェブサイト右下への埋め込み <a href="#embed-widget" id="embed-widget"></a>

* 公式サイトのサービスに埋め込み、サイト標準搭載のインテリジェントアシスタントとして機能します
* ユーザーの通常のブラウジングを妨げず、必要なときにいつでも利用できます
* 一般的なカスタマーサポートや問い合わせ対応に適しています

### 2. フルスクリーン埋め込み <a href="#embed-fullscreen" id="embed-fullscreen"></a>

* 充実した対話体験を提供します
* 複雑な問い合わせやサービスフローに適しています
* 企業のニーズに合わせてカスタマイズデザインが可能です

### 3. MaiGPT ウィンドウモード埋め込み <a href="#embed-maigpt" id="embed-maigpt"></a>

* ChatGPT スタイルのフル対話インターフェース（左側に対話履歴リスト + 右側にメイン対話エリア）をページに直接埋め込み、メイン UI として使用できます
* 指定したコンテナに常駐表示するか、右下の浮動ボタンをクリックしてフルスクリーンで展開できます
* AI ポータルサイト、社内ナレッジポータル、または製品のメイン対話インターフェースとして最適です

{% hint style="info" %}
MaiGPT ウィンドウモードは、対話プラットフォーム設定の「<mark style="color:blue;">埋め込み</mark>」ウィンドウから選択できます。詳しい設定手順は [MaiGPT ウィンドウモード埋め込み](/maiagent-user-guide/ja/conversations/web-chat/maigpt-embed.md) をご覧ください。
{% endhint %}

このような設計により、次のメリットが得られます。

* **即時性**：訪問者は待つ必要がなく、すぐに専門的な回答を得られ、ユーザー体験が向上します
* **利便性**：右下に浮かぶデザインは通常のブラウジングを妨げず、必要なときにいつでも利用できます
* **コスト効率**：AI アシスタントが 24 時間 365 日対応し、人件費を大幅に削減します
* **プロフェッショナルな印象**：企業の技術力とサービス品質をアピールできます

## <mark style="color:blue;">二、企業スタイルに合った Web Chat サービスの構築</mark> <a href="#branding" id="branding"></a>

MaiAgent では、LOGO・アバター・問答のテーマカラーなどをカスタマイズできる機能を提供し、企業スタイルに合った Web Chat サービスの構築を支援します。

以下の機能を通じて、

1. アシスタントの表示名を選択する
2. 自社の企業 LOGO をアップロードする
3. AI アシスタントの表示アバターを選択する
4. Web Chat のテーマカラーを選択する
5. AI アシスタントが回答する際のメッセージ背景色を選択する

など、自社ならではの Web Chat の外観を構築できます。

このように、企業のカラーニーズに応じて、企業スタイルに合った Web Chat サービスを構築できます。

Web Chat では、対話入力エリアの下にプラットフォームのブランドロゴが表示されます。ログイン、登録、読み込み画面でもブランド画像が同じ縦横比で表示され、圧縮や引き伸ばしによって変形することはありません。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-08a452dcf190d99fb18802f136241351607d360a%2Fwebchat-brand-footer.png?alt=media" alt="Web Chat の入力エリアの下に Powered by と MaiAgent のブランドロゴを表示"><figcaption><p>Web Chat 下部のブランドロゴは、鮮明さと縦横比を保って表示されます</p></figcaption></figure>

### ダークモードの最適化 <a href="#dark-mode" id="dark-mode"></a>

MaiAgent の Web Chat はダークモードを全面的に最適化し、より快適な視覚体験を提供します。

**動的なカラー調整**

* テーマカラーの明暗を自動調整し、暗い背景でもはっきりと視認できるようにします
* 文字のコントラストをインテリジェントに調整し、最適な可読性を保ちます
* アイコンとボタンの色を最適化し、ダークモードでより際立つようにします

**コントラストカラーの最適化**

* メッセージの吹き出しの背景色を入念に設計し、視覚的な疲労を防ぎます
* リンクや重要な情報には高コントラストの色を使用し、明確に識別できるようにします
* 入力欄やボタンの枠線の色を最適化し、操作体験を向上させます

**シームレスな切り替え体験**

* ユーザーはいつでもライトモードとダークモードを切り替えられます
* 切り替え時にも対話内容や操作状態を保持します
* システムがユーザーのテーマの好みを記憶します

ダークモードは特に次のような場面に適しています。

* 夜間の利用や低照度の環境
* 長時間の対話における目の疲労の軽減
* 企業ブランドに合ったダーク系のデザインスタイル

## <mark style="color:blue;">三、メッセージのカスタマイズ</mark> <a href="#messages" id="messages"></a>

Web Chat サービスに初めてアクセスした際に、以下のようなシーンに応じて、自社ならではの AI アシスタントの挨拶メッセージを自由に設定できます。

### **1. 挨拶メッセージのカスタマイズ** <a href="#greeting" id="greeting"></a>

#### **ブランドに合わせた挨拶**

「当サイトへようこそ！私はあなた専属のカスタマーサポートアシスタントです」と設定することで、企業のプロフェッショナルな印象と親しみやすいサービス姿勢をアピールできます。

#### **誘導型の挨拶**

「製品情報の照会、利用上の問題への回答、注文処理のお手伝いができます」と設定することで、提供可能なサービス範囲をユーザーに明確に伝え、サービス能力への信頼感を築けます。

### 2. 誘導型の開始質問 <a href="#starter-questions" id="starter-questions"></a>

* 「<mark style="color:blue;">対話開始質問</mark>」をクイック選択肢として設定します
* ユーザーはよくある質問を直接クリックでき、入力する必要がありません
* **質問例**：
  * 「注文済みの商品を確認するには？」
  * 「注文方法について」
  * 「会員ポイントのルール」
  * 「営業時間」

ユーザーは開始質問をクリックして対話を始められ、問答の進行をスピードアップできます。

## 生成中の回答を停止する <a href="#stop-generating" id="stop-generating"></a>

質問を送信した後に内容の誤りに気づいた場合でも、AI アシスタントが回答全体を生成し終えるまで待つ必要はありません。回答の生成中は、入力欄の右側にある送信ボタンが四角い<mark style="color:blue;">停止</mark>ボタンに変わります。クリックすると現在の回答を停止し、修正した質問を入力して再送信できます。

たとえば、カスタマーサポート担当者が AI アシスタントに年間の製品発表会を企画するよう依頼した後で、イベント予算を伝え忘れたことに気づいたとします。AI アシスタントが回答を生成している間に<mark style="color:blue;">停止</mark>をクリックし、予算と参加人数を追加して質問し直すことで、要件に合わない内容の生成が完了するまで待たずに済みます。

### 回答を停止する <a href="#stop-current-response" id="stop-current-response"></a>

{% stepper %}
{% step %}

### 1. 停止ボタンを見つける <a href="#find-stop-button" id="find-stop-button"></a>

質問を送信した後、AI アシスタントが回答の生成を開始するまで待ちます。このとき、入力欄の右側に四角い<mark style="color:blue;">停止</mark>ボタンが表示されます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-5b470980c305488984de0c77295cf0ef2ae6f57f%2Fwebchat-stop-response.png?alt=media" alt="Web Chat の回答生成中、入力欄の右側に四角い停止ボタンが表示されます"><figcaption><p>回答の生成中は、入力欄の右側にある停止ボタンをクリックできます</p></figcaption></figure>
{% endstep %}

{% step %}

### 2. 停止して質問し直す <a href="#stop-and-ask-again" id="stop-and-ask-again"></a>

<mark style="color:blue;">停止</mark>をクリックします。画面に「回答を入力しています」と表示されなくなったら、入力欄に修正した質問を入力して再送信します。
{% endstep %}
{% endstepper %}

{% hint style="info" %}
停止されるのは現在生成中の回答のみです。送信済みの質問や以前の対話履歴は削除されません。
{% endhint %}

## <mark style="color:blue;">四、多様な問答コンテンツ</mark> <a href="#multimodal-qa" id="multimodal-qa"></a>

### 1. 多言語対応 <a href="#multi-language" id="multi-language"></a>

ユーザーの使用言語に応じて回答し、コミュニケーションの障壁を取り除きます。

* **自動検出**：ユーザーが入力した言語に基づいて、アシスタントの回答言語を選択します

**手動切り替え**：

1. Web Chat のインターフェースで使用言語を選択します。詳しくは[多言語対](https://docs.maiagent.ai/maiagent-user-guide/ja/conversations/pages/HdP5GFY4QStHYYrNWxxb#id-2.-web-chat-liao-tian-she-ding)[応](https://docs.maiagent.ai/maiagent-user-guide/ja/conversations/pages/HdP5GFY4QStHYYrNWxxb#id-2.-web-chat-liao-tian-she-ding)[：Web Chat チャット設定](https://docs.maiagent.ai/maiagent-user-guide/ja/conversations/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/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)[応](/maiagent-user-guide/ja/build/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)[：対応言語の一覧](/maiagent-user-guide/ja/build/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)をご覧ください
{% endhint %}

### 2. マルチモーダル問答 <a href="#multimodal" id="multimodal"></a>

テキストでの問答に加えて、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 %}

## <mark style="color:blue;">五、履歴の記憶と対話の共有</mark> <a href="#memory-and-sharing" id="memory-and-sharing"></a>

### **1. 対話履歴の記憶** <a href="#chat-history" id="chat-history"></a>

連続性のあるサービス体験を提供するため、Web Chat はユーザーの対話履歴を自動的に記憶し、毎回の対話を以前の内容の上に積み重ねられるようにします。

**記憶する内容の範囲**

* **対話内容**：テキスト・画像・ファイルなどを含む完全な問答記録
* **サービス状態**：未完了の照会、未処理の問題

ユーザーは Web Chat の左側の対話リストで過去の対話記録を確認したり、新しい対話を開始したりできます。

対話記憶機能は次のような場面で活用できます。

* **連続した問い合わせ**：ユーザーが「前回おすすめしてもらったテントの型番は何でしたか？」と尋ねると、AI がすぐに思い出して回答できます
* **進捗の追跡**：ユーザーが「前回の注文照会の続きを」と言うと、AI が自動的に関連情報を呼び出します
* **パーソナライズされたサービス**：過去の対話に基づいて、より的確なおすすめや提案を提供します

### **2. 対話の共有** <a href="#chat-sharing" id="chat-sharing"></a>

AI アシスタントに相談した後、対話を友人や同僚に共有したい場合や、社内チームで協力して顧客の問題を検討する必要がある場合は、MaiAgent のサービスで対話共有リンクを生成できます。

**共有される内容**

* **完全な対話記録**：すべてのテキスト・画像・ファイルなどの内容を含みます
* **対話の要約**：対話の要点の要約を自動生成します
* **関連リソース**：対話中で言及された製品リンクやファイルなど

対話記録の共有は次のような場面で活用できます。

* **顧客への共有**：「このキャンプ用品のおすすめはとても良いので、登山サークルに共有しよう」
* **社内協力**：カスタマーサポート担当者が複雑な問題を技術サポートチームに共有する
* **トレーニング用途**：典型的な対話事例を従業員研修の教材として共有する

### **3. 対話タイムアウトの管理** <a href="#chat-timeout" id="chat-timeout"></a>

対話品質とシステムパフォーマンスを確保するため、Web Chat はインテリジェントな対話タイムアウト管理の仕組みを備えています。

**インテリジェントなフィルタリングの仕組み**

* **挨拶メッセージの自動フィルタリング**：システムが挨拶メッセージを識別してフィルタリングし、対話タイムアウトの計算に含めません
* **メッセージカウントの正確なリセット**：対話が再開されると、メッセージカウンターが正しくリセットされます
* **タイムアウト判定の最適化**：実質的な対話内容のみを対象にタイムアウトを計算し、より正確な対話管理を提供します

**対話の継続性の保証**

* ユーザーが通常の対話の途中で意図せずタイムアウトしないようにします
* 長時間の検討や中断の後でも対話を続けられます
* システムが対話が進行中かどうかをインテリジェントに判断します

**実際の動作**

1. **対話の開始**：ユーザーが挨拶メッセージ（例：「こんにちは」）を送信しても、システムはタイムアウトに含めません
2. **対話への移行**：ユーザーが実質的な質問を始めると、タイムアウトのタイマーが起動します
3. **対話の一時停止**：ユーザーが一時的に離れても、システムは対話状態を保持します
4. **再開**：ユーザーが戻って対話を続けると、メッセージカウントが正しく更新されます

この最適化により、対話体験がより滑らかで自然になり、ユーザーは検討時間が長くなって対話が中断されることを心配する必要がなくなります。

## <mark style="color:blue;">六、使用ツール・引用ファイル一覧の表示有無の選択</mark> <a href="#display-tools-and-citations" id="display-tools-and-citations"></a>

### **1. 使用ツール一覧の表示** <a href="#show-tools" id="show-tools"></a>

AI アシスタントが推論時に使用したツールの一覧をユーザーに表示するかどうかを選択できます。表示を許可した場合、AI アシスタントが回答を生成する際に以下の画面が表示されます。

この一覧を通じて、AI アシスタントが使用したツールの内容が正しいかどうかを追跡できます。

### **2. 引用ファイル一覧の表示** <a href="#show-citations" id="show-citations"></a>

各 AI の回答には引用ファイルの一覧が自動生成され、情報の出典を明確に示すことで、回答の信頼性とトレーサビリティを高めます。

**表示設定**

企業はニーズに応じて、引用したツール一覧や参考ファイル名の内容をユーザーに表示するかどうかを設定できます。表示を許可した場合、AI アシスタントの回答の下部に以下の一覧が表示されます。「引用ノード」をクリックすると、参考にしたファイルの断片を確認できます。

利用シーンに応じて、引用情報を公開するかどうかを選択できます。

* **公開カスタマーサポート**：すべての引用情報を表示し、信頼感を築きます
* **社内サポート**：機密ファイルを非表示にし、機密情報を保護します
* **教育機関**：学習リソースを表示し、学生が参照しやすくします

## <mark style="color:blue;">七、対話権限の保護 - 安全で管理可能な対話環境</mark> <a href="#access-control" id="access-control"></a>

### 1. ログイン機能の設定 <a href="#login-config" id="login-config"></a>

**強制ログインの仕組み**

対話内容のセキュリティと管理可能性を確保するため、企業はログイン機能を有効にし、ユーザーが AI アシスタントサービスを利用する前に必ずログインするよう求めることができます。設定が完了すると、訪問者が Web Chat をクリックした際にまずログインページが表示され、ログインに成功したユーザーのみが AI アシスタントとの対話を開始できます。

**セキュリティ上のメリット**

* **本人認証**：対話するすべてのユーザーが明確な身元を持つようにします
* **権限制御**：ユーザーの身元に応じて対応するサービス内容を提供します
* **対話の追跡**：各ユーザーの対話履歴を完全に記録します
* **データ保護**：未認可のユーザーによる機密情報へのアクセスを防ぎます

### 2. 3 種類のログイン方法 <a href="#login-methods" id="login-methods"></a>

**AD (Active Directory) ログイン**

* **適用シーン**：社内従業員の利用、既存の AD システムとの統合
* **特徴**：シングルサインオン (SSO) により、追加のアカウント管理が不要です
* **設定方法**：AD サーバーの接続情報と同期ルールを構成します
* **実際の活用例**：従業員が会社のアカウントで直接ログインし、対応する権限を自動的に取得します

**Keycloak ログイン**

* **適用シーン**：複雑な ID 管理が必要な企業、複数の ID プロバイダーに対応
* **特徴**：OAuth2、SAML、OpenID Connect などの標準プロトコルに対応します
* **設定方法**：Keycloak サーバー、ユーザープール、ID プロバイダーを構成します
* **実際の活用例**：複数システムのユーザー ID を統合し、権限を一元管理します

**MaiAgent ログイン**

* **適用シーン**：シンプルなユーザー管理のニーズ、迅速な導入
* **特徴**：ユーザー管理システムを標準搭載しており、操作がシンプルで直感的です
* **設定方法**：MaiAgent プラットフォーム上でユーザーアカウントと権限を作成します
* **実際の活用例**：特定のユーザー層向けに専用のログインシステムを構築します

有効にすると、対話を開始する前に以下の画面が表示され、ログインを求められます。

## <mark style="color:blue;">8、データ収集（Pre-chat フォーム）</mark> <a href="#pre-chat-form" id="pre-chat-form"></a>

データ収集を有効にすると、訪問者は対話を開始する前にフォームが表示され、入力を完了すると対話に進めます。入力内容はその訪問者の[連絡先](/maiagent-user-guide/ja/org/contact.md)に保存され、カスタマーサービス担当者は対話ページで直接確認できます。例えば、販売代理店向けサービスで会社名と法人番号を収集する、イベントの問い合わせで氏名と Email を収集するなど、「対話前に相手が誰かを把握したい」シーンに適しています。

### 1. データ収集フォームの設定 <a href="#pre-chat-config" id="pre-chat-config"></a>

パス：<mark style="color:blue;">カスタマーサービス対話</mark> → <mark style="color:blue;">対話プラットフォーム</mark> → Web Chat 対話プラットフォームを選択 → <mark style="color:blue;">データ収集</mark>タブ。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-fa62f86ab7ff682fcd9c0907a8a126acf6672991%2Fweb-chat-prechat-settings.png?alt=media" alt="データ収集タブ"><figcaption><p>「データ収集」タブ：左側でスイッチ、タイトル、フィールドを設定し、右側の「リアルタイムプレビュー」にフォームの外観が同期表示されます</p></figcaption></figure>

{% stepper %}
{% step %}

### フォームを有効にする <a href="#pre-chat-enable-form" id="pre-chat-enable-form"></a>

<mark style="color:blue;">Pre-chat フォームを有効にする</mark>をオンにします。無効の場合、訪問者は従来どおり直接対話に進みます。
{% endstep %}

{% step %}

### タイトルとサブタイトルを設定する（任意） <a href="#pre-chat-form-title" id="pre-chat-form-title"></a>

* <mark style="color:blue;">フォームタイトル</mark>：フォーム上部に表示されます。未入力の場合は、システムのデフォルト文言「対話を始める前の簡単なご質問」が使用されます。
* <mark style="color:blue;">フォームサブタイトル</mark>：フォームの説明文です。`{name}` を使って対話プラットフォーム名を挿入できます。未入力の場合は、デフォルト文言「{name} がよりパーソナライズされたサービスを提供できるよう、お客様の情報をご入力ください」が使用されます。

どちらも多言語に対応しています。言語タブを切り替え、言語ごとに入力します。
{% endstep %}

{% step %}

### フィールドを追加する <a href="#pre-chat-add-fields" id="pre-chat-add-fields"></a>

<mark style="color:blue;">フィールドを追加</mark>をクリックします。各フィールドで次の項目を設定できます。

| 設定項目                                                 | 説明                                                                                                                                                                                                                                      |
| ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">フィールドタイプ</mark>            | テキスト、Email、電話、ドロップダウンの 4 種類                                                                                                                                                                                                             |
| <mark style="color:blue;">フィールドラベル</mark>            | 訪問者に表示されるフィールド名で、言語ごとに入力できます                                                                                                                                                                                                            |
| <mark style="color:blue;">プレースホルダー</mark>            | フィールド内に表示されるグレーのヒント                                                                                                                                                                                                                     |
| <mark style="color:blue;">必須</mark>                  | 選択すると、訪問者は入力しなければ送信できません                                                                                                                                                                                                                |
| <mark style="color:blue;">Contact フィールドとの対応付け</mark> | データの保存先を決定します：<mark style="color:blue;">氏名（Contact.name）</mark>、<mark style="color:blue;">Email（Contact.email）</mark>、<mark style="color:blue;">電話（Contact.phoneNumber）</mark>、または <mark style="color:blue;">カスタムフィールド（Metadata）</mark> |

ドロップダウンタイプには、別途 <mark style="color:blue;">選択肢</mark>リストがあります。<mark style="color:blue;">「その他」のカスタム入力を許可</mark>を選択すると、訪問者は「その他」を選択後に独自の内容を入力できます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-6003c1d8c3373fe2ad0ab3686474f5c2d61d442e%2Fweb-chat-prechat-field-editor.png?alt=media" alt="フィールド編集エリア"><figcaption><p>各フィールドで、フィールドタイプ、フィールドラベル（多言語）、プレースホルダー、Contact フィールドとの対応付け、必須設定を構成できます</p></figcaption></figure>

フィールドはドラッグして並べ替えられます。1 つのフォームに最大 10 個のフィールドを設定できます。右側のプレビューエリアにフォームの外観がリアルタイムで表示されます。<mark style="color:blue;">プレビュー言語</mark>を切り替えて、各言語版を確認できます。
{% endstep %}

{% step %}

### 保存する <a href="#pre-chat-save-form" id="pre-chat-save-form"></a>

プレビューに問題がないことを確認して保存すると、Web Chat にすぐに反映されます。
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Contact フィールドとの対応付けの制限**

* 氏名は「テキスト」タイプ、Email は「Email」タイプ、電話は「電話」タイプにのみ対応付けできます。タイプが一致しない場合は、無効化されたことを示すメッセージが表示されます。
* 氏名、Email、電話は、それぞれ 1 つのフォームフィールドにのみ対応付けできます。法人番号や会社名など、その他のフィールドには「カスタムフィールド（Metadata）」を選択します。
  {% endhint %}

### 2. 訪問者の入力フロー <a href="#pre-chat-visitor-flow" id="pre-chat-visitor-flow"></a>

訪問者が Web Chat を開くと、まずフォーム画面が表示されます。画面には、タイトル、サブタイトル、設定したフィールド、および右上の言語切り替えが表示されます。入力後、<mark style="color:blue;">対話を開始</mark>をクリックすると対話に進みます。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-72d96183b2932a7f3a53fa26e25b0c44693d9976%2Fweb-chat-prechat-form.png?alt=media" alt="訪問者に表示されるフォーム"><figcaption><p>訪問者が Web Chat を開くと、まずフォームが表示されます</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-80e055ba2910bb69258325f5f6f23ee481ba7342%2Fweb-chat-prechat-form-filled.png?alt=media" alt="入力完了"><figcaption><p>入力後に「対話を開始」をクリックします</p></figcaption></figure></div>

* 必須フィールドが未入力の場合、または Email や電話番号の形式が正しくない場合は、フィールドの下にエラーが表示され、送信できません。
* 同じブラウザーで一度入力すると、以後同じ Web Chat を開いても再入力を求められません。
* 訪問者がデータを修正する場合は、Web Chat 右上の <mark style="color:blue;">⋮</mark> メニューから <mark style="color:blue;">データを再入力</mark>をクリックすると、フォームが再表示されます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-cc226e66c15e542470c95f0dd2b494f604ad81ec%2Fweb-chat-prechat-menu-refill.png?alt=media" alt="データを再入力"><figcaption><p>右上の ⋮ メニューにある「データを再入力」</p></figcaption></figure>

### 3. ログイン機能との併用：データをログインアカウントに対応付ける <a href="#pre-chat-with-login" id="pre-chat-with-login"></a>

同じ Web Chat で[ログイン機能](#login-config)とデータ収集を同時に有効にした場合、フローは「**ログイン → フォームへの入力 → 会話の開始**」となります。ユーザーが入力したデータは、ブラウザではなくログインアカウントに関連付けられます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-b190160bed2cd104cb0e87160c4a63c047689a70%2Fweb-chat-prechat-login-settings.png?alt=media" alt="ログイン設定タブ"><figcaption><p>「ログイン設定」タブで「ログイン機能を有効にする」をオンにしてログイン元を選択します。「データ収集」タブとはそれぞれ独立しています</p></figcaption></figure>

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-f9c71c232b1bbdd9ee1880cf922a6361d2420e5e%2Fweb-chat-prechat-login-page.png?alt=media" alt="ログイン画面"><figcaption><p>① Web Chat を開くと、最初にログイン画面が表示されます</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-020c77245a78280ffc81ed879bdb2a9613f3cdeb%2Fweb-chat-prechat-login-form.png?alt=media" alt="ログイン後のフォーム"><figcaption><p>② ログイン後にデータ収集フォームが表示されます</p></figcaption></figure></div>

| 状況                                                            | Web Chat の動作                                      |
| ------------------------------------------------------------- | ------------------------------------------------- |
| アカウントを初めて使用し、まだフォームに入力したことがない                                 | ログイン後にフォームが表示されます。送信すると、そのアカウントに対応する連絡先が作成されます。   |
| 同じアカウントで別のデバイスまたはブラウザからログインする                                 | フォームは再表示されず、アカウントの既存データを使用してそのまま会話を開始します。         |
| このデバイスで以前ログインせずにフォームへ入力したが、アカウント自体にはまだデータがない                  | 「このデータはあなたのものですか？」という確認画面が表示されます（以下の説明を参照してください）。 |
| アカウントにはすでにデータがあり、このデバイスにはログインせずに入力した別のデータがある                  | アカウントのデータが優先されます。確認は行われず、データも統合されません。             |
| ログイン済みのユーザーが <mark style="color:blue;">データを再入力</mark> をクリックする | アカウントに関連付けられた既存の連絡先が更新され、新しい連絡先は作成されません。          |

**確認画面：このデータはあなたのものですか？**

このデバイスで以前誰かがログインせずにフォームへ入力しており、現在ログインしているアカウントにまだデータがない場合、ログイン後すぐにはフォームが表示されず、最初に確認画面が表示されます。画面には、このデバイスで以前入力された内容が一部マスクされた状態で表示され、次の 2 つのボタンが表示されます。

* <mark style="color:blue;">はい、私のものです</mark>：そのデータを現在のアカウントに関連付けます。以後、同じアカウントであれば、どのデバイスからログインしても再入力は不要です。
* <mark style="color:blue;">いいえ</mark>：データを統合しません。元のデータはそのまま維持され、その後フォームが表示されるため、ユーザーが自分で入力します。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-f8d35bfa6b85a7ec60a08eb8e73cc09904338eb6%2Fweb-chat-prechat-claim.png?alt=media" alt="「このデータはあなたのものですか？」確認画面"><figcaption><p>確認画面では内容の一部がマスクされ、自分が入力したデータかどうかをユーザーが判別できる情報のみが表示されます</p></figcaption></figure>

{% hint style="info" %}

* ログイン機能を有効にしていない Web Chat には影響せず、引き続きブラウザに基づいて入力済みかどうかを判定します。
* アカウントデータがフォームに自動入力されることはありません。アカウントを初めて使用する場合は、管理画面にそのユーザーのデータがすでに存在していても、一度フォームへの入力が求められます。
  {% endhint %}

会話を開始すると、AI アシスタントとカスタマーサービスの管理画面には、どちらにもアカウントに対応するこの連絡先が表示されます。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-f9a99f4c93d7d3395efb4d6f27175d2469857745%2Fweb-chat-prechat-login-chat.png?alt=media" alt="ログイン後の会話"><figcaption><p>AI アシスタントはフォームに入力された名前でユーザーを呼びます</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-3236973f772f1fb9b44df23cb6812d8c0980bac6%2Fweb-chat-prechat-conversation-login.png?alt=media" alt="管理画面の会話ページ"><figcaption><p>管理画面の会話ページには、その連絡先とフォームで受け取った法人番号が表示されます</p></figcaption></figure></div>

### 4. 管理画面で受信したデータを確認する <a href="#pre-chat-view-data" id="pre-chat-view-data"></a>

**会話で確認する**：<mark style="color:blue;">カスタマーサービス</mark> → <mark style="color:blue;">すべての会話</mark> → 会話を開くと、右側の <mark style="color:blue;">連絡先情報</mark> セクションにフォームで受け取った内容が項目ごとに表示されます。Email と電話に対応するフィールドは「メールアドレス」「電話番号」と表示され、カスタムフィールドには設定したフィールドラベルが表示されます。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-efe6eb93e6c245a6c4dd2e98e793cc07bd69668f%2Fweb-chat-prechat-conversation-contact.png?alt=media" alt="会話ページ右側の連絡先情報セクション"><figcaption><p>会話ページ右側の「連絡先情報」には、フォームで受け取った内容が項目ごとに表示されます</p></figcaption></figure>

{% hint style="info" %}
連絡先一覧の「連絡先」列には、Contact の名前が表示されます。フォームの名前フィールドが「名前（Contact.name）」ではなく「カスタムフィールド（Metadata）」に対応付けられている場合、ログインしていない訪問者の連絡先は「匿名」と表示され、名前はカスタム属性にのみ表示されます。一覧に訪問者の名前を直接表示するには、名前フィールドを「名前（Contact.name）」に対応付けてください。
{% endhint %}

**連絡先ページで確認する**：<mark style="color:blue;">カスタマーサービス</mark> → <mark style="color:blue;">連絡先</mark> → 連絡先を開きます。<mark style="color:blue;">基本情報</mark> タブには名前と電話番号が表示され、<mark style="color:blue;">カスタム属性</mark> タブにはその他のフォームフィールドが表示されます。

<div><figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-45f6d1ebb32ce47284176306f8353e503c88539c%2Fweb-chat-prechat-contacts-list.png?alt=media" alt="連絡先一覧"><figcaption><p>連絡先一覧では、名前、Email、または電話番号で検索できます</p></figcaption></figure> <figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-9bc3a0bf13c97c7eed1f5223b76a9bca113962f5%2Fweb-chat-prechat-contact-attributes.png?alt=media" alt="カスタム属性タブ"><figcaption><p>「カスタム属性」タブには、フォームの各フィールドの値が表示されます</p></figcaption></figure></div>

ログイン済みのユーザーが入力したデータはそのアカウントに関連付けられ、所有者のいない匿名の連絡先ではなくなります。連絡先名はフォームの設定によって異なります。名前フィールドが「名前（Contact.name）」に対応付けられている場合は、フォームに入力した名前が表示されます。名前フィールドがない場合は、ログインアカウントの名前が表示されます。

## 接続に失敗した場合の対処方法 <a href="#connection-failure" id="connection-failure"></a>

たとえば、Web Chat を開くと接続できないと表示される、という報告を訪問者から Web サイト管理者が受けたとします。まず訪問者は、システムによる自動再試行を待ちます。それでもエラー画面が表示される場合は、失敗した段階、エラー分類、発生時刻を含む画面全体のスクリーンショットを撮影して管理者に渡すことで、管理者が問題をより迅速に判断できます。

Web Chat が AI アシスタントの設定を読み込んでいるときにネットワーク接続が中断すると、最初に自動で再試行されます。この間、画面は読み込み中の状態のままになります。再試行後も接続できない場合、エラー画面には次の情報が表示されます。

* 読み込みに失敗した段階
* エラー分類。HTTP ステータスコードがある場合は、そのコードも表示されます
* エラーが発生した現地時刻

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-e24edbd1a83fd7f69430443a8a74158aeb6a117b%2Fweb-chat-connection-failure-network.png?alt=media" alt="Web Chat で AI アシスタント設定の読み込み段階にネットワーク接続エラーが発生した場合の診断"><figcaption><p>自動再試行後も失敗すると、画面に失敗した段階、エラー分類、発生時刻が表示されます</p></figcaption></figure>

システムが HTTP エラーステータスコードを受信している場合、サーバーはすでに応答しています。この場合、自動再試行は行われず、診断エラー画面がすぐに表示されます。

{% hint style="info" %}
まずデバイスが正常にインターネットへ接続できることを確認し、エラー画面の <mark style="color:blue;">再試行</mark> をクリックしてください。問題が続く場合は、スクリーンショットにすべての診断情報を含め、会話内容や個人情報が画面に映り込まないようにしてください。
{% endhint %}

## 回答の生成中に前の内容を見返す <a href="#review-during-generation" id="review-during-generation"></a>

AI アシスタントが回答を生成している途中でも、訪問者は上にスクロールして前のメッセージを見返すことができます。回答の生成は下部で続きますが、画面は訪問者がスクロールした位置に留まり、新しく表示されるテキストに引っ張られることはありません。最新の位置から離れると、入力欄の上に <mark style="color:blue;">最新に戻る</mark> が表示されます。

### 利用シーン <a href="#generation-scroll-scenario" id="generation-scroll-scenario"></a>

訪問者が AI アシスタントに複数のプランを一度に比較するよう依頼します。回答がまだ完成していないうちに、最初のプランの価格を確認するため上にスクロールします。画面はその位置に留まり、後続のテキストが次々と表示されても移動しません。確認後に <mark style="color:blue;">最新に戻る</mark> をクリックすると、画面は最後の質問の位置に戻り、残りの比較内容を続けて確認できます。

### 操作方法 <a href="#generation-scroll-steps" id="generation-scroll-steps"></a>

{% stepper %}
{% step %}

### 1. 上にスクロールする <a href="#scroll-up-during-generation" id="scroll-up-during-generation"></a>

AI アシスタントが回答を生成している間に、マウスホイール、タッチジェスチャー、またはスクロールバーのドラッグ操作で上にスクロールします。
{% endstep %}

{% step %}

### 2. その位置で読む <a href="#read-in-place" id="read-in-place"></a>

画面はスクロールした位置に留まり、生成中の新しい内容によって現在の位置が変わることはありません。

<figure><img src="https://2584873290-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTvHx8hgwYGDTLD3A7xoW%2Fuploads%2Fgit-blob-537d8652530560963f91fe83d44727c547068051%2Fwebchat-back-to-latest.png?alt=media" alt="Web Chat の回答生成中に上へスクロールすると、入力欄の上に「最新に戻る」が表示される"><figcaption><p>回答は生成中です（入力欄の右側には四角形の停止ボタンが表示されます）。上にスクロールすると、入力欄の上に「最新に戻る」が表示されます</p></figcaption></figure>
{% endstep %}

{% step %}

### 3. 最新に戻る <a href="#press-back-to-latest" id="press-back-to-latest"></a>

<mark style="color:blue;">最新に戻る</mark> をクリックすると、画面は最後の質問の位置に戻り、最新の内容への自動追従が再開されます。
{% 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.maiagent.ai/maiagent-user-guide/ja/conversations/web-chat.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.