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

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

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

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

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

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

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

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

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

• src คือไฟล์ Widget จาก CDN ของ KaoJai.ai
• data-tenant-id คือ Workspace ที่จะรับบทสนทนา
• data-widget-id คือ Widget ที่คุณเพิ่งสร้าง
• data-locale ตามภาษาในหน้า Admin เช่น th

ไม่ต้องใส่ data-base-url สำหรับการใช้งานจริง ไลบรารีจะส่งข้อความไปที่ https://kjchat.kaojai.ai ให้อัตโนมัติ

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

<script
  src="https://public.kaojai.ai/tools/chat-widget/v1/chat-widget.global.js"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="th"
></script>

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

3. v1 คืออะไร

URL ในโฟลเดอร์ /tools/chat-widget/v1/ คือสัญญาเวอร์ชันหลักที่เข้ากันได้

• อัปเดตอัตโนมัติ (ค่าที่ Admin คัดลอกให้): https://public.kaojai.ai/tools/chat-widget/v1/chat-widget.global.js
  ได้ไฟล์ 1.x ล่าสุดที่เข้ากันได้ เบราว์เซอร์แคชไว้ได้สูงสุด 24 ชั่วโมง
• ล็อกเวอร์ชัน: https://public.kaojai.ai/tools/chat-widget/v1/chat-widget@1.0.0.js
  ใช้เฉพาะเมื่อต้องการไฟล์เดิมตลอด ไม่ถูกเขียนทับ

ถ้าเคยวางโค้ดจาก unpkg.com ไว้ ให้คัดลอกโค้ดชุดใหม่จาก Admin แล้ววางทับ เพราะแพ็กเกจนี้ไม่ได้เผยแพร่บน npm สาธารณะ Unpkg จึงโหลดไม่ได้

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

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

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

<!-- วาง Chat Widget ตรงนี้ -->
<script
  src="https://public.kaojai.ai/tools/chat-widget/v1/chat-widget.global.js"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="th"
></script>
</body>

บันทึกสำหรับ CMS

• เว็บที่เขียน HTML เอง: วางก่อน </body> ของหน้าที่ต้องการให้ปุ่มแชตแสดง
• WordPress: ใช้ช่อง Custom Code / Footer scripts ของธีม หรือปลั๊กอินที่วางโค้ดก่อนปิด </body>
• Shopify: Online Store > Themes > Edit code แล้ววางใน theme.liquid ก่อน </body> หรือใช้ Custom liquid ใน footer

ชื่อเมนูอาจต่างกันตามระบบ แต่หลักการเหมือนกัน คือให้ Script โหลดบนหน้าที่ต้องการให้ปุ่มแชตแสดง

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

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

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

ค่าที่ตั้งได้

ค่าที่ต้องมีคือ data-tenant-id กับ data-widget-id ค่าอื่นมีค่าเริ่มต้นในไลบรารีแล้ว ไม่ต้องใส่ถ้าไม่ต้องการเปลี่ยน

ตัวอย่างเพิ่มเติม

ชื่อและสีแบรนด์:

<script
  src="https://public.kaojai.ai/tools/chat-widget/v1/chat-widget.global.js"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="th"
  data-title="แชตกับร้านเรา"
  data-primary-color="#0F766E"
></script>

ชี้ไป API ที่ไม่ใช่โปรดักชัน (ไม่ใช้กับเว็บลูกค้า):

<script
  src="https://public.kaojai.ai/tools/chat-widget/v1/chat-widget.global.js"
  data-base-url="https://kjchat.kaojai.dev"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="th"
></script>

เปิดการปิดถาวร:

<script
  src="https://public.kaojai.ai/tools/chat-widget/v1/chat-widget.global.js"
  data-tenant-id="YOUR_TENANT_ID"
  data-widget-id="YOUR_WIDGET_ID"
  data-locale="th"
  data-close-enabled="true"
></script>

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

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

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

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

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

ตรวจว่าเผยแพร่หน้าเว็บแล้ว และ Script อยู่ใน HTML จริง นโยบายความปลอดภัย (CSP) ต้องอนุญาต https://public.kaojai.ai ลองเปิด DevTools แล้วดูว่ามีข้อความผิดพลาดใน Console หรือไม่

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

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

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

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

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

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

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

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

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

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

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

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