Build Live Chat into your site and admin panel

Add the widget

Paste this tag before </body> on every page that should show the chat. Find your Workspace ID in Settings › General, or copy the whole tag from Settings › Widget.

The script is small and loads nothing else until a visitor opens the chat. It works on any site: plain HTML, WordPress, Shopify, Next.js or a single-page app.

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

Add each site's address under Settings › Widget › Sites the widget may run on. The widget refuses other sites.

Widget options

Set these attributes on the script tag.

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

JavaScript API

Once the script has loaded, window.HibiraLiveChat lets your page open and close the chat. Listen for the hibira-livechat:ready event if your code may run before the widget loads.

<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>

Content-Security-Policy

If your site sends a strict Content-Security-Policy, allow the hosts below and put your page's nonce on the script tag. The widget passes that nonce on to everything it adds.

challenges.cloudflare.com runs the spam check on a new visitor's first message.

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>

Agent single sign-on (JWT) Starter and up

Let your staff go from your own admin panel straight into the Live Chat inbox, without a separate password. Your server signs a short-lived token for the signed-in staff member and sends them to Live Chat.

1. Turn on single sign-on in Team › Single sign-on and copy the secret.
2. Store the secret on your server only, for example in the HIBIRA_LIVECHAT_SSO_SECRET environment variable. Never put it in browser code.
3. Add a link in your admin panel to a route of yours that checks the user is staff, signs the token below and redirects to /sso/jwt.
4. The first time someone signs in, Live Chat adds them as an agent if a seat is free. Their role follows the token on every sign-in.

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",
  });
}

• Sign with HS256 and send the token as ?jwt= to /sso/jwt. Add return_to with a path such as /inbox to choose where the agent lands.
• Clocks may differ by up to 30 seconds.
• After you rotate the secret, the previous one keeps working for 24 hours, so you can deploy the new one without downtime.
• Turn on "Only single sign-on" once it works: agents can then only sign in through your admin panel, while the owner can still use email.

Ready-made code for Node.js, Laravel, PHP, Python, Django, Rails, Go, Java and .NET is available through the MCP server below.

AI assistants (MCP)

The Live Chat MCP server lets an AI assistant such as Claude, Cursor or VS Code set up single sign-on in your own codebase. The assistant signs in with your Live Chat account in the browser; only the workspace owner and admins can approve it.

The SSO secret never passes through MCP. The assistant reads the setup, writes the code for your stack and checks a token it signed, without signing anyone in.

# 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" } } }

The Hibira plugin for Claude Code, Cursor, Codex and Gemini CLI already includes this server. To disconnect every AI app at once, use Team › Single sign-on › Disconnect AI apps.

REST API and webhooks Coming soon

A REST API for conversations, messages and ratings, and webhooks for new conversations, messages and ratings, are coming to the Team plan and above. These docs will cover them when they are ready.

Until then, export conversations as CSV or JSON from the inbox, or your whole workspace from Settings › Data & privacy.

For AI tools

Plain-text summaries of Live Chat for AI assistants and answer engines: /llms.txt is the short version, /llms-full.txt includes these docs and every feature page in full.

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