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

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

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

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

วิธี	เหมาะสำหรับ
iframe ธรรมดา	ส่วนเกมเฉพาะในหน้าเดียว
ปุ่มเล่นแบบลอย	เข้าถึงได้จากทุกหน้า；ร้านค้าอีคอมเมิร์ซ

---

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

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

---

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

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

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

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

---

General HTML

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

Hosted assets (แนะนำ)

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

<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: https://app.dailyplay.ai/embed/[game-id]

---

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

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

• Shopify — Custom Liquid ในตัวแก้ไขธีม
• 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 สำหรับส่วนเกม inline
• ตั้งค่า Shopify
• ตั้งค่า Shopline
• ติดตามการวิเคราะห์ สำหรับเกมที่ฝัง