開發者文件

把 Live Chat 接進你的網站與管理後台

聊天視窗只要一行 script 標籤。另外還有給你自己按鈕用的 JavaScript API、從管理後台直接進入的單一登入，以及能讓 AI 助理幫你串接的 MCP 伺服器。

加上聊天視窗

在每個要顯示聊天的頁面，把這段標籤貼在 </body> 前面。工作區 ID 在「設定 › 一般」，也可以在「設定 › 聊天視窗」直接複製整段標籤。

這支 script 很輕，訪客打開聊天之前不會再載入任何東西。純 HTML、WordPress、Shopify、Next.js 或單頁應用程式都能用。

<script src="https://chat.hibira.io/w/v1.js"
        data-workspace="ws_..." async></script>

請在「設定 › 聊天視窗 › 允許使用聊天視窗的網站」加入每個網站的網址，其他網站無法啟動聊天視窗。

聊天視窗選項

在 script 標籤上設定以下屬性。

<script src="https://chat.hibira.io/w/v1.js"
        data-workspace="ws_..."
        data-color="#0f766e"
        data-lang="ja"
        async></script>

屬性	說明
`data-workspace`	必填。你的工作區 ID（ws_...）。
`data-color`	按鈕與標題列的顏色，用十六進位色碼表示，例如 #0f766e。預設 #4f46e5。
`data-lang`	聊天視窗的語言：en、ja、ko、zh-TW、zh-CN、th 或 vi。預設跟隨訪客的瀏覽器語言。
`data-launcher="none"`	不顯示圓形聊天按鈕，改由頁面上你自己的按鈕開啟聊天（見 JavaScript API）。
`nonce`	在設有嚴格 Content-Security-Policy 的頁面上，聊天視窗會把 script 標籤的 nonce 加到它新增的樣式和 script 上。

JavaScript API

script 載入後，頁面可以用 window.HibiraLiveChat 開啟或關閉聊天。如果你的程式可能比聊天視窗更早執行，請監聽 hibira-livechat:ready 事件。

<button type="button" id="talk-to-sales">Talk to sales</button>

<script src="https://chat.hibira.io/w/v1.js"
        data-workspace="ws_..." data-launcher="none" async></script>
<script>
  document.getElementById("talk-to-sales").addEventListener("click", function () {
    if (window.HibiraLiveChat) window.HibiraLiveChat.open({ topic: "sales" });
  });
  window.addEventListener("hibira-livechat:ready", function () {
    // The widget is loaded: HibiraLiveChat.open() and .close() work now.
  });
</script>

呼叫或事件	說明
`HibiraLiveChat.open()`	開啟聊天面板。
`HibiraLiveChat.open({ topic: "sales" })`	開啟聊天，並把新對話標記為銷售諮詢，團隊在收件匣也會看到這個標記。
`HibiraLiveChat.close()`	關閉聊天面板。
`hibira-livechat:ready`	聊天視窗載入完成時在 window 上觸發的事件。
`hibira_chat_open, hibira_chat_start, hibira_chat_message, hibira_chat_rating`	在「設定 › 聊天視窗」開啟分析後，會送到你網站上現有 gtag 或 Tag Manager 的 Google Analytics 事件。不會傳送任何個人資料。

Content-Security-Policy

如果你的網站有嚴格的 Content-Security-Policy，請允許下列主機，並在 script 標籤加上頁面的 nonce。聊天視窗會把這個 nonce 帶到它新增的所有內容上。

challenges.cloudflare.com 用於新訪客第一則訊息的防垃圾訊息檢查。

script-src  'nonce-R4nd0m' https://chat.hibira.io https://challenges.cloudflare.com;
style-src   'nonce-R4nd0m';
connect-src https://chat.hibira.io wss://*.hibira.io;
img-src     https://chat.hibira.io data:;
frame-src   https://challenges.cloudflare.com;

<script src="https://chat.hibira.io/w/v1.js" nonce="R4nd0m"
        data-workspace="ws_..." async></script>

客服單一登入（JWT） Starter 以上

員工不用另一組密碼，就能從你自己的管理後台直接進入 Live Chat 收件匣。你的伺服器為已登入的員工簽發一個短效權杖，再把他們導向 Live Chat。

在「團隊 › 單一登入」開啟單一登入並複製密鑰。
密鑰只存在伺服器上，例如放在環境變數 HIBIRA_LIVECHAT_SSO_SECRET。千萬不要放進瀏覽器端的程式碼。
在管理後台加一個連結，指向你自己的路由：確認使用者是員工、簽發下面的權杖，再導向 /sso/jwt。
第一次登入的人，只要還有空位就會自動加為客服。每次登入時，角色都會依權杖內容更新。

