การตั้งค่า Web Widget

คู่มือนี้จะแนะนำขั้นตอนการฝัง MorphX AI Chatbot ลงในเว็บไซต์ของคุณ ด้วย Script Tag หรือ iframe — ไม่ต้องสมัครบัญชีภายนอก ตั้งค่าง่ายที่สุดในทุกแพลตฟอร์ม

สิ่งที่ต้องเตรียม

รายการ	รายละเอียด
บัญชี MorphX	มีสิทธิ์ระดับ Owner หรือ Admin
เว็บไซต์	เว็บไซต์ที่ต้องการฝังแชทบอท

ไม่ต้องใช้ Credentials ภายนอก

Web Widget ไม่ต้องใช้ Credentials จากบริการภายนอก เพียงเปิดใช้งานใน MorphX Dashboard แล้วคัดลอกโค้ดฝังไปวางในเว็บไซต์

---

ขั้นตอนที่ 1: เปิดใช้งาน Web Widget

1. เข้าสู่ระบบ MorphX Dashboard
2. ไปที่เมนู แพลตฟอร์ม (/dashboard/platforms)
3. คลิกที่การ์ด Web → คลิก ตั้งค่า
4. คลิก เปิดใช้งาน — ไม่ต้องกรอก Credentials ใดๆ
5. ระบบจะเปิดใช้งาน Web Widget ทันที

---

ขั้นตอนที่ 2: ดูโค้ดฝังและพรีวิว

หลังเปิดใช้งาน คุณสามารถดูโค้ดฝังและพรีวิวได้ที่:

1. ไปที่เมนู วิดเจ็ต (/dashboard/widget) ในแดชบอร์ด
2. แท็บ ตั้งค่า — แสดงโค้ดฝังทั้ง 2 รูปแบบ
3. แท็บ พรีวิว — ดูตัวอย่างการทำงานจริงพร้อมเลือกขนาดหน้าจอ (มือถือ/แท็บเล็ต/เดสก์ท็อป)

---

ขั้นตอนที่ 3: ฝังลงในเว็บไซต์

มี 2 วิธีในการฝัง Widget:

วิธี A: Script Tag (แนะนำ)

วิธีที่ง่ายที่สุด — วาง Script Tag ไว้ก่อนปิด </body> ของเว็บไซต์:

<script
  src="https://<โดเมน MorphX>/widget.js"
  data-slug="<tenant-slug>"
></script>

ตัวอย่างจริง:

<script
  src="https://app.morphx.ai/widget.js"
  data-slug="acme-corp"
></script>

ตัวเลือกการปรับแต่ง (Data Attributes)

Attribute	ค่าเริ่มต้น	รายละเอียด
data-slug	(จำเป็น)	Slug ของ Tenant (ดูได้ใน Dashboard)
data-position	"right"	ตำแหน่งปุ่มแชท: "left" หรือ "right"
data-color	"#2563eb"	สีของปุ่มแชท (รหัสสี Hex)
data-greeting	—	ข้อความต้อนรับในฟองข้อความ (แสดง 2-8 วินาทีหลังโหลดหน้า)

ตัวอย่างพร้อมตัวเลือกทั้งหมด:

<script
  src="https://app.morphx.ai/widget.js"
  data-slug="acme-corp"
  data-position="left"
  data-color="#6366f1"
  data-greeting="สวัสดีครับ! มีอะไรให้ช่วยไหม?"
></script>

การทำงานของ Script Tag

• ตรวจสอบการโหลดซ้ำอัตโนมัติ (ป้องกันการโหลด Widget ซ้ำ)
• แสดงปุ่มแชทวงกลมที่มุมล่างของหน้าจอ
• โหลด iframe เมื่อคลิกปุ่มครั้งแรก (Lazy Loading — ไม่กระทบประสิทธิภาพหน้าเว็บ)
• รองรับ Responsive Design — เต็มจอบนมือถือ, ป๊อปอัปบนเดสก์ท็อป

