---
title: วิธีติดตั้ง Chat Widget ของ KaoJai.ai บนเว็บไซต์
description: คู่มือสร้าง Chat Widget ในหน้า Integrations คัดลอกโค้ด
  และนำไปวางบนเว็บไซต์เพื่อรับแชตเข้า Unified Inbox
date: 2026-09-04
author: ทีม KaoJai.ai
image: /_astro/cover-th.BA7_YS1A.png
related_videos: []
tags:
  - webchat
  - live-chat
  - unified-inbox
  - website
  - kaojai-ai
unlisted: false
---

เว็บไซต์มีคนเข้ามาดูแล้ว แต่บางครั้งลูกค้ายังไม่กล้าทัก เพราะต้องเปิดแอปอื่นหรือหาช่องทางติดต่อเพิ่ม 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 ที่ถูกต้อง

```html
<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:

```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 แรกและติดตั้งบนหน้าที่ลูกค้ามักมีคำถามมากที่สุดก่อน เช่น หน้าราคา หน้าบริการ หรือหน้าติดต่อเรา — เริ่มเล็กๆ ให้ลูกค้าทักได้ง่ายขึ้น แล้วค่อยขยายไปหน้าอื่นเมื่อพร้อม 💚