> 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/maiagent-user-guide-ja/conversations/web-chat/website.md).

# 対話プラットフォーム連携：Web サイト

## <mark style="color:blue;">一、設定画面に入る</mark> <a href="#navigate-to-settings" id="navigate-to-settings"></a>

### 1. 経路一：Webカスタマーサポート対話を追加する <a href="#path-add-web-chat" id="path-add-web-chat"></a>

左側メニューの「<mark style="color:blue;">カスタマーサポート対話 > 対話プラットフォーム</mark>」をクリックし、右上の「<mark style="color:blue;">＋対話プラットフォームを連携</mark>」を選択して、プラットフォーム「<mark style="color:blue;">Website</mark>」を選びます。

### 2. 経路二：AIアシスタントから対話プラットフォームを関連付ける <a href="#path-ai-agent-link-channel" id="path-ai-agent-link-channel"></a>

左側機能欄の「<mark style="color:blue;">AI機能 > AIアシスタント</mark>」に入り、いずれかのAIアシスタントを選択して「<mark style="color:blue;">操作</mark>」アイコンをクリックし、続けて「<mark style="color:blue;">対話プラットフォームを関連付ける</mark>」の「<mark style="color:blue;">Web XXアシスタント</mark>」をクリックします。

### 3. 経路三：対話プラットフォームの操作 <a href="#path-channel-management" id="path-channel-management"></a>

左側機能欄の「<mark style="color:blue;">カスタマーサポート対話 > 対話プラットフォーム</mark>」で、設定したいAIアシスタントを選択し、「<mark style="color:blue;">操作</mark>」アイコンをクリックすると、対話プラットフォームの構成画面に入ることができます。

## <mark style="color:blue;">二、基本設定</mark> <a href="#basic-settings" id="basic-settings"></a>

### 1. 基本設定 <a href="#general-settings" id="general-settings"></a>

**プラットフォーム名の設定**

* 「<mark style="color:blue;">プラットフォーム名</mark>」欄に、Webサイト上で表示したいAIアシスタントの名前を入力します
* 例：「カスタマーサポートアシスタント」「スマートアシスタント」など

**AIアシスタントの選択**

* 「<mark style="color:blue;">AIアシスタント</mark>」のドロップダウンメニューで、使用するAIアシスタントを選択します
* これにより、チャットルームでどのAIアシスタントが質問に回答するかが決まります

**戻りURLの設定**

* 「<mark style="color:blue;">戻りURL</mark>」欄に、貴社のWebサイトのURLを入力します
* ユーザーがチャットルームの戻るボタンをクリックすると、このURLに遷移します

**公開URLの取得と利用**

* システムが自動的に「<mark style="color:blue;">公開アクセスURL</mark>」を生成します
* 次の操作が可能です：
  * 「<mark style="color:blue;">コピー</mark>」ボタンをクリックしてURLをコピーする
  * 「<mark style="color:blue;">アクセス</mark>」ボタンをクリックして新しいウィンドウでチャットルームを開く
  * 「<mark style="color:blue;">埋め込み</mark>」ボタンをクリックして埋め込みコードを取得する
  * 「<mark style="color:blue;">埋め込みプレビュー</mark>」ボタンをクリックして埋め込み後の表示をプレビューする

**埋め込みスクリプトの最適化**

埋め込み方式を選択すると、システムは最適化された embed.js スクリプトを提供します。このスクリプトには以下の特長があります：

* **重複実行防止の仕組み**：スクリプトが複数回読み込まれても、初期化は一度しか行われず、競合を防ぎます
* **より優れたエラーハンドリング**：読み込みに失敗した際は、明確なエラーメッセージを表示し、デバッグを容易にします
* **読み込みパフォーマンスの最適化**：スクリプトは最適化されており、Webサイトの読み込み速度に影響を与えません
* **互換性の向上**：さまざまなWebサイト環境やフレームワークとの互換性がさらに高まっています

**埋め込みのベストプラクティス：**

1. 埋め込みスクリプトは `</body>` タグの直前に配置し、ページのメインコンテンツが先に読み込まれるようにします
2. 埋め込みスクリプトはページに一度だけ追加し、重複を避けます
3. SPA（Single Page Application）で使用する場合は、技術ドキュメントの高度な設定を参照してください

