เชื่อม Live Chat เข้ากับเว็บไซต์และระบบหลังบ้านของคุณ

ติดตั้งวิดเจ็ต

วางแท็กนี้ไว้ก่อน </body> ในทุกหน้าที่ต้องการแสดงแชท ดูรหัสเวิร์กสเปซได้ที่ ตั้งค่า › ทั่วไป หรือคัดลอกแท็กทั้งหมดจาก ตั้งค่า › วิดเจ็ต

สคริปต์มีขนาดเล็กและจะไม่โหลดอะไรเพิ่มจนกว่าผู้เยี่ยมชมจะเปิดแชท ใช้ได้กับทุกเว็บไซต์ ทั้ง 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>

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>

Content-Security-Policy

หากเว็บไซต์ของคุณส่ง Content-Security-Policy แบบเข้มงวด ให้อนุญาตโฮสต์ด้านล่าง และใส่ nonce ของหน้าไว้บนแท็ก script วิดเจ็ตจะส่ง 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>

Single sign-on สำหรับเจ้าหน้าที่ (JWT) Starter ขึ้นไป

ให้พนักงานเข้ากล่องข้อความของ Live Chat ได้ทันทีจากระบบหลังบ้านของคุณ โดยไม่ต้องมีรหัสผ่านแยก เซิร์ฟเวอร์ของคุณจะเซ็นโทเค็นอายุสั้นให้พนักงานที่ลงชื่อเข้าใช้อยู่ แล้วส่งต่อไปยัง Live Chat

1. เปิด Single sign-on ที่ ทีม › Single sign-on แล้วคัดลอก secret
2. เก็บ secret ไว้บนเซิร์ฟเวอร์เท่านั้น เช่น ในตัวแปรสภาพแวดล้อม HIBIRA_LIVECHAT_SSO_SECRET ห้ามใส่ในโค้ดฝั่งเบราว์เซอร์
3. เพิ่มลิงก์ในระบบหลังบ้านไปยังเส้นทางของคุณเอง ที่ตรวจว่าผู้ใช้เป็นพนักงาน เซ็นโทเค็นด้านล่าง แล้วเปลี่ยนเส้นทางไปที่ /sso/jwt
4. ผู้ที่ลงชื่อเข้าใช้ครั้งแรกจะถูกเพิ่มเป็นเจ้าหน้าที่หากยังมีที่นั่งว่าง และบทบาทจะเปลี่ยนตามโทเค็นทุกครั้งที่ลงชื่อเข้าใช้

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

• เซ็นด้วย HS256 แล้วส่งโทเค็นเป็น ?jwt= ไปที่ /sso/jwt เพิ่ม return_to เป็นพาธ เช่น /inbox เพื่อเลือกหน้าที่จะไปหลังลงชื่อเข้าใช้
• นาฬิกาคลาดเคลื่อนกันได้ไม่เกิน 30 วินาที
• หลังเปลี่ยน secret แล้ว secret เดิมยังใช้ได้อีก 24 ชั่วโมง จึงเปลี่ยนได้โดยไม่มีช่วงหยุดทำงาน
• เมื่อใช้งานได้แล้ว ให้เปิด "ใช้ Single sign-on เท่านั้น" เจ้าหน้าที่จะลงชื่อเข้าใช้ได้จากระบบหลังบ้านเท่านั้น ส่วนเจ้าของยังใช้อีเมลได้

โค้ดสำเร็จรูปสำหรับ Node.js, Laravel, PHP, Python, Django, Rails, Go, Java และ .NET ขอได้ผ่านเซิร์ฟเวอร์ MCP ด้านล่าง

ผู้ช่วย AI (MCP)

เซิร์ฟเวอร์ MCP ของ Live Chat ช่วยให้ผู้ช่วย AI อย่าง Claude, Cursor หรือ VS Code ตั้งค่า Single sign-on ในโค้ดของคุณได้ ผู้ช่วยจะลงชื่อเข้าใช้ด้วยบัญชี Live Chat ของคุณในเบราว์เซอร์ และมีเพียงเจ้าของและผู้ดูแลเวิร์กสเปซเท่านั้นที่อนุมัติได้

secret ของ 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" } } }

ปลั๊กอิน Hibira สำหรับ Claude Code, Cursor, Codex และ Gemini CLI มีเซิร์ฟเวอร์นี้อยู่แล้ว หากต้องการตัดการเชื่อมต่อแอป AI ทั้งหมดพร้อมกัน ให้ไปที่ ทีม › Single sign-on › ตัดการเชื่อมต่อแอป AI

REST API และ Webhook เร็วๆ นี้

REST API สำหรับบทสนทนา ข้อความ และคะแนน รวมถึง Webhook สำหรับบทสนทนาใหม่ ข้อความ และคะแนน กำลังจะมาในแพ็กเกจ Team ขึ้นไป หน้านี้จะอธิบายเมื่อพร้อมใช้งาน

ระหว่างนี้ คุณส่งออกบทสนทนาเป็น CSV หรือ JSON ได้จากกล่องข้อความ หรือส่งออกทั้งเวิร์กสเปซได้ที่ ตั้งค่า › ข้อมูลและความเป็นส่วนตัว

สำหรับเครื่องมือ AI

สรุป Live Chat แบบข้อความล้วนสำหรับผู้ช่วย AI และเครื่องมือค้นหาคำตอบ: /llms.txt เป็นฉบับย่อ ส่วน /llms-full.txt มีเอกสารนี้และทุกหน้าฟีเจอร์แบบเต็ม

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