Shopify

Idagdag ang DailyPlay sa iyong Shopify store para makapaglaro ang mga shopper nang hindi umaalis sa iyong storefront.

Mga Opsyon sa Pag-embed

Method	Uri	Status
Custom Liquid	Floating Play button	Available now
Simple iframe	Inline game sa isang page	Available now — tingnan ang I-embed sa Website
Shopify app	App embed sa theme customizer	Coming soon

Floating Play Button (Custom Liquid)

Ang inirerekomendang approach para sa Shopify. Lumalabas ang floating Play button sa bawat page kung saan mo idinagdag ang snippet; ang pag-click dito ay bumubukas ng laro sa full-screen overlay.

Hakbang 1 — Kunin ang iyong embed code

Sa DailyPlay, buksan ang iyong published game
I-click ang Share/Embed → Embed
Piliin ang Floating Play button
Piliin ang Shopify
Siguraduhing naka-select ang Custom HTML (hindi pa available ang app/plugin option)
I-customize ang button text at color kung kailangan
Kopyahin ang snippet

Hakbang 2 — Idagdag sa iyong theme

Sa Shopify admin, pumunta sa Online Store → Themes
I-click ang Customize sa iyong live o draft theme
Mag-navigate sa template kung saan mo gusto ang laro (halimbawa, Home page para sa site-wide visibility, o specific page template)
I-click ang Add section → Custom Liquid
I-paste ang kinopyang Liquid snippet
I-click ang Save

Gumagamit ang generated code ng Shopify Liquid variables para awtomatikong maitakda ang store origin:

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

Hindi mo kailangang manwal na palitan ang origin URL — pinupunan ito ng Shopify sa render time.

Ano ang kasama sa snippet

Isang <link> sa floating widget CSS ng DailyPlay
Deferred load ng dailyplay-widget.js
Ang floating Play button (bottom-right)
Hidden modal na may game iframe na tumuturo sa /embed/[game-id]/widget?origin=...

Site-Wide vs Single Page

Layunin	Saan idadagdag ang Custom Liquid
Button sa bawat page	Theme footer group o section na kasama sa default layout
Button sa isang page lang	Template ng page na iyon sa theme editor
Inline game sa isang page	Gamitin ang iframe embed sa HTML editor ng page

Simple iframe sa Page o Product

Para sa larong naka-embed nang direkta sa page content (hindi floating):

Sa DailyPlay, piliin ang Simple iframe sa embed panel
Kopyahin ang iframe code
Sa Shopify admin, i-edit ang page o product
I-click ang Show HTML sa rich text editor
I-paste ang iframe code
I-save

Tingnan ang I-embed sa Website para sa sizing at responsive layout tips.

Shopify App (Coming Soon)

May native DailyPlay Shopify app na may App embed block na kasalukuyang ginagawa. Kapag available, ikaw ay:

Mag-i-install ng DailyPlay app mula sa Shopify App Store
Pupunta sa Online Store → Themes → Customize
Bubuksan ang App embeds
Mag-e-enable ng DailyPlay Floating Widget
Magko-configure ng game ID, button label, at color sa embed settings

Hanggang ma-publish ang app, gamitin ang Custom Liquid gaya ng inilarawan sa itaas.

Troubleshooting

Lumalabas ang Liquid snippet bilang plain text

Kumpirmahin na nagdagdag ka ng Custom Liquid section, hindi regular na text o HTML block
Ang Custom Liquid sections ay tumatanggap lang ng Liquid + HTML — huwag balutin ang snippet sa karagdagang <script> tags mula sa iyong theme

Naglo-load ang laro pero mali ang domain sa analytics

Gumagamit ang Liquid template ng request.origin — siguraduhing tumutugma ang storefront URL sa Shopify settings sa iyong public domain
Kung gumagamit ng custom domain, beripikahin na naka-set ito bilang primary domain

Nakatago ang button sa likod ng theme elements

Gumagamit ang widget ng mataas na z-index (2147483000). Kung nakatago pa rin, suriin ang theme elements na may mas mataas na stacking contexts (sticky headers, chat widgets)

Content Security Policy

Karaniwang pinapayagan ng Shopify Online Store 2.0 themes ang third-party scripts sa Custom Liquid. Kung may CSP ang iyong theme o app, idagdag ang https://app.dailyplay.ai sa script-src, style-src, at frame-src.