Iframe 嵌入

將完整的聊天介面嵌入頁面區塊中。

將代理程式以完整介面嵌入頁面中，取代浮動小工具。非常適合用於專屬的支援頁面或說明中心。

何時該使用 Iframe

在以下情況適合使用 iframe 嵌入：

建立專屬的聊天頁面（例如 /support 或 /help）
讓聊天介面成為頁面版面的一部分
更精確地控制聊天介面的尺寸
嵌入說明文件或協助中心區塊

若想使用浮動聊天氣泡，請改用 JavaScript 小工具。

基本 Iframe 嵌入

前往你代理程式的發布分頁
選擇 Iframe 嵌入類型
複製顯示的 iframe 程式碼
貼到你的 HTML 中

你的 iframe 程式碼會自動帶入正確的網址與代理程式 ID。你也可以點選「前往」按鈕預覽 iframe 頁面。

尺寸選項

從 Chatbot > 發布 複製 iframe 程式碼後，你可以調整其尺寸：

固定尺寸

設定明確的寬度與高度屬性：

width="400"
height="600"

全寬

使用百分比寬度：

width="100%"
height="600"

全高（於容器內）

包在具有視窗高度的容器中：

<div style="height: 80vh;">
  <!-- Your iframe with width="100%" height="100%" -->
</div>

響應式容器

若要讓聊天介面隨螢幕尺寸自動調整，請將 iframe 包在容器中：

<div style="position: relative; width: 100%; max-width: 500px; height: 0; padding-bottom: 120%;">
  <!-- Your iframe with position: absolute; top: 0; left: 0; width: 100%; height: 100%; -->
</div>

設定容器樣式

為你的 iframe 加上 CSS 樣式，讓外觀更精緻：

加上邊框

style="border: 1px solid #e5e7eb; border-radius: 8px;"

加上陰影

style="border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);"

範例：支援頁面

<!DOCTYPE html>
<html>
<head>
  <title>Support - Your Company</title>
  <style>
    .support-container {
      max-width: 800px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .chat-frame {
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="support-container">
    <h1>How can we help?</h1>
    <p>Chat with our AI assistant below:</p>

    <div class="chat-frame">
      <!-- Paste your iframe code from Chatbot > Publish here -->
    </div>
  </div>
</body>
</html>

React / Next.js

export function SupportChat() {
  // Get iframe URL from Chatbot > Publish
  const iframeUrl = 'YOUR_IFRAME_URL';

  return (
    <iframe
      src={iframeUrl}
      className="w-full h-[600px] border rounded-lg"
    />
  );
}

網域限制

iframe 嵌入同樣會遵循網域限制：

將你網站的網域加入允許的網域清單
iframe 不會在未經授權的網域上載入

設定網域 →

疑難排解

Iframe 未載入

確認網域限制中已包含你的網站
確認代理程式 ID 正確無誤
檢查瀏覽器主控台是否有錯誤訊息

捲動問題

為 iframe 設定固定高度
或在容器上使用 overflow: hidden

樣式衝突

iframe 與你頁面的樣式彼此隔離
容器樣式不會影響聊天內容

後續步驟

自訂聊天外觀
設定網域限制
若想使用浮動聊天，請改用 JavaScript 小工具