ปุ่มแชทหน้าเว็บ ฟรี ติดปุ่มทักแชทลงเว็บไซต์ร้านค้า

ปุ่มนี้คืออะไร

สคริปต์ไฟล์เดียวที่คุณแปะลงหน้าเว็บของร้าน แล้วมันจะวาดปุ่มลอยมุมจอ (เลือกได้ว่าซ้ายล่างหรือขวาล่าง) — เมื่อลูกค้ากด จะเปิดหน้า https://koratland.com/m/<สลักร้านของคุณ> ในแท็บใหม่ พร้อมแนบ URL หน้าเว็บปัจจุบันไปด้วยเสมอ (พารามิเตอร์ src) เพื่อให้ร้านเห็นว่าลูกค้าทักมาจากหน้าไหน

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

เพราะเหตุนี้ ปุ่มจึงมี QR code ในตัวด้วย (วาดจากเซิร์ฟเวอร์ของ Korat เอง ไม่ใช่สคริปต์ตัวนี้): ลูกค้าที่มีแอป Korat อยู่ในมือถืออยู่แล้ว (และล็อกอินค้างไว้) สแกนแล้วเข้าห้องแชทได้ทันทีโดยไม่ต้องพิมพ์อะไรบนคอมพิวเตอร์ — บนมือถือ Android ที่ลงแอปไว้ ลิงก์เดียวกันนี้เปิดแอปตรง ๆ ด้วย

ไม่ใช่เครื่องมือติดตามผู้เข้าชม (ไม่ใช่ tracker)

สคริปต์นี้ไม่ยิงคำขออะไรทั้งสิ้นตอนโหลดหน้า ไม่เก็บพฤติกรรมการเข้าชม ไม่ตั้งคุกกี้ และไม่อ่านอะไรเกี่ยวกับผู้เข้าชมเลย — สิ่งเดียวที่เกิดขึ้นคือเมื่อลูกค้ากดปุ่มเอง แผง QR จึงเพิ่งจะโหลดรูป QR จากเซิร์ฟเวอร์ Korat (คำขอเดียว ไม่มีคุกกี้ ไม่มี query อื่นนอกจาก src) และถ้ากดลิงก์ "เปิดแชทใน Korat" เบราว์เซอร์จะเปิดลิงก์ปกติหนึ่งลิงก์ไปที่ koratland.com — ไม่มีอะไรทำงานอยู่เบื้องหลังก่อนกดปุ่ม

เริ่มยังไง — คัดลอกแปะ 1 บรรทัด

แปะโค้ดนี้ไว้ก่อนปิด </body> (หรือที่ไหนก็ได้ในหน้า) แทน somtam-lardprao-42 ด้วยสลักหน้าร้านของคุณ (ตัวอักษร/ตัวเลข ไม่ใช่ชื่อร้านภาษาไทย) — ดูวิธีหาสลักที่หัวข้อถัดไป:

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="somtam-lardprao-42" defer></script>

เท่านี้จบ — ไม่ต้องติดตั้งอะไรเพิ่ม ไม่มี dependency ไม่กระทบความเร็วเว็บร้านคุณ (ไฟล์เดียว ขนาดเล็ก โหลดแบบ defer ไม่บล็อกหน้าเว็บ)

หาสลักร้านของคุณได้จากไหน

เปิดหน้าร้านของคุณบน Korat ที่ https://koratland.com/b/<สลัก> — สลักคือส่วนที่อยู่หลัง /b/ ใน URL แถบที่อยู่นั่นเอง
สลักเดียวกันนี้ใช้กับทั้งปุ่มแชทและ QR

แปะยังไงในแต่ละแพลตฟอร์ม

Wix — Editor → เพิ่มองค์ประกอบ (Add) → Embed Code → Custom Embeds → HTML iframe → วางโค้ดข้างบน
Webflow — Add panel → Embed → Embed an HTML Code → วางโค้ด → Publish
Shopify — Online Store → Themes → Edit code → เปิดไฟล์ theme.liquid → วางโค้ดก่อน </body>
WordPress — ถ้าเว็บคุณเป็น WordPress ให้ใช้ปลั๊กอิน Korat โดยเฉพาะแทน (ดูที่หน้า เอกสารรวม) ซึ่งมีตัวช่วยตั้งค่าในเมนูแอดมิน ไม่ต้องแก้โค้ดเอง — สคริปต์ในหน้านี้ก็ใช้ได้เหมือนกันถ้าอยากแปะเอง
เว็บที่เขียนเอง / จ้างเขียน — วางแท็ก <script> ไว้ในไฟล์ HTML ตรง ๆ ก่อนปิด </body>

ตัวเลือกปรับแต่ง (data-*)

แอตทริบิวต์	ค่าเริ่มต้น	ความหมาย
`data-korat`	—	บังคับ สลักของหน้าร้าน `/b/<สลัก>` ที่ใช้สร้างลิงก์แชท
`data-name`	เท่ากับ `data-korat`	ชื่อร้านที่แสดงในแผง QR (ข้อความล้วน ไม่กระทบ URL)
`data-position`	`br`	`br` = ขวาล่าง, `bl` = ซ้ายล่าง
`data-label`	ข้อความมาตรฐานตามภาษา	ข้อความบนปุ่ม เขียนเองได้
`data-lang`	`th`	`th` หรือ `en`
`data-qr`	แสดง	ใส่ `data-qr="0"` เพื่อซ่อนแผง QR (เหลือแค่ลิงก์เปิดแชท)

src ใน URL แชทและ URL รูป QR มาจาก location.href ของหน้าที่ปุ่มถูกฝังอยู่เสมอ — สคริปต์ไม่มีทางให้ตั้งค่าคงที่แทนได้ เพราะจะทำให้ทุกปุ่มดูเหมือนมาจากหน้าเดียวกัน ซึ่งขัดกับจุดประสงค์ของฟีเจอร์นี้

ตัวอย่างปรับแต่งเต็ม:

<script src="https://koratland.com/embed/korat-message.js"
        data-korat="somtam-lardprao-42"
        data-name="ส้มตำลาดพร้าว"
        data-position="bl"
        data-label="ทักแชทเลย"
        data-lang="th"
        defer></script>

ปุ่มเป็นปุ่มจริงที่กด Tab ไปถึงได้และมี aria-label
กด Esc เพื่อปิดแผง QR
เคารพการตั้งค่า "ลดการเคลื่อนไหว" (prefers-reduced-motion) ของอุปกรณ์ผู้ใช้
สีตัดกันพอทั้งพื้นสว่างและมืด และเว้นระยะจากขอบจอตามพื้นที่ปลอดภัย (safe-area) ของมือถือรุ่นใหม่ ไม่บังแถบท่าทางล่างจอ

ทำไมจึงปลอดภัยกับเว็บร้านของคุณ

วาด UI ด้วย Shadow DOM ⇒ CSS ของเว็บร้านคุณกับ CSS ของปุ่มไม่ชนกันแน่นอน
ไฟล์เดียว ไม่มี dependency ภายนอก ไม่โหลดฟอนต์/ไลบรารีเพิ่ม
โหลดซ้ำกี่ครั้งก็ไม่วาดปุ่มซ้อนกัน
ค่าที่คุณกรอกใน data-* ถูก escape ก่อนแสดงผลเสมอ

ติดปุ่มทักแชทลงเว็บไซต์ร้าน