วิธี B: iframe โดยตรง

สำหรับกรณีที่ต้องการควบคุมการแสดงผลเอง:

<iframe
  src="https://<โดเมน MorphX>/widget/<tenant-slug>?embed=1"
  style="width: 380px; height: 520px; border: none; border-radius: 12px;
         box-shadow: 0 8px 30px rgba(0,0,0,0.12);"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
  allow="clipboard-write"
></iframe>

ตัวอย่างจริง:

<iframe
  src="https://app.morphx.ai/widget/acme-corp?embed=1"
  style="width: 380px; height: 520px; border: none; border-radius: 12px;
         box-shadow: 0 8px 30px rgba(0,0,0,0.12);"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
  allow="clipboard-write"
></iframe>

iframe vs Script Tag

คุณสมบัติ	Script Tag	iframe
ติดตั้งง่าย	✅	✅
ปุ่มแชทลอย	✅	❌ (ต้องจัดวางเอง)
ฟองข้อความต้อนรับ	✅	❌
นับข้อความที่ยังไม่ได้อ่าน	✅	❌
Responsive อัตโนมัติ	✅	❌ (ต้องจัดการเอง)
ควบคุม Layout	❌	✅

---

ขั้นตอนที่ 4: ทดสอบ

ทดสอบจาก Dashboard

1. ไปที่ วิดเจ็ต (/dashboard/widget)
2. คลิกแท็บ พรีวิว
3. เลือกขนาดหน้าจอ (มือถือ/แท็บเล็ต/เดสก์ท็อป)
4. ลองส่งข้อความทดสอบ

ทดสอบบนเว็บไซต์จริง

1. วางโค้ดฝังในเว็บไซต์ของคุณ
2. เปิดเว็บไซต์ในเบราว์เซอร์
3. คลิกปุ่มแชทที่มุมล่าง
4. ส่งข้อความทดสอบ — ควรได้รับคำตอบจาก AI

ทดสอบด้วย Preview Mode

สำหรับการทดสอบก่อนเปิดใช้งาน Web Platform:

https://<โดเมน MorphX>/widget/<tenant-slug>?preview=1

Preview Mode:

• ข้ามการตรวจสอบว่า Web Platform เปิดใช้งานอยู่
• Session ทดสอบถูกแยกออกจาก Session จริง
• Session จะถูกลบเมื่อปิดหน้าเว็บ

---

การปรับแต่งเพิ่มเติม

เปลี่ยนข้อความต้อนรับ

ข้อความต้อนรับ (Welcome Message) ที่แสดงเมื่อผู้ใช้เปิดแชทครั้งแรก ตั้งค่าได้ที่:

1. ไปที่ ตั้งค่า (/dashboard/settings) ในแดชบอร์ด
2. หาส่วน ข้อความต้อนรับ (Welcome Message)
3. พิมพ์ข้อความที่ต้องการ
4. คลิก บันทึก

ความแตกต่าง

• Welcome Message (ใน Settings) — ข้อความที่แสดงในหน้าต่างแชทเมื่อเริ่มบทสนทนาใหม่
• data-greeting (ใน Script Tag) — ฟองข้อความที่แสดงก่อนเปิดหน้าต่างแชท เพื่อดึงดูดผู้ใช้

เปลี่ยน System Prompt

ปรับพฤติกรรมของ AI Chatbot:

1. ไปที่ ตั้งค่า (/dashboard/settings)
2. หาส่วน System Prompt
3. ใส่คำสั่งที่ต้องการให้ AI ปฏิบัติตาม
4. คลิก บันทึก

---

Responsive Design

Widget รองรับ Responsive Design อัตโนมัติ:

เดสก์ท็อป / แท็บเล็ต (หน้าจอ > 640px)

