# 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](/fil/sharing/embed) | Dedicated game section sa isang page |
| **Floating Play button** | Site-wide access mula sa anumang page; ecommerce storefronts |

---

## Pagkuha ng Embed Code

1. Buksan ang iyong published game (o stream share dialog)
2. I-click ang **Share/Embed**
3. Piliin ang **Embed** tab
4. Piliin ang **Floating Play button** (sa halip na Simple iframe)
5. Piliin ang iyong platform — [General HTML](#general-html), [Shopify](/fil/sharing/shopify), o [Shopline](/fil/sharing/shopline)
6. 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:

```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>
```

**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

1. **Floating button** — Fixed sa bottom-right ng viewport (`z-index` na mas mataas sa typical page content)
2. **Modal overlay** — Ang pag-click sa button ay bumubukas ng semi-transparent backdrop na may game iframe sa gitna
3. **Close** — Isinasara ng mga bisita ang overlay gamit ang × button o sa pamamagitan ng pag-click sa labas ng panel
4. **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](/fil/api/stream-status/) at i-mount lang kapag `available` ay `true`.

---

## Format ng Widget URL

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](/fil/sharing/embed#embed-url-format): `https://app.dailyplay.ai/embed/[game-id]`

---

## Mga Gabay sa Platform

Hakbang-hakbang na instruksyon para sa ecommerce platforms:

- [Shopify](/fil/sharing/shopify) — Custom Liquid sa theme editor
- [Shopline](/fil/sharing/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](/fil/sharing/embed) para sa inline game sections
- [Shopify setup](/fil/sharing/shopify)
- [Shopline setup](/fil/sharing/shopline)
- [Subaybayan ang Analytics](/fil/sharing/analytics) para sa embedded games