# Shopline

เพิ่ม DailyPlay ในร้าน Shopline เพื่อให้ลูกค้าเล่นเกมจากหน้าร้าน

## ตัวเลือกการฝัง

| วิธี | ประเภท | สถานะ |
| ---- | ------ | ----- |
| **Custom HTML** | ปุ่มเล่นแบบลอย | พร้อมใช้งาน |
| **iframe ธรรมดา** | เกม inline ในหน้า | พร้อมใช้งาน — ดู[ฝังในเว็บไซต์](/th/sharing/embed) |
| **แอป Shopline** | App embed ในตัวแก้ไขธีม | เร็วๆ นี้ |

---

## ปุ่มเล่นแบบลอย (Custom HTML)

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

### ขั้นตอนที่ 1 — รับโค้ดฝัง

1. ใน DailyPlay เปิดเกมที่เผยแพร่แล้ว
2. คลิก **แชร์/ฝัง** → **ฝัง**
3. เลือก **ปุ่มเล่นแบบลอย**
4. เลือก **Shopline**
5. ตรวจสอบว่าเลือก **Custom HTML** (ตัวเลือกแอป/ปลั๊กอินยังไม่พร้อม)
6. ปรับข้อความและสีปุ่มตามต้องการ
7. คัดลอก snippet

### ขั้นตอนที่ 2 — เพิ่มในธีม

1. ใน Shopline admin เปิด **Theme Editor**
2. ไปที่หน้าหรือเทมเพลตที่ต้องการเกม
3. คลิก **Add section** → **Custom HTML**
4. วางโค้ดฝังที่คัดลอก
5. บันทึกและเผยแพร่

### ขั้นตอนที่ 3 — ตั้งค่า origin ร้าน

โค้ดฝังมี placeholder origin ใน URL วิดเจ็ต:

```
https://app.dailyplay.ai/embed/[game-id]/widget?origin=https%3A%2F%2Fyour-store.com
```

แทนที่ `https://your-store.com` ด้วย URL สาธารณะของร้าน Shopline (scheme + hostname ไม่มี slash ท้าย) ตัวอย่าง: หากร้านคือ `https://mybrand.shoplineapp.com` origin ที่ encode แล้วควรเป็น `https%3A%2F%2Fmybrand.shoplineapp.com`

แผงแชร์/ฝังสร้าง snippet พร้อม placeholder — อัปเดตก่อนบันทึกใน Shopline

---

## ทั้งไซต์ vs หน้าเดียว

| เป้าหมาย | ที่เพิ่ม Custom HTML |
| -------- | -------------------- |
| ปุ่มทุกหน้า | footer ทั่วไปหรือส่วน layout ที่รวมในทุกเทมเพลต |
| ปุ่มหน้าเดียว | ส่วน Custom HTML ของหน้านั้นในตัวแก้ไขธีม |
| เกม inline ในหน้า | ใช้[ฝัง iframe](/th/sharing/embed) ในเนื้อหาหน้าแทน |

---

## iframe ธรรมดาในหน้า

สำหรับเกมฝังตรงในเนื้อหาหน้า (ไม่ลอย):

1. ใน DailyPlay เลือก **Simple iframe** ในแผงฝัง
2. คัดลอกโค้ด iframe
3. ใน Shopline แก้ไขหน้าและเพิ่มบล็อก HTML หรือ embed
4. วางโค้ด iframe
5. บันทึกและเผยแพร่

ดู[ฝังในเว็บไซต์](/th/sharing/embed) สำหรับขนาดและเลย์เอาต์ responsive

---

## แอป Shopline (เร็วๆ นี้)

กำลังพัฒนาแอป DailyPlay สำหรับ Shopline พร้อมบล็อก **App embed** เมื่อพร้อม:

1. ติดตั้งแอป DailyPlay จาก Shopline app marketplace
2. เปิด **Theme Editor** → **App embeds**
3. เปิด **DailyPlay Floating Widget**
4. ตั้งค่า game ID, ข้อความปุ่ม และสีในการตั้งค่า embed

จนกว่าแอปจะเผยแพร่ ใช้ **Custom HTML** ตามด้านบน

---

## แก้ปัญหา

### ปุ่มไม่แสดง

- ยืนยันว่าส่วน Custom HTML บันทึกและธีมเผยแพร่แล้ว
- ตรวจสอบว่า snippet ครบ (ลิงก์ CSS, script loader, ปุ่ม และโมดัล)
- ยืนยันว่าเกม **เผยแพร่แล้ว** ใน DailyPlay

### เกมโหลดไม่สำเร็จ

- ตรวจสอบ game ID ใน URL วิดเจ็ตอีกครั้ง
- ตรวจสอบว่า `origin` ตรงกับ URL ร้าน (URL-encoded)
- ร้านต้องให้บริการผ่าน **HTTPS**

### สไตล์หาย

- ยืนยันว่ามี `<link>` ไป `dailyplay-floating.css` และ Shopline ไม่ลบ
- หากธีมลบ stylesheet ภายนอก ใช้ **General HTML** กับ **Inlined CSS** จาก[ปุ่มเล่นแบบลอย](/th/sharing/floating-play-button) แล้ววาง variant นั้นแทน

### ปุ่มถูกบังโดยองค์ประกอบธีม

- วิดเจ็ตใช้ `z-index` สูง หากถูกบัง ตรวจสอบ header ติดหรือ chat widget

---

## ขั้นตอนถัดไป

- [ภาพรวมปุ่มเล่นแบบลอย](/th/sharing/floating-play-button)
- [ฝังในเว็บไซต์](/th/sharing/embed)
- [ติดตามการวิเคราะห์](/th/sharing/analytics)