ติดตั้ง Widget บนเว็บไซต์

1. หา Widget Key

1. เข้า Dashboard → Settings → แท็บ Platform
2. ถ้ายังไม่มี ให้กด + เพิ่มแพลตฟอร์ม → เลือก LiveChat → ตั้งชื่อ → เชื่อมต่อ (ระบบสร้าง widget key ให้อัตโนมัติ)
3. คัดลอกค่า Widget Key จากการ์ด LiveChat

2. ฝัง Widget

Widget ทำงานเป็น iframe ที่ปรับขนาดตัวเองผ่าน postMessage — วาง snippet นี้ก่อนปิด </body> ของหน้าเว็บ แล้วแทนที่ WIDGET_KEY กับ WIDGET_HOST:

<script>
(function () {
    var WIDGET_KEY = 'ced94cd0-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
    var WIDGET_HOST = 'https://widget.example.com' // URL ที่ deploy widget-app ไว้

    var iframe = document.createElement('iframe')
    iframe.src = WIDGET_HOST + '/' + WIDGET_KEY
    iframe.style.cssText =
        'position:fixed;bottom:0;right:0;width:60px;height:60px;' +
        'border:none;z-index:99999;'
    document.body.appendChild(iframe)

    // widget ส่งขนาด/ตำแหน่งที่ต้องการมาทาง postMessage
    window.addEventListener('message', function (event) {
        if (event.origin !== WIDGET_HOST) return
        if (event.data.type !== 'spx:resize') return

        iframe.style.width = event.data.width
        iframe.style.height = event.data.height
        iframe.style.bottom = event.data.bottom
        if (event.data.left) {
            iframe.style.left = event.data.left
            iframe.style.right = ''
        } else {
            iframe.style.right = event.data.right
            iframe.style.left = ''
        }
    })
})()
</script>

3. แจ้งโดเมนกับผู้ดูแลระบบ

ก่อน widget จะทำงานบนเว็บไซต์ของคุณได้ ผู้ดูแลระบบต้องเพิ่มโดเมนของเว็บคุณเข้า allowlist ฝั่งเซิร์ฟเวอร์ (CORS ของ API และของที่เก็บไฟล์) — ถ้าไม่เพิ่ม widget จะส่งข้อความหรืออัพโหลดรูปไม่ได้

พฤติกรรมของ Widget

• Session: ระบบสร้าง spx_session_id เก็บใน localStorage ของ iframe — ลูกค้าคนเดิมเปิดหน้าใหม่จะยังเป็นแชทเดิม
• เสียงแจ้งเตือน: ดังเมื่อพนักงานตอบ (หลังลูกค้าคลิก widget อย่างน้อย 1 ครั้ง ตามนโยบาย autoplay ของ browser)
• Badge ตัวเลข: ขึ้นบน bubble เมื่อมีข้อความใหม่ตอน widget ปิดอยู่
• ไฟล์แนบ: ลูกค้าส่งได้เฉพาะรูปภาพและวิดีโอ