• ปุ่มแชทวงกลมที่มุมล่างขวา (หรือซ้ายตามที่ตั้งค่า)
• หน้าต่างแชทขนาด 380 x 520 px
• แสดงเป็น Popup พร้อมเงา

มือถือ (หน้าจอ ≤ 640px)

• ปุ่มแชทวงกลมที่มุมล่าง
• เมื่อเปิด — เต็มจอ (100% width x 100% height)
• แสดงแบบ Bottom Sheet Animation (เลื่อนขึ้นจากด้านล่าง)
• ปุ่มแชทซ่อนเมื่อหน้าต่างเปิดอยู่

---

การเก็บข้อมูล Session

Widget เก็บ Session ID ใน localStorage ของเบราว์เซอร์:

chat-session-{tenantId}

• ทำให้บทสนทนาคงอยู่แม้รีเฟรชหน้าเว็บ
• ผู้ใช้กลับมาสนทนาต่อได้โดยไม่เสียประวัติ
• Session แยกตาม Tenant — หากเว็บไซต์หลายแห่งใช้ Tenant เดียวกัน ผู้ใช้จะเห็นบทสนทนาเดียวกัน

---

การสื่อสาร Cross-iframe

Widget ใช้ postMessage สำหรับสื่อสารระหว่าง Script Tag และ iframe:

Event	ทิศทาง	หน้าที่
morphx:ready	iframe → Parent	iframe โหลดเสร็จแล้ว
morphx:open	Parent → iframe	แจ้ง iframe ว่าแชทถูกเปิด (รีเซ็ตจำนวนข้อความที่ยังไม่อ่าน)
morphx:close	iframe → Parent	iframe ร้องขอให้ปิดหน้าต่างแชท
morphx:unread	iframe → Parent	แจ้งจำนวนข้อความที่ยังไม่ได้อ่านเพื่อแสดง Badge

---

Checklist สรุป

ขั้นตอน	สิ่งที่ต้องทำ
1	เปิดใช้งาน Web Platform ใน MorphX Dashboard
2	ไปที่หน้า Widget เพื่อคัดลอกโค้ดฝัง
3	วางโค้ดฝังในเว็บไซต์ (ก่อน </body>)
4	ปรับแต่ง data-position, data-color, data-greeting ตามต้องการ
5	ตั้งค่า Welcome Message ใน Settings
6	ทดสอบบนเว็บไซต์จริง

---

การแก้ปัญหา

ปุ่มแชทไม่แสดง

• ตรวจสอบว่า Web Platform เปิดใช้งานอยู่ใน Dashboard
• ตรวจสอบว่า data-slug ถูกต้อง
• ตรวจสอบ Browser Console สำหรับข้อผิดพลาด JavaScript
• ตรวจสอบว่า URL ของ widget.js ถูกต้อง

แชทเปิดแต่ไม่ตอบ

• ตรวจสอบว่ามีฐานความรู้ (Knowledge Base) อัปโหลดไว้แล้ว
• ตรวจสอบว่า System Prompt ถูกตั้งค่าใน Settings
• ตรวจสอบว่า API Keys (OpenAI, Pinecone) ยังใช้ได้

Widget ไม่แสดงบนมือถือ

• ตรวจสอบว่า CSS ของเว็บไซต์ไม่มี overflow: hidden บน body
• ตรวจสอบว่าไม่มี CSS อื่นที่บังหรือซ่อนปุ่มแชท
• ลองเปิดใน Incognito Mode เพื่อตัด Extension ออก

Session หายหลังรีเฟรช

• ตรวจสอบว่าเบราว์เซอร์ไม่ได้บล็อก localStorage
• ตรวจสอบว่าไม่ได้เปิดใน Private/Incognito Mode (localStorage ถูกล้างเมื่อปิดหน้าต่าง)

---

ลิงก์ที่เกี่ยวข้อง

• MorphX Dashboard — แพลตฟอร์ม
• MorphX Dashboard — วิดเจ็ต
• MorphX Dashboard — ตั้งค่า