Shopify

เพิ่ม DailyPlay ในร้าน Shopify เพื่อให้ลูกค้าเล่นเกมโดยไม่ต้องออกจากหน้าร้าน

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

วิธี	ประเภท	สถานะ
Custom Liquid	ปุ่มเล่นแบบลอย	พร้อมใช้งาน
iframe ธรรมดา	เกม inline ในหน้า	พร้อมใช้งาน — ดูฝังในเว็บไซต์
แอป Shopify	App embed ในตัวปรับแต่งธีม	เร็วๆ นี้

---

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

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

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

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

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

1. ใน Shopify admin ไปที่ Online Store → Themes
2. คลิก Customize บนธีม live หรือ draft
3. ไปที่เทมเพลตที่ต้องการเกม (เช่น Home page สำหรับทั้งไซต์ หรือเทมเพลตหน้าเฉพาะ)
4. คลิก Add section → Custom Liquid
5. วาง Liquid snippet ที่คัดลอก
6. คลิก Save

โค้ดที่สร้างใช้ตัวแปร Shopify Liquid ดังนั้น origin ร้านจะตั้งอัตโนมัติ:

{%- assign dp_origin = request.origin | default: shop.url | url_param_escape -%}

ไม่ต้องแทนที่ URL origin ด้วยตนเอง — Shopify กรอกตอน render

snippet ประกอบด้วย

• <link> ไปยัง CSS วิดเจ็ตลอยของ DailyPlay
• โหลด dailyplay-widget.js แบบ defer
• ปุ่ม Play แบบลอย (มุมล่างขวา)
• โมดัลซ่อนพร้อม iframe เกมชี้ไป /embed/[game-id]/widget?origin=...

---

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

เป้าหมาย	ที่เพิ่ม Custom Liquid
ปุ่มทุกหน้า	กลุ่ม footer ของธีม หรือส่วนที่รวมใน layout เริ่มต้น
ปุ่มหน้าเดียว	เทมเพลตหน้านั้นในตัวแก้ไขธีม
เกม inline ในหน้า	ใช้ฝัง iframe ใน HTML editor ของหน้าแทน

---

iframe ธรรมดาในหน้าหรือสินค้า

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

1. ใน DailyPlay เลือก Simple iframe ในแผงฝัง
2. คัดลอกโค้ด iframe
3. ใน Shopify admin แก้ไขหน้าหรือสินค้า
4. คลิก Show HTML ใน rich text editor
5. วางโค้ด iframe
6. บันทึก

ดูฝังในเว็บไซต์ สำหรับขนาดและเลย์เอาต์ responsive

---

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

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

1. ติดตั้งแอป DailyPlay จาก Shopify App Store
2. ไปที่ Online Store → Themes → Customize
3. เปิด App embeds
4. เปิด DailyPlay Floating Widget
5. ตั้งค่า game ID, ข้อความปุ่ม และสีในการตั้งค่า embed

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

---

แก้ปัญหา

Liquid snippet แสดงเป็นข้อความธรรมดา

• ยืนยันว่าเพิ่มส่วน Custom Liquid ไม่ใช่บล็อกข้อความหรือ HTML ธรรมดา
• Custom Liquid รับเฉพาะ Liquid + HTML — อย่าห่อ snippet ด้วย <script> เพิ่มจากธีม

เกมโหลดแต่ analytics แสดงโดเมนผิด

• เทมเพลต Liquid ใช้ request.origin — ตรวจสอบว่า URL ร้านใน Shopify ตรงกับโดเมนสาธารณะ
• หากใช้โดเมนกำหนดเอง ตรวจสอบว่าตั้งเป็น primary domain

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

• วิดเจ็ตใช้ z-index สูง (2147483000) หากยังถูกบัง ตรวจสอบ header ติดหรือ chat widget ที่มี stacking สูงกว่า

Content Security Policy

ธีม Shopify Online Store 2.0 โดยทั่วไปอนุญาตสคริปต์บุคคลที่สามใน Custom Liquid หากธีมหรือแอปบังคับ CSP ให้เพิ่ม https://app.dailyplay.ai ใน script-src, style-src และ frame-src

---

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

• ภาพรวมปุ่มเล่นแบบลอย
• ฝังในเว็บไซต์
• ติดตามการวิเคราะห์