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

MaiGPT 視窗模式嵌入

以 MaiGPT 視窗模式將 ChatGPT 風格的完整對話介面直接嵌入您的網站，並提供深度研究與工具選擇。

除了常見的「右下角浮動按鈕」外，MaiAgent 的 Web Chat SDK 新增了 MaiGPT 視窗模式，讓您可以把一個 ChatGPT 風格的完整對話介面（左側對話歷史列表 + 右側主對話區）直接嵌入到自家頁面的任意位置，做為頁面的主要 UI，而不是縮在角落的小工具。

本頁說明「如何在自家網站嵌入 MaiGPT 視窗模式」。若您還沒有建立 Web Chat 對話平台，請先參考 串接對話平台：網站 完成基本設定。

MaiGPT 視窗模式不等於 MaiGPT 產品。 視窗模式只決定 Web Chat 的介面長相：套在哪個 Agent 的 Web Chat 上，就使用那個 Agent 的角色指令、模型與工具。組織內建的 MaiGPT 是給組織成員登入使用的工作台，兩者是不同的東西。

從哪裡開始？取得嵌入程式碼

本頁的嵌入程式碼是從 基本設定 取得的。依下列步驟操作：

1

進入對話平台設定

於 「 客服對話 > 對話平台 」 選擇您的 Web Chat 平台，點擊 「 操作 」 進入設定頁。

2

點擊「嵌入」

於 基本設定 找到公開訪問 URL 區塊，點擊 「 嵌入 」 按鈕開啟嵌入視窗。

基本設定中的嵌入按鈕
基本設定 > 嵌入
3

選擇 MaiGPT 嵌入方式

在視窗上方切換三種嵌入方式，選擇 「 MaiGPT 」：

嵌入方式
說明

JavaScript

以 <script> 載入，最常用

Iframe

以 <iframe> 直接嵌入

MaiGPT

本頁介紹的 ChatGPT 風格完整介面

左側可調整 嵌入容器（targetElement）、語系（locale）、標題（maigptTitle）。

嵌入視窗選擇 MaiGPT 方式，右側即時程式碼預覽
嵌入視窗 > 選擇 MaiGPT > 右側即時程式碼預覽
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>

各參數與兩種佈局（嵌入容器 / 右下角全屏按鈕）的完整說明，請見下方 三、嵌入設定。

一、什麼是 MaiGPT 視窗模式？

Web Chat SDK 共提供四種視窗模式，透過嵌入設定中的 enabledWindowModes 指定：

視窗模式
說明

floating

預設模式。右下角浮動按鈕，點擊後展開對話視窗。適合一般客服。

sidebar

側邊欄模式，從頁面側邊滑出對話視窗。

inline

行內模式，將對話視窗嵌入頁面內容區塊中。

maigpt

本頁介紹的模式。ChatGPT 風格的完整介面，預設展開對話歷史列表，可做為頁面主要 UI。

MaiGPT 視窗模式的特點：

MaiGPT 視窗模式介面總覽
MaiGPT 視窗模式：左側對話歷史列表 + 右側主對話區（ChatGPT 風格）

  • 完整介面：iframe 填滿您指定的容器（或整個瀏覽器視窗），左側為對話歷史列表、右側為主對話區

  • 無浮動按鈕、不可縮小：嵌入後即為頁面主體，不會有縮起的角落按鈕

  • 對話歷史預設展開：使用者一進來就能看到過去的對話紀錄

  • 進階功能入口：輸入區提供 深度研究 與 工具開關

二、前置條件

在嵌入 MaiGPT 視窗模式前，請先確認：

  1. MaiAgent 版本已支援 MaiGPT 視窗模式：MaiGPT 視窗模式為 Web Chat SDK 新增的功能，需要 SDK（embed.min.js）與後台皆為支援 MaiGPT 的版本。嵌入視窗才會出現 「 MaiGPT 」 選項。

  2. 已建立 Web Chat 對話平台，並取得該平台的 Web Chat ID（請參考 串接對話平台：網站）。

  3. 取得嵌入腳本：於對話平台設定頁點擊 「 嵌入 」 按鈕取得嵌入程式碼。