import crypto from "node:crypto";

const b64 = (v) => Buffer.from(JSON.stringify(v)).toString("base64url");

// Build a new URL on every click, behind your admin panel's own login.
export function liveChatSsoUrl(user) {
  const now = Math.floor(Date.now() / 1000);
  const head = b64({ alg: "HS256", typ: "JWT" });
  const body = b64({
    iss: "ws_...",                 // your Workspace ID
    sub: String(user.id),          // the user's ID in your system
    email: user.email,
    name: user.name,
    role: user.isAdmin ? "admin" : "agent",
    jti: crypto.randomUUID(),      // single use
    iat: now,
    exp: now + 120,                // 5 minutes at most
  });
  const sig = crypto
    .createHmac("sha256", process.env.HIBIRA_LIVECHAT_SSO_SECRET)
    .update(head + "." + body)
    .digest("base64url");
  return "https://chat.hibira.io/sso/jwt?" + new URLSearchParams({
    jwt: head + "." + body + "." + sig,
    return_to: "/inbox",
  });
}

Claim	意思
`iss`	必填。你的工作區 ID。
`sub`	必填。使用者在你系統中的 ID（最多 200 字元）。即使 Email 變了，仍會對應到同一位客服。
`email`	必填。使用者的 Email。
`name`	選填。訪客和同事看到的名字。
`role`	選填。agent（預設）或 admin。
`jti`	必填。這個權杖的唯一 ID（最多 128 字元），每個權杖只能用一次。
`iat`	選填。簽發時間（Unix 秒）。
`exp`	必填。到期時間（Unix 秒），最多為現在起 5 分鐘。

用 HS256 簽章，把權杖以 ?jwt= 送到 /sso/jwt。加上 return_to（例如 /inbox）可以指定登入後的頁面。
容許最多 30 秒的時鐘誤差。
更換密鑰後，舊密鑰還能用 24 小時，部署新密鑰時不會中斷。
確認能正常登入後，開啟「只允許單一登入」：客服只能從你的管理後台登入，擁有者仍可用 Email。

Node.js、Laravel、PHP、Python、Django、Rails、Go、Java 和 .NET 的現成程式碼，可以透過下面的 MCP 伺服器取得。

AI 助理（MCP）

透過 Live Chat 的 MCP 伺服器，Claude、Cursor、VS Code 等 AI 助理可以在你自己的程式碼裡串好單一登入。AI 助理會在瀏覽器中用你的 Live Chat 帳號登入，只有工作區擁有者和管理員能核准。

SSO 密鑰永遠不會經過 MCP。AI 助理會讀取設定、依你的技術棧寫出程式碼，並在不讓任何人登入的情況下檢查它簽出的權杖。

# Claude Code
claude mcp add --transport http hibira-live-chat https://chat.hibira.io/mcp

# Any client with remote MCP servers (Cursor, VS Code, ...)
{ "mcpServers": { "hibira-live-chat": { "url": "https://chat.hibira.io/mcp" } } }

工具	說明
`get_sso_setup`	單一登入是否開啟、工作區 ID、登入網址、權杖的 claim 與限制，以及剩餘席位。
`get_sso_snippet`	依你的技術棧產生簽發權杖並導向員工的伺服器端程式碼，已填好你的工作區 ID。
`check_sso_token`	用和正式登入完全相同的方式檢查權杖，列出所有問題，且不會用掉這個權杖。
`list_agents`	工作區的客服、角色、加入方式與最後上線時間。
`set_sso_only`	開啟或關閉「只允許單一登入」，僅限擁有者。

適用於 Claude Code、Cursor、Codex 和 Gemini CLI 的 Hibira 外掛已內建這個伺服器。要一次中斷所有 AI App，請到「團隊 › 單一登入 › 中斷 AI App 連線」。

REST API 與 Webhook 即將推出

Team 以上方案即將提供對話、訊息與評分的 REST API，以及新對話、新訊息與新評分的 Webhook。上線後會在這一頁說明。

在那之前，你可以從收件匣把對話匯出成 CSV 或 JSON，或在「設定 › 資料與隱私」匯出整個工作區。

給 AI 工具

給 AI 助理和回答引擎讀的 Live Chat 純文字摘要：/llms.txt 是精簡版，/llms-full.txt 收錄這份文件與每個功能頁的完整內容。

curl https://chat.hibira.io/llms.txt
curl https://chat.hibira.io/llms-full.txt

搶先排進名單

留下 Email，輪到你時我們會第一時間寄出邀請。

加入候補名單