วิธีติดตั้ง Chat Widget ของ KaoJai.ai บนเว็บไซต์

เว็บไซต์มีคนเข้ามาดูแล้ว แต่บางครั้งลูกค้ายังไม่กล้าทัก เพราะต้องเปิดแอปอื่นหรือหาช่องทางติดต่อเพิ่ม Chat Widget ช่วยให้ลูกค้าเริ่มคุยกับทีมได้จากหน้าเว็บไซต์ทันที และข้อความจะเข้ามาที่ Unified Inbox ของ KaoJai.ai เหมือนช่องทางอื่น

บทความนี้พาไปตั้งแต่การสร้าง Widget ไปจนถึงการทดสอบใช้งานจริง ใช้ได้กับเว็บไซต์ที่เพิ่มโค้ดเองได้ เช่น WordPress, Shopify, เว็บไซต์บริษัท หรือ Landing Page

วิธีติดตั้งแบบสั้น

ขั้นตอน	ทำอะไร	ผลลัพธ์
1	เปิดหน้า Integrations > Webchat ใน KaoJai Admin	พร้อมสร้าง Widget สำหรับเว็บไซต์
2	ตั้งชื่อแล้วกด เพิ่ม Widget	ได้โค้ดที่ผูกกับ Workspace ของคุณ
3	คัดลอกโค้ด	ได้ Snippet สำหรับติดตั้ง
4	วางก่อนแท็ก </body> แล้วเผยแพร่เว็บไซต์	ลูกค้าเริ่มแชตจากเว็บไซต์ได้

1. สร้าง Chat Widget ใน KaoJai Admin

1. เข้า KaoJai Admin แล้วเลือก Integrations
2. เลือกการ์ด แชตบนเว็บไซต์ (Webchat)
3. ตั้งชื่อ Widget ให้จำได้ว่าใช้กับที่ไหน เช่น เว็บไซต์หลัก, Landing Page แคมเปญ หรือ หน้าติดต่อเรา
4. กด เพิ่ม Widget

แต่ละ Widget จะมี Widget ID ของตัวเอง จึงเหมาะกับการแยกหลายเว็บไซต์หรือหลายหน้าแคมเปญ คุณจะรู้ได้ง่ายว่าข้อความมาจากจุดติดตั้งไหน และสามารถลบเฉพาะ Widget ที่ไม่ใช้แล้วได้

2. คัดลอกโค้ดติดตั้ง

หลังสร้างสำเร็จ ให้กด คัดลอกโค้ด ในรายการ Widget ที่ต้องการใช้ โค้ดจะมีข้อมูลสำคัญ 3 ส่วนอยู่แล้ว

• data-base-url คือจุดรับข้อความของ KaoJai.ai
• data-tenant-id คือ Workspace ที่จะรับบทสนทนา
• data-widget-id คือ Widget ที่คุณเพิ่งสร้าง

หน้าตาของโค้ดจะเป็นแบบนี้ ตัวอย่างนี้ใช้เพื่ออธิบายรูปแบบเท่านั้น ให้ใช้โค้ดที่คัดลอกจากหน้า Admin เพื่อให้ได้ ID ของ Workspace และ Widget ที่ถูกต้อง

<script
  src="https://unpkg.com/@kaojai-ai/chat-widget@0.3.34/dist/chat-widget.global.js"
  data-base-url="https://hook.kaojai.ai"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="th"
></script>

ไม่ต้องแก้ tenant_id หรือ widget_id เอง และไม่ต้องใส่รหัสผ่าน, API Key หรือ Secret ลงในโค้ดนี้

3. วางโค้ดในเว็บไซต์

วางโค้ดไว้ก่อนแท็ก </body> ปิดของหน้าเว็บ แล้วกดบันทึกหรือเผยแพร่ ตัวอย่างโครงสร้าง HTML:

<main>
  <h1>บริการของเรา</h1>
</main>

<!-- วาง Chat Widget ตรงนี้ -->
<script
  src="https://unpkg.com/@kaojai-ai/chat-widget@0.3.34/dist/chat-widget.global.js"
  data-base-url="https://hook.kaojai.ai"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="th"
></script>
</body>