MaiAgent 雲端服務（chat.maiagent.ai）已內建 MaiGPT 視窗模式，可直接使用；若為私有部署或較舊版本，嵌入視窗可能不會出現 「 MaiGPT 」 選項，請先與 MaiAgent 確認並升級至支援的版本。

三、嵌入設定

1. 基本嵌入程式碼

從嵌入視窗複製的程式碼即可直接使用（見上方取得嵌入程式碼），貼在您網站的 </body> 標籤前。enabledWindowModes 為陣列，第一個元素即為預設視窗模式，要使用 MaiGPT 視窗模式請把 'maigpt' 放在第一項。

2. 兩種嵌入方式

是否設定 targetElement 會決定 MaiGPT 以哪一種方式呈現：

  • 嵌入到指定容器（設定 targetElement）：MaiGPT 常駐在您指定的區塊內，做為頁面主體，不顯示浮動按鈕、也不能切換視窗模式。適合 AI 入口網站或系統的主要工作區。

  • 右下角按鈕全螢幕開啟（不設定 targetElement）：頁面右下角出現一顆按鈕，點擊後以全螢幕開啟 MaiGPT，右上角可關閉回到按鈕。適合不想改動既有版面、只想加一個入口的情境。

未設定 targetElement 時，SDK 於右下角提供浮動按鈕
未設定 targetElement 時，頁面右下角出現按鈕，點擊後全螢幕開啟

兩種方式的完整程式碼、容器高度要求、找不到容器時的行為與 SPA 嵌入方式，請工程師參考技術手冊的 MaiGPT 模式嵌入。

四、設定參數說明

嵌入視窗產生的程式碼已帶好必要欄位：webChatId 與 baseUrl 必填，缺少時 MaiGPT 不會出現；enabledWindowModes 設為 ['maigpt']。左側可調整的 targetElement（嵌入容器）、locale（語系）、maigptTitle（側欄標題，預設顯示 MaiGPT）皆為選填。

全部欄位的型別與說明見技術手冊的 MaiGPT 模式嵌入：完整參數表；舊版的 defaultWindowMode 欄位已不建議使用，請改用 enabledWindowModes。

五、介面與功能

1. 對話歷史列表

MaiGPT 視窗模式左側為常駐的對話歷史列表（ChatGPT 風格），預設展開，使用者可：

  • 瀏覽並切換過去的對話

  • 開啟新對話

  • 收合 / 展開側欄

2. 深度研究

以 MaiGPT 視窗模式開啟時，輸入區會出現 深度研究（Deep Research） 入口。使用者可先點擊深度研究、再送出訊息，Agent 便會針對該則訊息執行深度研究。

深度研究的狀態會經歷：尚未使用 → 已啟動 → 執行中 → 完成 / 失敗。

深度研究進行中（執行中）時無法重複觸發；待「完成」或「失敗」後才能再次啟動。

3. 工具開關

以 MaiGPT 視窗模式開啟、且 Agent 有掛載工具時，使用者可在工具選單勾選這次要使用的工具，送出的訊息會指定使用勾選的工具；都不勾時，由 Agent 從所有可用工具中自行判斷。勾選只對目前這段對話有效。

4. 設定選單

點擊左下角的 設定，可開啟設定選單。實際顯示的項目會依該 Web Chat 的後台設定而定，可能包含：

  • 文字語言：切換介面語言

  • 文字大小：小 / 中 / 大（需後台開啟字級切換功能）

  • 主題模式：自動 / 淺色 / 深色（需後台開啟主題模式切換）

  • 語音語言：語音輸入所使用的語言

MaiGPT 視窗模式設定選單
設定選單（實際項目依後台設定而定）

六、注意事項

  • 響應式：MaiGPT 版面支援桌機與行動裝置，並支援深色模式。

  • 與既有模式相容：MaiGPT 為新增的視窗模式，不影響既有 floating / sidebar / inline 模式的行為；既有整合無須調整。

上一頁Markdown 渲染
下一頁串接對話平台：LINE

最後更新於

這有幫助嗎？