Web Widget — ปุ่มแชทบนเว็บไซต์
ทำไมใช้ Web Widget
ลูกค้าทักจากเว็บคุณได้เลย ไม่ต้อง download app ไม่ต้องสมัครอะไร — กดปุ่มแชทมุมขวาล่างได้ทันที. เหมาะกับร้านที่มีเว็บอยู่แล้ว หรือ landing page หา lead.
เหมาะกับ: ร้านที่มีเว็บไซต์ของตัวเอง, landing page, e-commerce store
สิ่งที่ต้องเตรียม
- เว็บไซต์ของคุณที่แก้ HTML ได้ (WordPress / Shopify / custom site)
- เข้าถึงไฟล์เว็บก่อน
</body>tag (ทุก CMS รองรับ)
ขั้นตอน (5 ขั้น)
- 1
เปิด Channels ใน Ouh
ไปที่หน้า Channels ใน Ouh แล้วกด + เชื่อม Channel → เลือก Web Widget
เปิด Channels →
Channels page with Web Widget option highlighted - 2
ตั้งชื่อ inbox
ใส่ชื่อที่จำง่าย เช่น เว็บไซต์ Bambi Shop. ชื่อนี้แสดงในทีมเท่านั้น ลูกค้าไม่เห็น.
Form with widget name input - 3
กด สร้าง Web Widget
ระบบจะสร้าง inbox ใหม่ใน Chatwoot และ generate snippet ให้คุณคัดลอก
Embed snippet displayed after creation - 4
คัดลอก embed snippet
กด คัดลอก snippet — เป็น JavaScript code 1 บรรทัด ที่ฝังลงเว็บคุณ
💡 Snippet จะมีwebsiteTokenเฉพาะของ inbox นี้ — เก็บปลอดภัย ไม่ต้องเปลี่ยน - 5
วางในเว็บคุณก่อน <code></body></code>
เปิดไฟล์ HTML / theme ของเว็บ → วาง snippet ก่อน closing body tag → save + deploy
💡 WordPress: ใช้ plugin 'Insert Headers and Footers' หรือใส่ใน theme footer.php
Shopify: Theme → Edit code → theme.liquid → ก่อน</body>
Wix/Webflow: Settings → Custom code → Body end
ทดสอบว่าเชื่อมแล้วใช้ได้
เปิดเว็บคุณในหน้าต่าง incognito → ดูปุ่มแชทมุมขวาล่าง → กด → พิมพ์ทดสอบ → กลับมา Ouh Inbox ควรเห็นข้อความ
แก้ปัญหาที่เจอบ่อย
❓ ปุ่มแชทไม่ขึ้น
เช็ค: (1) snippet วางก่อน </body> ไม่ใช่ใน <head> (2) ไม่มี ad-blocker block chat.ouh.logiclayerthailand.cloud (3) hard reload ด้วย Ctrl+Shift+R
❓ ขึ้นแล้ว แต่ส่งข้อความไม่ไป
เปิด DevTools (F12) → Console — ถ้ามี CORS error แจ้งเรา. ถ้า WebSocket fail ลองดู firewall/proxy ของลูกค้า
❓ อยากเปลี่ยนสี/ข้อความต้อนรับ
ตอนนี้ default styling จาก Chatwoot — ปรับใน Channels → inbox → Settings (เร็วๆ นี้จะเปิด customization tab ใน Ouh)
ลิงก์ที่เกี่ยวข้อง
ติดที่ขั้นไหน?
ส่ง screenshot ขั้นที่ติด ไปที่ support@logiclayerthailand.cloud พร้อมระบุชื่อ channel — ตอบใน 1 วันทำการ
พร้อมแล้ว → เปิด Channels ใน Ouh