ถ้าใช้ Website Builder หรือ CMS ให้มองหาช่อง Custom Code, Footer Code หรือ Code ก่อน </body> ชื่อเมนูอาจต่างกันตามระบบ แต่หลักการเหมือนกัน คือให้ Script โหลดบนหน้าที่ต้องการให้ปุ่มแชตแสดง

4. ทดสอบข้อความแรก

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

กลับมาที่ Chat Inbox ใน KaoJai Admin แล้วตรวจว่าบทสนทนาเข้ามาหรือไม่ ถ้าเข้ามาแล้ว ทีมสามารถตอบต่อจาก Inbox เดิม รวมถึงใช้ AI และ Workflow ที่ตั้งค่าไว้กับช่องทางอื่นได้

ลบ Widget ที่ไม่ใช้งานแล้ว

เข้า Integrations > Webchat แล้วกด ลบ ที่ Widget นั้น การลบจะหยุดรับข้อความใหม่จากโค้ดของ Widget ดังกล่าว แต่บทสนทนาเดิมยังอยู่ในระบบ

ถ้าโค้ดเดิมยังฝังอยู่ในเว็บไซต์ ปุ่มอาจยังแสดงอยู่ แต่จะไม่สามารถรับข้อความใหม่ได้ ควรนำโค้ดออกจากเว็บไซต์ด้วยเมื่อเลิกใช้งาน และถ้าต้องการเปิดใช้อีกครั้ง ให้สร้าง Widget ใหม่แล้วคัดลอกโค้ดชุดใหม่ไปติดตั้ง

แก้ปัญหาเบื้องต้น

ไม่เห็นปุ่มแชตบนเว็บไซต์

ตรวจว่าเผยแพร่หน้าเว็บแล้ว, Script อยู่ใน HTML จริง และไม่มีระบบความปลอดภัยของเว็บไซต์บล็อก Script จาก unpkg.com ลองเปิด DevTools แล้วดูว่ามีข้อความผิดพลาดใน Console หรือไม่

เห็นปุ่มแชต แต่ข้อความไม่เข้า Inbox

ตรวจว่าใช้โค้ดจาก Widget ที่มีสถานะ กำลังใช้งาน และไม่ได้แก้ data-tenant-id หรือ data-widget-id หลังจากคัดลอก หากลบ Widget ไปแล้ว โค้ดเดิมจะไม่รับข้อความใหม่

ต้องการใช้หลายเว็บไซต์

สร้าง Widget แยกตามเว็บไซต์หรือแคมเปญ แล้วใช้โค้ดของแต่ละ Widget ให้ตรงกับเว็บไซต์นั้น ชื่อ Widget ที่ชัดเจนจะช่วยให้ทีมจัดการและตรวจสอบได้ง่ายขึ้น

คำถามที่พบบ่อย

Chat Widget ใช้กับเว็บไซต์แบบไหนได้บ้าง

ใช้ได้กับเว็บไซต์ที่ให้เพิ่ม JavaScript หรือ Custom HTML ได้ ไม่ว่าจะเป็นเว็บไซต์ที่พัฒนาเอง, WordPress, Shopify, Landing Page หรือระบบจัดการเว็บไซต์อื่นที่มีช่องวางโค้ดส่วนท้ายหน้า

โค้ดติดตั้งมีข้อมูลลับหรือไม่

ไม่มี โค้ดมีเพียง URL และ ID สาธารณะสำหรับระบุ Workspace กับ Widget ไม่ควรนำรหัสผ่านหรือ Secret ใดๆ มาใส่เพิ่ม

ลบ Widget แล้วบทสนทนาเก่าจะหายไหม

ไม่หาย การลบหยุดเฉพาะข้อความใหม่จาก Widget นั้น บทสนทนาเดิมยังคงอยู่ใน KaoJai Admin

ถ้าคุณมีเว็บไซต์อยู่แล้ว ลองสร้าง Widget แรกและติดตั้งบนหน้าที่ลูกค้ามักมีคำถามมากที่สุดก่อน เช่น หน้าราคา หน้าบริการ หรือหน้าติดต่อเรา — เริ่มเล็กๆ ให้ลูกค้าทักได้ง่ายขึ้น แล้วค่อยขยายไปหน้าอื่นเมื่อพร้อม 💚