---
title: "ปรับ Chat Widget ให้เข้ากับแบรนด์: ตั้งชื่อ สี โลโก้ และคำชวนคุยได้เอง"
description: Chat Widget ของ KaoJai.ai ปรับแต่งได้ละเอียดขึ้น ทั้งชื่อ สี โลโก้
  ข้อความต้อนรับ คำถามเริ่มต้น และลิงก์ที่อนุญาต พร้อมดูตัวอย่างก่อนติดตั้ง
date: 2026-09-23
author: ทีม KaoJai.ai
image: /_astro/cover-th.BnSXNKU0.png
related_videos: []
tags:
  - webchat
  - live-chat
  - chat-widget-customization
  - website
  - unified-inbox
  - kaojai-ai
aliases: []
unlisted: false
---

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

ตอนนี้ [Chat Widget ของ KaoJai.ai](https://blog.kaojai.ai/blog/2026/09/live-chat-widget-setup/) ปรับแต่งได้ละเอียดขึ้นจากหน้า Admin ทั้งหน้าตา ข้อความ และคำถามเริ่มต้น ลูกค้าจึงเริ่มคุยกับธุรกิจได้ในโทนที่ใกล้เคียงกับเว็บไซต์มากขึ้น ขณะที่ทีมยังรับข้อความใน **Unified Inbox** เดิม

## ปรับอะไรได้บ้าง

| ส่วนที่ตั้งค่า | ทำอะไรได้ | เหมาะกับกรณีไหน |
| --- | --- | --- |
| ชื่อหัวแชต | ตั้งชื่อเองได้สูงสุด 80 ตัวอักษร | ใช้ชื่อร้าน ชื่อทีม หรือชื่อแคมเปญ |
| คำอธิบายใต้ชื่อ | ใส่ข้อความหลายบรรทัดได้สูงสุด 160 ตัวอักษร | บอกลูกค้าว่าถามเรื่องอะไรได้บ้าง |
| ข้อความข้างปุ่มแชต | ตั้งข้อความทักทายหรือชวนคุยได้สูงสุด 240 ตัวอักษร และขึ้นบรรทัดใหม่ได้ | ชวนคนที่กำลังอ่านเว็บให้เริ่มบทสนทนา |
| สีหลัก | เลือกสีแบรนด์ของปุ่มและส่วนที่เน้นในแชต | ทำให้ Widget ไปในทิศทางเดียวกับเว็บไซต์ |
| โลโก้ | ใส่ URL รูปภาพแบบ `HTTP(S)` ได้ | ใช้โลโก้ร้านหรือแบรนด์ของคุณในปุ่มและหัวแชต |
| คำถามเริ่มต้น | เพิ่มได้สูงสุด 5 ปุ่ม ปรับข้อความ ลบ และจัดลำดับได้ | ช่วยให้ลูกค้าเริ่มจากคำถามที่พบบ่อย |

![ภาพรวมการตั้งค่า Chat Widget แสดงการปรับหัวข้อ คำอธิบาย สี และตัวอย่าง Widget](./image/customization-overview.png)

*ปรับรายละเอียดของ Widget และดูตัวอย่างผลลัพธ์ด้านข้างได้จากหน้าเดียว*

ถ้าไม่ได้ใส่โลโก้เอง ระบบจะใช้โลโก้ KaoJai เป็นค่าเริ่มต้น และยังมี fallback เมื่อรูปภาพจาก URL โหลดไม่สำเร็จ เพื่อให้ปุ่มแชตไม่กลายเป็นพื้นที่ว่าง

## ให้ลูกค้าเริ่มคุยได้ง่ายขึ้นด้วยคำถามเริ่มต้น

บางครั้งลูกค้าอยากถาม แต่ยังไม่รู้ว่าจะเริ่มพิมพ์อย่างไร คำถามเริ่มต้นช่วยลดขั้นตอนนั้นได้ เช่น

- ขอรายละเอียดแพ็กเกจ
- เช็กสถานะออเดอร์
- ขอใบเสนอราคา
- ต้องการจองคิว
- คุยกับเจ้าหน้าที่

คุณเพิ่มได้สูงสุด 5 ปุ่มต่อ Widget แต่ละปุ่มยาวได้ไม่เกิน 80 ตัวอักษร และจัดลำดับให้คำถามที่สำคัญที่สุดอยู่ด้านหน้าได้

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

![ตั้งค่าข้อความเริ่มต้นและดูปุ่มคำถามที่แสดงเหนือช่องตอบกลับใน Chat Widget](./image/starter-keywords.png)

*เพิ่ม จัดลำดับ หรือลบข้อความเริ่มต้น แล้วตรวจดูว่าปุ่มจะแสดงต่อผู้เข้าชมอย่างไร*

## ดูตัวอย่างก่อนนำไปติดตั้ง

หน้า Chat Widget ใน Admin จัดให้การตั้งค่าและการตรวจสอบอยู่ใกล้กัน:

1. เลือก Widget ที่ต้องการจากรายการ
2. ปรับชื่อ คำอธิบาย ข้อความข้างปุ่ม สี โลโก้ หรือคำถามเริ่มต้น
3. ดูตัวอย่าง Widget ด้านข้างแบบ Desktop
4. เปิด **Show preview** เพื่อดูตัวอย่างบนหน้าจอมือถือ
5. ตรวจโค้ดติดตั้งที่เปลี่ยนตามค่าปัจจุบัน
6. กดบันทึก แล้วคัดลอกโค้ดใหม่ไปวางบนเว็บไซต์

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

> การตั้งค่าที่แก้ใน Admin จะทำให้ตัวอย่างและโค้ดในหน้าจอเปลี่ยนตามทันที แต่เว็บไซต์ที่ติดตั้งไปแล้วควรคัดลอกโค้ดล่าสุดจาก Admin ไปอัปเดตด้วย

## แยก Widget ตามเว็บไซต์หรือแคมเปญ

ถ้ามีหลายเว็บไซต์ ไม่จำเป็นต้องใช้ Widget เดียวกันทั้งหมด คุณสามารถสร้าง Widget แยกสำหรับเว็บไซต์หลัก หน้า Landing Page หรือแคมเปญแต่ละชุดได้

แต่ละ Widget มีรหัสและโค้ดติดตั้งของตัวเอง จึงช่วยให้:

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

## ตั้งค่าลิงก์ที่ลูกค้าคลิกได้

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

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

## วิธีเริ่มใช้งาน

1. เปิด [KaoJai Admin Console](https://admin.kaojai.ai/) แล้วไปที่หน้า Integrations / Chat Widget
2. สร้าง Widget ใหม่ หรือเลือก Widget ที่ต้องการปรับแต่ง
3. ตั้งค่าหน้าตา ข้อความ และคำถามเริ่มต้น
4. ตรวจ Desktop preview และ Mobile preview
5. กดบันทึกและคัดลอกโค้ดติดตั้ง
6. วางโค้ดก่อนแท็ก `</body>` แล้วเผยแพร่เว็บไซต์

ถ้าต้องการดูขั้นตอนติดตั้งแบบละเอียด อ่าน [คู่มือติดตั้ง Chat Widget บนเว็บไซต์](https://blog.kaojai.ai/blog/2026/09/live-chat-widget-setup/) ได้เลย โค้ดที่คัดลอกจาก Admin มีรหัสของ Workspace และ Widget ให้แล้ว ไม่ต้องใส่รหัสผ่านหรือ Secret เพิ่มเอง

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

### ใส่โลโก้ของร้านเองได้ไหม

ได้ ใส่ URL รูปภาพแบบ `HTTP(S)` ในช่องโลโก้ได้ ระบบจะแสดงโลโก้ในปุ่มเปิดแชตและหัวแชต ถ้าเว้นว่างหรือรูปโหลดไม่ได้ จะกลับไปใช้โลโก้ KaoJai แทน

### แก้ข้อความแล้วเว็บไซต์เปลี่ยนทันทีไหม

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

### คำถามเริ่มต้นจะแสดงตลอดเวลาหรือไม่

ไม่แสดงตลอด คำถามเริ่มต้นจะแสดงก่อนลูกค้าส่งข้อความแรกในบทสนทนา เมื่อลูกค้าเริ่มคุยแล้ว ปุ่มจะหายไปเพื่อให้พื้นที่สนทนาเรียบง่ายขึ้น

## สรุป

การปรับแต่ง Chat Widget ไม่ได้มีไว้แค่ทำให้สีสวยขึ้น แต่ช่วยให้จุดเริ่มต้นของบทสนทนาเข้ากับธุรกิจมากขึ้น ลูกค้ารู้ว่าควรถามอะไร และทีมรู้ว่าข้อความมาจาก Widget ไหน

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