Widget API
สำหรับนักพัฒนา หรือใครก็ตามที่ต้องการให้แชทเปิดขึ้นจากปุ่มบนเว็บไซต์ของคุณเอง
การติดตั้ง
<script src="https://keyda.in/business/widget.js"
data-key="kb_live_your_key_here" async></script>แท็กสคริปต์ต้องการเพียง src และ data-key เท่านั้น ส่วนอื่นๆ ทั้งหมด ไม่ว่าจะเป็นสี ตำแหน่ง คำทักทาย หรือภาษา จะถูกจัดการจากแดชบอร์ดของคุณ คุณจึงไม่ต้องอัปเดตเว็บไซต์ใหม่เพื่อเปลี่ยนแปลงค่าเหล่านี้
โหมดต่างๆ
แบบลอย (ค่าเริ่มต้น) ปุ่มเปิดใช้งานที่มุมหน้าจอสำหรับเปิดแผงแชท
แบบฝังในหน้าเว็บ (Inline) วางคอนเทนเนอร์ว่างไว้บนหน้าเว็บ แล้วแชทจะแสดงผลในส่วนนั้นแทน:
<div data-keyda-bot style="height:520px"></div>คอนเทนเนอร์จำเป็นต้องมีความสูง ในโหมดอินไลน์แชทจะแสดงผลตลอดเวลา จึงไม่มีปุ่มให้เปิดหรือปิด
JavaScript API
ใช้งานได้บน window.KeydaBot เมื่อโหลดสคริปต์เรียบร้อยแล้ว:
| โทร | สิ่งที่ระบบทำได้ |
|---|---|
KeydaBot.open() | เปิดแผงแชท |
KeydaBot.close() | ปิด |
KeydaBot.toggle() | เปิดหรือปิด |
KeydaBot.expand() | ปรับแผงแชทให้สูงเท่าหน้าต่างและกว้างสูงสุด 760px |
KeydaBot.shrink() | กลับไปที่การ์ดมาตรฐาน |
KeydaBot.isOpen | true เมื่อแชทแสดงผล |
KeydaBot.isExpanded | true ขณะที่แผงควบคุมขยายอยู่ |
KeydaBot.clientId | Client ID ที่หน้านี้กำลังใช้งานอยู่ |
ตัวอย่าง — เปิดแชทจากปุ่ม "แชทกับเรา" ของคุณเอง:
<button onclick="KeydaBot.open()">Chat with us</button>สคริปต์จะโหลดแบบอะซิงโครนัส ดังนั้น
window.KeydaBot อาจจะยังไม่ปรากฏในทันทีหลังจากโหลดหน้าเว็บ ให้แนบตัวจัดการเหตุการณ์ (handler) ไว้กับการคลิก แทนการเรียกใช้ในขณะที่หน้าเว็บกำลังประมวลผลพฤติกรรมการทำงานบนหน้าเว็บของคุณ
- แผงแชทจะเปิดขึ้น เหนือ ปุ่มเปิดแชท ซึ่งปุ่มนั้นจะอยู่ที่เดิมและเปลี่ยนเป็นปุ่มปิดแทน การแตะปุ่มเดิมอีกครั้ง การกดเครื่องหมาย ✕ ที่ส่วนหัว หรือการกดปุ่ม Escape จะเป็นการปิดแชท
- ผู้เยี่ยมชมสามารถ ขยาย แผงควบคุมจากส่วนหัวได้ โดยจะขยายเต็มความสูงของหน้าต่างและกว้างสูงสุด 760px ซึ่งเบราว์เซอร์จะจดจำการตั้งค่านี้ไว้ สำหรับโทรศัพท์มือถือแผงควบคุมจะแสดงเต็มหน้าจออยู่แล้ว จึงไม่มีปุ่มควบคุมนี้แสดงให้เห็น
- การตั้งค่า ขนาดโลโก้ จะเปลี่ยนเฉพาะตัวโลโก้ ไม่ใช่ปุ่ม: ตัวเปิดแชทจะมีขนาดคงที่ 52px (58px สำหรับรูปทรงกลมและสี่เหลี่ยม) และโลโก้จะขยายขนาดอยู่ภายในนั้น
- ทุกอย่างจะแสดงผลภายใน shadow root ดังนั้น CSS ของคุณจะไม่ทำให้วิดเจ็ตพัง และ CSS ของวิดเจ็ตก็จะไม่ส่งผลกระทบต่อเว็บไซต์ของคุณ
- แผงควบคุมจะโหลดเฉพาะเมื่อผู้เข้าชมเปิดใช้งานเท่านั้น จึงไม่ทำให้หน้าเว็บของคุณช้าลง
- การสนทนาของผู้เข้าชมจะต่อเนื่องไปอีก 24 ชั่วโมงหากพวกเขากลับมาใช้งานใหม่ หลังจากนั้นจะเริ่มการสนทนาใหม่
- หากไม่สามารถติดต่อผู้ช่วยได้ วิดเจ็ตจะแสดงข้อความสั้น ๆ และจะไม่ทำให้หน้าเว็บของคุณเกิดข้อผิดพลาด