Floating Play Button

Ang Floating Play button embed ay nagdaragdag ng fixed button sa bottom-right corner ng iyong site. Kapag ni-click ito ng bisita, bubukas ang laro sa modal overlay — hindi na kailangang maglaan ng espasyo sa page para sa iframe.

Gamitin ito kapag gusto mong available ang mga laro sa bawat page (halimbawa, storefront homepage o campaign landing page) nang hindi binabago ang iyong layout.

Kailan Ito Gagamitin

Approach	Pinakamainam Para Sa
Simple iframe	Dedicated game section sa isang page
Floating Play button	Site-wide access mula sa anumang page; ecommerce storefronts

Pagkuha ng Embed Code

Buksan ang iyong published game (o stream share dialog)
I-click ang Share/Embed
Piliin ang Embed tab
Piliin ang Floating Play button (sa halip na Simple iframe)
Piliin ang iyong platform — General HTML, Shopify, o Shopline
Kopyahin ang generated snippet

I-customize ang Button

Sa Share/Embed panel, maaari mong ayusin ang:

Setting	Default	Paglalarawan
Play button text	`🎮 Play`	Label na ipinapakita sa floating button
Play button color	Brand color ng iyong org	Background color (hex, rgb, o hsl)

Agad na nag-u-update ang embed code ang mga pagbabago — kopyahin muli pagkatapos mag-edit.

General HTML

Para sa anumang website na tumatanggap ng raw HTML bago ang </body>.

Hosted assets (inirerekomenda)

Naglo-load ng CSS at JavaScript mula sa DailyPlay — maikling 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>

Mahalaga: Palitan ang https://your-site.com sa widget URL ng origin ng iyong site (scheme + hostname, walang trailing slash). Ginagamit ang origin parameter para sa analytics at domain validation.

Inlined CSS (WordPress-safe)

Ang ilang CMS platforms (lalo na ang WordPress Custom HTML blocks) ay nagtatanggal ng external <link> tags. Piliin ang Inlined CSS (WordPress-safe) sa embed panel — naka-embed ang parehong CSS nang inline sa <style> block kaya hindi kailangan ng external stylesheet. Medyo mas mahaba ang snippet pero gumagana sa restrictive CMS environments.

Paano Ito Gumagana

Floating button — Fixed sa bottom-right ng viewport (z-index na mas mataas sa typical page content)
Modal overlay — Ang pag-click sa button ay bumubukas ng semi-transparent backdrop na may game iframe sa gitna
Close — Isinasara ng mga bisita ang overlay gamit ang × button o sa pamamagitan ng pag-click sa labas ng panel
Lazy loading — Naglo-load ang game iframe kapag bumukas ang modal, na pinapanatiling mabilis ang iyong page

Para sa streams, nananatiling nakatago ang button hanggang kumpirmahin ng DailyPlay na playable ang stream (preflight check). Kung hindi available ang stream, walang ipinapakita sa page.

Para i-gate ang sarili mong overlay o iframe sa parehong paraan, tawagan ang public Stream Status API at i-mount lang kapag available ay true.

Gumagamit ang mga laro ng dedicated widget route (hindi ang standard embed URL):

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

Gumagamit ang streams ng:

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

Ihambing sa iframe embed URL: https://app.dailyplay.ai/embed/[game-id]

Mga Gabay sa Platform

Hakbang-hakbang na instruksyon para sa ecommerce platforms:

Shopify — Custom Liquid sa theme editor
Shopline — Custom HTML section

Seguridad

HTTPS

Dapat gumamit ang iyong site ng HTTPS. Ang camera at microphone features sa loob ng laro ay nangangailangan din ng HTTPS.

Content Security Policy

Kung gumagamit ang iyong site ng CSP, payagan ang DailyPlay assets:

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

Kapag gumagamit ng Inlined CSS, kailangan mo lang ng script-src at frame-src mula sa DailyPlay (inline ang CSS).

Troubleshooting

Lumalabas ang button pero hindi naglo-load ang laro

Kumpirmahin na published ang laro
Suriin ang game ID sa widget URL
Beripikahin na tumutugma ang origin sa URL ng iyong site (kasama ang https://)

Hindi nakikita ang button

Siguraduhing naka-place ang snippet bago ang </body> at hindi nasa loob ng hidden container
Para sa streams, lumalabas lang ang button kapag live at playable ang stream

Mukhang mali ang styles

Kumpirmahin na naglo-load ang dailyplay-floating.css (o gamitin ang Inlined CSS mode)
Suriin kung may theme CSS na nag-o-override sa .dailyplay-floating-btn — gumagamit ang widget ng !important sa mga pangunahing layout rules

Nagtatanggal ang WordPress ng stylesheet

Lumipat sa Inlined CSS (WordPress-safe) sa embed panel

Mga Susunod na Hakbang

I-embed gamit ang iframe para sa inline game sections
Shopify setup
Shopline setup
Subaybayan ang Analytics para sa embedded games