เอกสาร

เรียนรู้ TicketsX ได้เร็วขึ้น

คู่มือการตั้งค่า รายการคำสั่งทั้งหมด ฟีเจอร์ Premium และ REST API รวมอยู่ที่เดียว

14.2

เพิ่มวิดเจ็ตลงเว็บไซต์

คัดลอกโค้ดจากการ์ดวิดเจ็ต แล้ววางไว้ก่อนแท็ก body ปิดในทุกหน้าที่ต้องการให้แสดงปุ่มแชท

<script src="https://api.ticketsx.xyz/widget.js" data-key="wk_your_key_here" defer></script>

ติดตั้งแค่นี้จบ ไม่มีอะไรต้องดาวน์โหลด ไม่มีไลบรารีเพิ่ม และวิดเจ็ตวาดอยู่ใน shadow root จึงไม่ชนกับสไตล์ของคุณ ใช้ได้กับ HTML ล้วน WordPress Shopify Webflow และเฟรมเวิร์ก JavaScript ทุกตัว

แอตทริบิวต์ที่ไม่บังคับ

ชื่อชนิดจำเป็นคำอธิบาย
data-keystring
จำเป็น
คีย์สาธารณะของวิดเจ็ต คัดลอกได้จากแดชบอร์ด
data-positionleft | right
ไม่บังคับ
ปุ่มจะอยู่มุมไหน ค่านี้จะทับการตั้งค่าจากแดชบอร์ด
data-themeauto | light | dark
ไม่บังคับ
หน้าต่างสว่างหรือมืด ค่าเริ่มต้นตามการตั้งค่าระบบของผู้เข้าชม
data-localestring
ไม่บังคับ
บังคับภาษา เช่น de หรือ pt-BR ค่าเริ่มต้นตามเบราว์เซอร์
data-launcherauto | manual
ไม่บังคับ
ตั้งเป็น manual เพื่อซ่อนปุ่มลอย แล้วเปิดแชทจากอิลิเมนต์ของคุณเอง

เปิดแชทจากปุ่มของคุณเอง

เมื่อ data-launcher เป็น manual วิดเจ็ตจะยังไม่แสดงจนกว่าคุณจะเรียก

<script src="https://api.ticketsx.xyz/widget.js" data-key="wk_your_key_here" data-launcher="manual" defer></script>
<button onclick="TicketsXChat.open()">Contact support</button>
  • TicketsXChat.open() เปิดหน้าต่าง
  • TicketsXChat.close() และ TicketsXChat.toggle() ทำงานตามชื่อ
  • TicketsXChat.isOpen() บอกว่าหน้าต่างเปิดอยู่หรือไม่
  • TicketsXChat.on('message', handler) จะทำงานเมื่อมีคำตอบจากทีมของคุณเข้ามา