> 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/maigpt-embed.md).

# MaiGPT ウィンドウモード埋め込み

MaiGPT ウィンドウモードで ChatGPT スタイルのフル対話インターフェースを自社サイトに直接埋め込み、Deep Research やツールの切り替えを開放できます。

一般的な「右下の浮動ボタン」に加え、MaiAgent の Web Chat SDK には **MaiGPT ウィンドウモード** が追加されました。**ChatGPT スタイルのフル対話インターフェース**（左側に対話履歴リスト + 右側にメイン対話エリア）を自社ページの任意の場所に直接埋め込み、コーナーに縮小される小さなウィジェットではなく、ページのメイン UI として使用できます。

{% hint style="info" %}
本ページでは「自社サイトに MaiGPT ウィンドウモードを埋め込む方法」を説明します。まだ Web Chat 対話プラットフォームを作成していない場合は、先に [対話プラットフォーム連携：Web サイト](/maiagent-user-guide/ja/conversations/web-chat/website.md) を参照して基本設定を完了してください。
{% endhint %}

## <mark style="color:blue;">はじめに：埋め込みコードの取得</mark> <a href="#where-to-start" id="where-to-start"></a>

本ページの埋め込みコードは [基本設定](/maiagent-user-guide/ja/conversations/platform-settings/basic-settings.md#public-url-and-embed) から取得します。以下の手順に従ってください。

{% stepper %}
{% step %}

### 対話プラットフォーム設定に入る

「<mark style="color:blue;">カスタマーサポート対話 > 対話プラットフォーム</mark>」から Web Chat プラットフォームを選択し、「<mark style="color:blue;">操作</mark>」をクリックして設定ページに入ります。
{% endstep %}

{% step %}

### 「埋め込み」をクリック

<mark style="color:blue;">基本設定</mark> の公開アクセス URL セクションで、「<mark style="color:blue;">埋め込み</mark>」ボタンをクリックして埋め込みウィンドウを開きます。
{% endstep %}

{% step %}

### MaiGPT 埋め込み方式を選択

ウィンドウ上部で 3 種類の埋め込み方式を切り替え、「<mark style="color:blue;">MaiGPT</mark>」を選択します。

| 埋め込み方式     | 説明                                    |
| ---------- | ------------------------------------- |
| JavaScript | `<script>` で読み込む、最も一般的な方式             |
| Iframe     | `<iframe>` で直接埋め込む方式                  |
| **MaiGPT** | **本ページで紹介する ChatGPT スタイルのフルインターフェース** |

左側で埋め込みコンテナ（`targetElement`）、言語（`locale`）、タイトル（`maigptTitle`）を調整できます。
{% endstep %}

{% step %}

### コードをコピーして自社サイトに貼り付け

右側の <mark style="color:blue;">コードプレビュー</mark> は左側の設定に応じてリアルタイムで更新されます。「<mark style="color:blue;">コピー</mark>」をクリックして、以下のような埋め込みコードを取得します。

```html
<script>
  window.maiagentChatbotConfig = {
    webChatId: 'あなたの Web Chat ID',
    baseUrl: 'https://あなたの-maiagent-ドメイン/web-chats',
    enabledWindowModes: ['maigpt'],
    targetElement: '#maigpt-container',
  }
</script>
<script src="https://あなたの-maiagent-ドメイン/js/embed.min.js" defer></script>
```

各パラメータと 2 種類のレイアウト（埋め込みコンテナ / 右下フルスクリーンボタン）の詳しい説明は、下記の [三、埋め込み設定](#embed-setup) をご覧ください。
{% endstep %}
{% endstepper %}

## <mark style="color:blue;">一、MaiGPT ウィンドウモードとは？</mark> <a href="#what-is-maigpt-mode" id="what-is-maigpt-mode"></a>

Web Chat SDK は 4 種類のウィンドウモードを提供しており、埋め込み設定の `enabledWindowModes` で指定します。

<table><thead><tr><th width="140">ウィンドウモード</th><th>説明</th></tr></thead><tbody><tr><td><code>floating</code></td><td>デフォルトモード。右下の浮動ボタンをクリックすると対話ウィンドウが展開します。一般的なカスタマーサポートに適しています。</td></tr><tr><td><code>sidebar</code></td><td>サイドバーモード。ページの側面から対話ウィンドウがスライドして表示されます。</td></tr><tr><td><code>inline</code></td><td>インラインモード。対話ウィンドウをページのコンテンツエリア内に埋め込みます。</td></tr><tr><td><code>maigpt</code></td><td><strong>本ページで紹介するモード</strong>。ChatGPT スタイルのフルインターフェースで、対話履歴リストがデフォルトで展開され、ページのメイン UI として使用できます。</td></tr></tbody></table>

MaiGPT ウィンドウモードの特徴：

* **フルインターフェース**：iframe が指定したコンテナ（またはブラウザウィンドウ全体）を埋め尽くし、左側は対話履歴リスト、右側はメイン対話エリアです
* **浮動ボタンなし・最小化不可**：埋め込み後はページの主要コンテンツとなり、コーナーに縮小されるボタンは表示されません
* **対話履歴がデフォルトで展開**：ユーザーはアクセスした時点で過去の対話記録をすぐに確認できます
* **高度な機能への入口**：バックエンドの設定に応じて [Deep Research](#deep-research) と [ツールの切り替え](#tool-toggle) を開放できます

## <mark style="color:blue;">二、前提条件</mark> <a href="#prerequisites" id="prerequisites"></a>

MaiGPT ウィンドウモードを埋め込む前に、以下を確認してください。

1. **MaiAgent のバージョンが MaiGPT ウィンドウモードに対応していること**：MaiGPT ウィンドウモードは Web Chat SDK に新たに追加された機能であり、SDK（`embed.min.js`）とバックエンドの両方が MaiGPT 対応バージョンである必要があります。対応している場合のみ、埋め込みウィンドウに「<mark style="color:blue;">MaiGPT</mark>」オプションが表示されます。
2. **Web Chat 対話プラットフォームを作成済み**で、そのプラットフォームの **Web Chat ID** を取得していること（[対話プラットフォーム連携：Web サイト](/maiagent-user-guide/ja/conversations/web-chat/website.md) を参照してください）。
3. **（任意）バックエンドで MaiGPT モードを有効にすること**：[Deep Research](#deep-research) と [ツールの切り替え](#tool-toggle) をエンドユーザーに開放したい場合は、AI アシスタントのオーナーがバックエンドで当該 Web Chat の MaiGPT モードを有効にする必要があります。有効にしていない場合でも、MaiGPT のレイアウトは正常に表示されますが、高度な機能の入口は表示されません。
4. **埋め込みスクリプトを取得すること**：対話プラットフォーム設定ページで「<mark style="color:blue;">埋め込み</mark>」ボタンをクリックして埋め込みコードを取得します。

{% hint style="info" %}
MaiAgent クラウドサービス（`chat.maiagent.ai`）には MaiGPT ウィンドウモードが標準搭載されており、すぐにご利用いただけます。プライベートデプロイまたは旧バージョンの場合、埋め込みウィンドウに「<mark style="color:blue;">MaiGPT</mark>」オプションが表示されないことがあります。その場合は MaiAgent にお問い合わせのうえ、対応バージョンへアップグレードしてください。
{% endhint %}

{% hint style="warning" %}
Deep Research とツールの切り替えの権限は完全にバックエンドで制御されます。フロントエンドは入口の表示 / 非表示のみを担当し、実際に利用可能かどうかはバックエンドの MaiGPT モード設定に依存します。
{% endhint %}

## <mark style="color:blue;">三、埋め込み設定</mark> <a href="#embed-setup" id="embed-setup"></a>

### 1. 基本的な埋め込みコード <a href="#basic-embed-code" id="basic-embed-code"></a>

自社サイトの `</body>` タグの前に、以下のスクリプトを追加して `window.maiagentChatbotConfig` を設定します。

{% code title="MaiGPT ウィンドウモードの埋め込み" overflow="wrap" lineNumbers="true" %}

```html
<script>
  window.maiagentChatbotConfig = {
    webChatId: 'あなたの Web Chat ID',
    baseUrl: 'https://あなたの-maiagent-ドメイン/web-chats',
    enabledWindowModes: ['maigpt'],
    targetElement: '#maigpt-container',
    locale: 'ja',
  }
</script>
<script src="https://あなたの-maiagent-ドメイン/js/embed.min.js"></script>
```

{% endcode %}

{% hint style="info" %}
`enabledWindowModes` は配列であり、**最初の要素がデフォルトのウィンドウモード**になります。MaiGPT ウィンドウモードを使用するには、`['maigpt']` を最初に設定してください。
{% endhint %}

### 2. 2 種類の埋め込み方式 <a href="#two-embed-methods" id="two-embed-methods"></a>

`targetElement` を設定するかどうかによって、MaiGPT の表示方式が変わります。

{% tabs %}
{% tab title="方式一：指定コンテナへの埋め込み" %}
**`targetElement` を設定**すると、SDK は MaiGPT インターフェースをその要素内に直接マウントします。

```html
<div id="maigpt-container" style="width: 100%; height: 100vh;"></div>
<script>
  window.maiagentChatbotConfig = {
    webChatId: 'あなたの Web Chat ID',
    baseUrl: 'https://あなたの-maiagent-ドメイン/web-chats',
    enabledWindowModes: ['maigpt'],
    targetElement: '#maigpt-container',
  }
</script>
<script src="https://あなたの-maiagent-ドメイン/js/embed.min.js"></script>
```

* iframe が `targetElement` を埋め尽くします（`<body>` を指定した場合はブラウザウィンドウ全体を埋め尽くします）
* 浮動ボタンは表示されず、ユーザーはウィンドウモードを切り替えることができません。MaiGPT がページの主要コンテンツとなります
* `targetElement` には **CSS セレクター文字列**（例：`'#maigpt-container'`）または **HTMLElement オブジェクト**（例：`document.getElementById('maigpt')`）を指定できます
  {% endtab %}

{% tab title="方式二：右下ボタンからフルスクリーンで開く" %}
**`targetElement` を設定しない**場合、SDK はページ右下にボタンを表示し、クリックするとフルスクリーンで画面全体を覆う形で MaiGPT が開きます。右上に閉じるボタンが表示されます。

```html
<script>
  window.maiagentChatbotConfig = {
    webChatId: 'あなたの Web Chat ID',
    baseUrl: 'https://あなたの-maiagent-ドメイン/web-chats',
    enabledWindowModes: ['maigpt'],
  }
</script>
<script src="https://あなたの-maiagent-ドメイン/js/embed.min.js"></script>
```

* 既存のページレイアウトを変更せず、入口だけを追加したい場合に適しています
* 右下のボタンをクリック → フルスクリーンで MaiGPT が開く。右上の閉じるをクリック → ボタン状態に戻ります
  {% endtab %}
  {% endtabs %}

{% hint style="info" %}
`targetElement` で指定したセレクターがページ上に見つからない場合、SDK は自動的に `<body>` にマウントし、ブラウザの Console に警告メッセージを出力します（初期化は中断されません）。
{% endhint %}

## <mark style="color:blue;">四、設定パラメータの説明</mark> <a href="#config-reference" id="config-reference"></a>

`window.maiagentChatbotConfig` のよく使われるフィールド：

<table><thead><tr><th width="200">フィールド</th><th width="120">必須かどうか</th><th>説明</th></tr></thead><tbody><tr><td><code>webChatId</code></td><td>必須</td><td>Web Chat 対話プラットフォーム ID。</td></tr><tr><td><code>baseUrl</code></td><td>推奨</td><td>MaiAgent サービスの URL。形式は <code>https://あなたのドメイン/web-chats</code> です。</td></tr><tr><td><code>enabledWindowModes</code></td><td>必須（本モード）</td><td>有効にするウィンドウモードの配列。最初の項目がデフォルト値になります。MaiGPT モードの場合は <code>['maigpt']</code> に設定してください。</td></tr><tr><td><code>targetElement</code></td><td>任意</td><td>MaiGPT をマウントする対象要素。CSS セレクター文字列または HTMLElement を指定できます。省略した場合は右下ボタンのフルスクリーンモードになります（上記の方式二を参照）。</td></tr><tr><td><code>maigptTitle</code></td><td>任意</td><td>サイドバー左上に表示するブランドタイトル。設定しない場合はデフォルトで <code>MaiGPT</code> と表示されます。</td></tr><tr><td><code>contactId</code></td><td>任意</td><td>連絡先 ID。エンドユーザーの識別に使用します。</td></tr><tr><td><code>locale</code></td><td>任意</td><td>インターフェースの言語。例：<code>'ja'</code>、<code>'en'</code>。多言語に対応しています。</td></tr></tbody></table>

{% hint style="warning" %}
旧バージョンの `defaultWindowMode` フィールドは**非推奨**です。代わりに `enabledWindowModes`（配列の最初の項目がデフォルト値）を使用してください。
{% endhint %}

## <mark style="color:blue;">五、インターフェースと機能</mark> <a href="#ui-features" id="ui-features"></a>

### 1. 対話履歴リスト <a href="#conversation-history" id="conversation-history"></a>

MaiGPT ウィンドウモードの左側には常駐の対話履歴リスト（ChatGPT スタイル）があり、デフォルトで展開されています。ユーザーは以下の操作が可能です。

* 過去の対話を閲覧・切り替える
* 新しい対話を開始する
* サイドバーを折りたたむ / 展開する

### 2. Deep Research <a href="#deep-research" id="deep-research"></a>

当該 Web Chat のバックエンドで MaiGPT モードが有効になっている場合、入力エリアに **Deep Research** の入口が表示されます。ユーザーは先に Deep Research をクリックしてからメッセージを送信すると、AI アシスタントがそのメッセージに対して Deep Research を実行します。

Deep Research のステータスは `未使用 → 起動済み → 実行中 → 完了 / 失敗` と遷移します。

{% hint style="info" %}
Deep Research の実行中は再度トリガーできません。「完了」または「失敗」の後に再び起動できます。
{% endhint %}

### 3. ツールの切り替え <a href="#tool-toggle" id="tool-toggle"></a>

同様に MaiGPT モードが有効な場合、ユーザーはツールメニューから AI アシスタントに接続されたツールのオン / オフを切り替え、今回の対話で特定のツールを使用するかどうかを制御できます。変更は即時反映されます。

### 4. 設定メニュー <a href="#settings-menu" id="settings-menu"></a>

左下の <mark style="color:blue;">設定</mark> をクリックすると、設定メニューが開きます。実際に表示される項目は、当該 Web Chat のバックエンド設定によって異なりますが、以下が含まれる場合があります。

* **テキスト言語**：インターフェースの言語を切り替え
* **テキストサイズ**：小 / 中 / 大（バックエンドでフォントサイズ切り替え機能を有効にする必要があります）
* **テーマモード**：自動 / ライト / ダーク（バックエンドでテーマモード切り替えを有効にする必要があります）
* **音声言語**：音声入力で使用する言語

## <mark style="color:blue;">六、注意事項</mark> <a href="#notes" id="notes"></a>

{% hint style="info" %}

* **レスポンシブ対応**：MaiGPT のレイアウトはデスクトップとモバイルデバイスの両方に対応しており、ダークモードもサポートしています。
* **既存モードとの互換性**：MaiGPT は新たに追加されたウィンドウモードであり、既存の `floating` / `sidebar` / `inline` モードの動作には影響しません。既存の統合を調整する必要はありません。
* **高度な機能はバックエンドに依存**：Deep Research とツールの切り替えが表示されるかどうかは、バックエンドで当該 Web Chat の MaiGPT モードが有効になっているかに依存します。有効になっていない場合でも、純粋な対話インターフェースとして使用できます。
  {% endhint %}


---

# 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/maigpt-embed.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.