# ปุ่มเล่นแบบลอย

การฝัง **ปุ่มเล่นแบบลอย** จะเพิ่มปุ่มคงที่ที่มุมล่างขวาของไซต์ เมื่อผู้เยี่ยมชมคลิก เกมจะเปิดในโอเวอร์เลย์แบบโมดัล — ไม่ต้องจัดพื้นที่หน้าเว็บสำหรับ iframe

ใช้เมื่อต้องการให้เล่นเกมได้จากทุกหน้า (เช่น หน้าแรกของร้านค้าหรือแลนดิ้งเพจแคมเปญ) โดยไม่เปลี่ยนเลย์เอาต์

## เมื่อไหร่ควรใช้

| วิธี | เหมาะสำหรับ |
| ---- | ----------- |
| [iframe ธรรมดา](/th/sharing/embed) | ส่วนเกมเฉพาะในหน้าเดียว |
| **ปุ่มเล่นแบบลอย** | เข้าถึงได้จากทุกหน้า；ร้านค้าอีคอมเมิร์ซ |

---

## การรับโค้ดฝัง

1. เปิดเกมที่เผยแพร่แล้ว (หรือกล่องโต้ตอบแชร์สตรีม)
2. คลิก **แชร์/ฝัง**
3. เลือกแท็บ **ฝัง**
4. เลือก **ปุ่มเล่นแบบลอย** (แทน iframe ธรรมดา)
5. เลือกแพลตฟอร์ม — [General HTML](#general-html)、[Shopify](/th/sharing/shopify) หรือ [Shopline](/th/sharing/shopline)
6. คัดลอก snippet ที่สร้างขึ้น

---

## ปรับแต่งปุ่ม

ในแผงแชร์/ฝัง คุณสามารถปรับ:

| การตั้งค่า | ค่าเริ่มต้น | คำอธิบาย |
| ---------- | ---------- | -------- |
| **ข้อความปุ่มเล่น** | `🎮 Play` | ข้อความบนปุ่มลอย |
| **สีปุ่มเล่น** | สีแบรนด์ขององค์กร | สีพื้นหลัง (hex, rgb หรือ hsl) |

การเปลี่ยนแปลงจะอัปเดตโค้ดฝังทันที — คัดลอกใหม่หลังแก้ไข

---

## General HTML

สำหรับเว็บไซต์ใดก็ได้ที่รับ HTML ดิบก่อน `</body>`

### Hosted assets (แนะนำ)

โหลด CSS และ JavaScript จาก DailyPlay — snippet สั้น:

```html
<link rel="stylesheet" href="https://app.dailyplay.ai/embed-assets/dailyplay-floating.css">
<script>(function(){if(window.__dailyPlayWidgetInit)return;var s=document.createElement("script");s.src="https://app.dailyplay.ai/embed-assets/dailyplay-widget.js";s.defer=true;document.head.appendChild(s);})();</script>

<!-- Floating Play button — bottom-right corner, opens game in overlay -->
<div
  class="dailyplay-floating-widget dailyplay-floating-widget--bottom-right"
  data-dailyplay-floating-widget
  style="position:fixed;bottom:24px;right:24px;z-index:2147483000;"
>
  <button
    type="button"
    class="dailyplay-floating-btn"
    style="background-color: #6c5ce7;"
    data-dailyplay-open="dailyplay-floating-modal-root"
    aria-label="Open DailyPlay"
  >
    🎮 Play
  </button>
</div>

<div
  id="dailyplay-floating-modal-root"
  class="dailyplay-floating-modal"
  data-dailyplay-embed
  hidden
  style="display:none;position:fixed;inset:0;..."
>
  <div class="dailyplay-floating-modal__panel">
    <button type="button" class="dailyplay-floating-modal__close" data-dailyplay-close="dailyplay-floating-modal-root" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <iframe
      data-dailyplay-widget
      data-dailyplay-src="https://app.dailyplay.ai/embed/[game-id]/widget?origin=https%3A%2F%2Fyour-site.com"
      allowfullscreen
      loading="lazy"
      title="DailyPlay Game"
    ></iframe>
  </div>
</div>
```

**สำคัญ:** แทนที่ `https://your-site.com` ใน URL วิดเจ็ตด้วย origin ของไซต์ (scheme + hostname ไม่มี slash ท้าย) พารามิเตอร์ `origin` ใช้สำหรับการวิเคราะห์และการตรวจสอบโดเมน

### Inlined CSS (WordPress-safe)

CMS บางแพลตฟอร์ม (โดยเฉพาะ WordPress Custom HTML) จะลบแท็ก `<link>` ภายนอก เลือก **Inlined CSS (WordPress-safe)** ในแผงฝัง — CSS เดียวกันจะฝังใน `<style>` ไม่ต้องใช้ stylesheet ภายนอก snippet จะยาวขึ้นเล็กน้อยแต่ใช้ได้ใน CMS ที่จำกัด

---

## วิธีการทำงาน

1. **ปุ่มลอย** — ติดที่มุมล่างขวาของ viewport (`z-index` สูงกว่าเนื้อหาหน้าทั่วไป)
2. **โอเวอร์เลย์โมดัล** — คลิกปุ่มจะเปิดพื้นหลังโปร่งใสพร้อม iframe เกมตรงกลาง
3. **ปิด** — ผู้เยี่ยมชมปิดด้วยปุ่ม × หรือคลิกนอกแผง
4. **Lazy loading** — iframe เกมโหลดเมื่อเปิดโมดัล ทำให้หน้าเร็ว

สำหรับ **สตรีม** ปุ่มจะซ่อนจนกว่า DailyPlay ยืนยันว่าสตรีมเล่นได้ (preflight check) หากสตรีมไม่พร้อม จะไม่แสดงอะไรบนหน้า

---

## รูปแบบ URL วิดเจ็ต

เกมใช้ route วิดเจ็ตเฉพาะ (ไม่ใช่ URL ฝังมาตรฐาน):

```
https://app.dailyplay.ai/embed/[game-id]/widget?origin=[encoded-site-origin]
```

สตรีม:

```
https://app.dailyplay.ai/stream/[org-slug]/[stream-slug]/widget?origin=[encoded-site-origin]
```

เปรียบเทียบกับ [URL ฝัง iframe](/th/sharing/embed#รูปแบบ-url-ฝัง): `https://app.dailyplay.ai/embed/[game-id]`

---

## คู่มือแพลตฟอร์ม

คำแนะนำทีละขั้นสำหรับแพลตฟอร์มอีคอmerce:

- [Shopify](/th/sharing/shopify) — Custom Liquid ในตัวแก้ไขธีม
- [Shopline](/th/sharing/shopline) — ส่วน Custom HTML

---

## ความปลอดภัย

### HTTPS

ไซต์ต้องใช้ HTTPS ฟีเจอร์กล้องและไมโครโฟนในเกมก็ต้องการ HTTPS

### Content Security Policy

หากไซต์ใช้ CSP ให้อนุญาต asset ของ DailyPlay:

```
script-src https://app.dailyplay.ai;
style-src https://app.dailyplay.ai;
frame-src https://app.dailyplay.ai;
connect-src https://app.dailyplay.ai;
```

เมื่อใช้ **Inlined CSS** ต้องการเฉพาะ `script-src` และ `frame-src` จาก DailyPlay (CSS อยู่ inline)

---

## แก้ปัญหา

### ปุ่มแสดงแต่เกมไม่โหลด

- ยืนยันว่าเกม **เผยแพร่แล้ว**
- ตรวจสอบ game ID ใน URL วิดเจ็ต
- ตรวจสอบว่า `origin` ตรงกับ URL ไซต์ (รวม `https://`)

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

- วาง snippet ก่อน `</body>` และไม่อยู่ในคอนเทนเนอร์ที่ซ่อน
- สำหรับสตรีม ปุ่มแสดงเมื่อสตรีม live และเล่นได้เท่านั้น

### สไตล์ผิดปกติ

- ยืนยันว่า `dailyplay-floating.css` โหลด (หรือใช้โหมด Inlined CSS)
- ตรวจสอบ CSS ธีมที่ override `.dailyplay-floating-btn` — วิดเจ็ตใช้ `!important` กับกฎเลย์เอาต์หลัก

### WordPress ลบ stylesheet

- เปลี่ยนเป็น **Inlined CSS (WordPress-safe)** ในแผงฝัง

---

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

- [ฝังด้วย iframe](/th/sharing/embed) สำหรับส่วนเกม inline
- [ตั้งค่า Shopify](/th/sharing/shopify)
- [ตั้งค่า Shopline](/th/sharing/shopline)
- [ติดตามการวิเคราะห์](/th/sharing/analytics) สำหรับเกมที่ฝัง