開発者ドキュメント

Live Chat をサイトと管理画面に組み込む

ウィジェットはスクリプトタグ 1 行。自社のボタン用の小さな JavaScript API、管理画面からのシングルサインオン、そして AI アシスタントに組み込みを任せられる MCP サーバーがあります。

ウィジェットを設置する

チャットを表示したいすべてのページで、このタグを </body> の直前に貼り付けてください。ワークスペース ID は「設定 › 一般」にあります。「設定 › ウィジェット」からタグごとコピーすることもできます。

スクリプトは軽量で、訪問者がチャットを開くまでほかには何も読み込みません。静的 HTML、WordPress、Shopify、Next.js、SPA など、どんなサイトでも動きます。

<script src="https://chat.hibira.io/w/v1.js"
        data-workspace="ws_..." async></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 のような 16 進数で指定します。既定値は #4f46e5。
`data-lang`	ウィジェットの言語：en、ja、ko、zh-TW、zh-CN、th、vi。既定では訪問者のブラウザの言語です。
`data-launcher="none"`	丸いチャットボタンを表示しません。ページ側のボタンからチャットを開けます（JavaScript API を参照）。
`nonce`	厳しい Content-Security-Policy のページでは、ウィジェットが追加するスタイルとスクリプトにスクリプトタグの nonce を付けます。

JavaScript API

スクリプトの読み込み後は、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 アナリティクスのイベントです。個人情報は送りません。

Content-Security-Policy

サイトが厳しい Content-Security-Policy を送っている場合は、下のホストを許可し、スクリプトタグにページの 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",
  });
}

クレーム	意味
`iss`	必須。ワークスペース ID。
`sub`	必須。自社システムでのユーザー ID（200 文字まで）。メールアドレスが変わっても同じオペレーターとして扱います。
`email`	必須。ユーザーのメールアドレス。
`name`	任意。訪問者やチームに表示される名前。
`role`	任意。agent（既定）または admin。
`jti`	必須。このトークン固有の ID（128 文字まで）。各トークンは 1 回だけ使えます。
`iat`	任意。署名した時刻（Unix 秒）。
`exp`	必須。有効期限（Unix 秒）。現在から最大 5 分です。

HS256 で署名し、トークンを ?jwt= として /sso/jwt に送ります。return_to に /inbox などのパスを付けると、ログイン後の移動先を指定できます。
時計のずれは 30 秒まで許容します。
シークレットを再発行しても、以前のものは 24 時間有効です。停止せずに新しいシークレットをデプロイできます。
動作を確認したら「シングルサインオンのみ」をオンにしましょう。オペレーターは管理画面からしかログインできなくなります。オーナーは引き続きメールでもログインできます。

Node.js、Laravel、PHP、Python、Django、Rails、Go、Java、.NET 向けのコードは、下の MCP サーバーから取得できます。

AI アシスタント（MCP）

Live Chat の MCP サーバーを使うと、Claude、Cursor、VS Code などの AI アシスタントが自社のコードにシングルサインオンを組み込めます。アシスタントはブラウザで Live Chat アカウントにログインし、承認できるのはワークスペースのオーナーと管理者だけです。

SSO のシークレットが MCP を通ることはありません。アシスタントは設定を読み、使っているスタックに合ったコードを書き、署名したトークンを誰もログインさせずに検証します。

# 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、ログイン URL、トークンのクレームと制限、空き席。
`get_sso_snippet`	トークンを署名してスタッフをリダイレクトするサーバーコード。ワークスペース ID は入力済みです。
`check_sso_token`	本番のログインとまったく同じ方法でトークンを検証し、問題点をすべて返します。トークンは消費しません。
`list_agents`	ワークスペースのオペレーター、ロール、追加された方法、最終アクセス日時。
`set_sso_only`	「シングルサインオンのみ」をオン・オフします。オーナーのみ。

Claude Code、Cursor、Codex、Gemini CLI 向けの Hibira プラグインには、このサーバーがすでに含まれています。すべての AI アプリの接続をまとめて解除するには、「チーム › シングルサインオン › AI アプリの接続を解除」を使います。

REST API と Webhook 近日公開

会話・メッセージ・評価の REST API と、新しい会話・メッセージ・評価の Webhook を Team プラン以上で提供予定です。準備ができしだい、このページで説明します。

それまでは、会話を受信箱から 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

いち早くご案内します

メールアドレスを登録いただければ、順番が来次第、招待をお送りします。

ウェイトリストに登録