### 2. 外観設定 <a href="#appearance-settings" id="appearance-settings"></a>

**企業ロゴのアップロード**

* 「<mark style="color:blue;">Logo</mark>」エリアのアップロードボタンをクリックします
* 貴社のロゴ画像ファイルを選択します
* アップロード後はプレビューが表示され、クリックして削除し再アップロードできます

**AIアシスタントのアバターのアップロード**

* 「<mark style="color:blue;">アバター</mark>」エリアのアップロードボタンをクリックします
* 適切なアバター画像を選択します
* アップロード後はプレビューが表示され、クリックして削除し再アップロードできます

**カラーテーマの設定**

* 「<mark style="color:blue;">テーマカラー</mark>」セレクターをクリックし、チャットルームウィンドウのタイトルの色を選択します
* 「<mark style="color:blue;">タイトル文字色</mark>」セレクターをクリックし、タイトル文字の色を設定します
* 「<mark style="color:blue;">AIアシスタント回答の背景色</mark>」セレクターをクリックし、AIの回答メッセージの背景色を設定します

**テーマ切り替えの有効化**

* 「<mark style="color:blue;">テーマモード切り替え</mark>」スイッチをオンにします
* ユーザーはライトテーマとダークテーマを切り替えることができます

### 3. 機能設定 <a href="#feature-settings" id="feature-settings"></a>

**有効化の設定**

* 対話を開いてサービスを提供するかどうかを設定します

**ファイルアップロードの設定**

* 「<mark style="color:blue;">ファイルアップロードを許可</mark>」スイッチをオンにします
* ユーザーは画像やファイルなどをAIにアップロードして分析させることができます

**引用文書の表示設定**

* 「<mark style="color:blue;">引用文書を表示</mark>」スイッチをオンにします
* AIが回答する際に、参照した出典文書を表示します

**引用文書のダウンロード許可の設定**

* 「<mark style="color:blue;">引用文書のダウンロードを許可</mark>」スイッチをオンにします
* ユーザーは対話中にAIアシスタントが引用したファイルの内容をダウンロードできます

**使用ツールおよび結果の表示設定**

* 「<mark style="color:blue;">使用ツールおよび結果を表示</mark>」スイッチをオンにします
* システムは MCP または API による処理が進行中であることを表示します

### 4. インタラクション設定 <a href="#interaction-settings" id="interaction-settings"></a>

**冒頭メッセージの設定**

* 冒頭メッセージの入力欄にウェルカムメッセージを入力します
* 例：「こんにちは！私はスマートカスタマーサポートです。何かお手伝いできることはありますか？」
* 「<mark style="color:blue;">追加</mark>」ボタンをクリックして、冒頭メッセージをリストに加えます
* 複数の冒頭メッセージを追加でき、システムがランダムに選択します
* 削除する場合は、該当する項目の右側にある削除ボタンをクリックします

**対話開始時の質問の設定**

* 「対話開始時の質問」の入力欄に、あらかじめ用意する質問を入力します
* 例：「返品はどのように申請しますか？」「営業時間はいつですか？」
* 「<mark style="color:blue;">追加</mark>」ボタンをクリックして、質問をリストに加えます
* これらの質問は、ユーザーがクリックできるクイック選択肢として表示されます
* 削除する場合は、該当する項目の右側にある削除ボタンをクリックします

### 5. ログイン設定 <a href="#login-settings" id="login-settings"></a>

**SSOログインソースの設定**

* MaiAgent は現在、Keycloak との統合により SSO（Single Sign-On）サービスを実現できます
* 「<mark style="color:blue;">ログインソース</mark>」のドロップダウンメニューで切り替えます
* 認証方式として Maiagent または Keycloak を選択します

## <mark style="color:blue;">三、自動応答設定</mark> <a href="#auto-reply-settings" id="auto-reply-settings"></a>

ここでは、ボットが応答する時間帯を設定できます。

* 日付の横にあるスイッチをクリックする：週のうちどの曜日に応答するかを選択します。
* 時間帯を設定する：開始時刻と終了時刻を選択します。
* 時間帯を追加する：複数の時間帯を設定したい場合は、「<mark style="color:blue;">+時間帯を追加</mark>」を押して追加し、時間帯を設定できます。


---

# 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/maiagent-user-guide-ja/conversations/web-chat/website.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.