Ctrlk
註冊/登入
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

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

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

本ページでは「自社サイトに MaiGPT ウィンドウモードを埋め込む方法」を説明します。まだ Web Chat 対話プラットフォームを作成していない場合は、先に 対話プラットフォーム連携：Web サイト を参照して基本設定を完了してください。

はじめに：埋め込みコードの取得

本ページの埋め込みコードは 対話プラットフォーム設定 から取得します。以下の手順に従ってください。

1

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

「カスタマーサポート対話 > 対話プラットフォーム」から Web Chat プラットフォームを選択し、「操作」をクリックして設定ページに入ります。

2

「埋め込み」をクリック

基本設定 の公開アクセス URL セクションで、「埋め込み」ボタンをクリックして埋め込みウィンドウを開きます。

3

MaiGPT 埋め込み方式を選択

ウィンドウ上部で 3 種類の埋め込み方式を切り替え、「MaiGPT」を選択します。

埋め込み方式
説明

JavaScript

<script> で読み込む、最も一般的な方式

Iframe

<iframe> で直接埋め込む方式

MaiGPT

本ページで紹介する ChatGPT スタイルのフルインターフェース

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

4

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

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

<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 種類のレイアウト（埋め込みコンテナ / 右下フルスクリーンボタン）の詳しい説明は、下記の 三、埋め込み設定 をご覧ください。

一、MaiGPT ウィンドウモードとは？

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

ウィンドウモード
説明

floating

デフォルトモード。右下の浮動ボタンをクリックすると対話ウィンドウが展開します。一般的なカスタマーサポートに適しています。

sidebar

サイドバーモード。ページの側面から対話ウィンドウがスライドして表示されます。

inline

インラインモード。対話ウィンドウをページのコンテンツエリア内に埋め込みます。

maigpt

本ページで紹介するモード。ChatGPT スタイルのフルインターフェースで、対話履歴リストがデフォルトで展開され、ページのメイン UI として使用できます。

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

  • フルインターフェース：iframe が指定したコンテナ（またはブラウザウィンドウ全体）を埋め尽くし、左側は対話履歴リスト、右側はメイン対話エリアです

  • 浮動ボタンなし・最小化不可：埋め込み後はページの主要コンテンツとなり、コーナーに縮小されるボタンは表示されません

  • 対話履歴がデフォルトで展開：ユーザーはアクセスした時点で過去の対話記録をすぐに確認できます

  • 高度な機能への入口：バックエンドの設定に応じて Deep Research と ツールの切り替え を開放できます

二、前提条件

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

  1. MaiAgent のバージョンが MaiGPT ウィンドウモードに対応していること：MaiGPT ウィンドウモードは Web Chat SDK に新たに追加された機能であり、SDK（embed.min.js）とバックエンドの両方が MaiGPT 対応バージョンである必要があります。対応している場合のみ、埋め込みウィンドウに「MaiGPT」オプションが表示されます。

  2. Web Chat 対話プラットフォームを作成済みで、そのプラットフォームの Web Chat ID を取得していること（対話プラットフォーム連携：Web サイト を参照してください）。

  3. （任意）バックエンドで MaiGPT モードを有効にすること：Deep Research と ツールの切り替え をエンドユーザーに開放したい場合は、AI アシスタントのオーナーがバックエンドで当該 Web Chat の MaiGPT モードを有効にする必要があります。有効にしていない場合でも、MaiGPT のレイアウトは正常に表示されますが、高度な機能の入口は表示されません。

  4. 埋め込みスクリプトを取得すること：対話プラットフォーム設定ページで「埋め込み」ボタンをクリックして埋め込みコードを取得します。

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

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

三、埋め込み設定

1. 基本的な埋め込みコード

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

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

2. 2 種類の埋め込み方式

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

targetElement を設定すると、SDK は MaiGPT インターフェースをその要素内に直接マウントします。

  • iframe が targetElement を埋め尽くします（<body> を指定した場合はブラウザウィンドウ全体を埋め尽くします）

  • 浮動ボタンは表示されず、ユーザーはウィンドウモードを切り替えることができません。MaiGPT がページの主要コンテンツとなります

  • targetElement には CSS セレクター文字列（例：'#maigpt-container'）または HTMLElement オブジェクト（例：document.getElementById('maigpt')）を指定できます

targetElement を設定しない場合、SDK はページ右下にボタンを表示し、クリックするとフルスクリーンで画面全体を覆う形で MaiGPT が開きます。右上に閉じるボタンが表示されます。

  • 既存のページレイアウトを変更せず、入口だけを追加したい場合に適しています

  • 右下のボタンをクリック → フルスクリーンで MaiGPT が開く。右上の閉じるをクリック → ボタン状態に戻ります

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

四、設定パラメータの説明

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

フィールド
必須かどうか
説明

webChatId

必須

Web Chat 対話プラットフォーム ID。

baseUrl

推奨

MaiAgent サービスの URL。形式は https://あなたのドメイン/web-chats です。

enabledWindowModes

必須（本モード）

有効にするウィンドウモードの配列。最初の項目がデフォルト値になります。MaiGPT モードの場合は ['maigpt'] に設定してください。

targetElement

任意

MaiGPT をマウントする対象要素。CSS セレクター文字列または HTMLElement を指定できます。省略した場合は右下ボタンのフルスクリーンモードになります（上記の方式二を参照）。

maigptTitle

任意

サイドバー左上に表示するブランドタイトル。設定しない場合はデフォルトで MaiGPT と表示されます。

contactId

任意

連絡先 ID。エンドユーザーの識別に使用します。

locale

任意

インターフェースの言語。例：'ja'、'en'。多言語に対応しています。

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

五、インターフェースと機能

1. 対話履歴リスト

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

  • 過去の対話を閲覧・切り替える

  • 新しい対話を開始する

  • サイドバーを折りたたむ / 展開する

2. Deep Research

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

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

Deep Research の実行中は再度トリガーできません。「完了」または「失敗」の後に再び起動できます。

3. ツールの切り替え

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

4. 設定メニュー

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

  • テキスト言語：インターフェースの言語を切り替え

  • テキストサイズ：小 / 中 / 大（バックエンドでフォントサイズ切り替え機能を有効にする必要があります）

  • テーマモード：自動 / ライト / ダーク（バックエンドでテーマモード切り替えを有効にする必要があります）

  • 音声言語：音声入力で使用する言語

六、注意事項

  • レスポンシブ対応：MaiGPT のレイアウトはデスクトップとモバイルデバイスの両方に対応しており、ダークモードもサポートしています。

  • 既存モードとの互換性：MaiGPT は新たに追加されたウィンドウモードであり、既存の floating / sidebar / inline モードの動作には影響しません。既存の統合を調整する必要はありません。

  • 高度な機能はバックエンドに依存：Deep Research とツールの切り替えが表示されるかどうかは、バックエンドで当該 Web Chat の MaiGPT モードが有効になっているかに依存します。有効になっていない場合でも、純粋な対話インターフェースとして使用できます。

前へMarkdown レンダリング
次へ対話プラットフォーム設定総覧

最終更新

役に立ちましたか？