# Floating Play Button

The **Floating Play button** embed adds a fixed button to the bottom-right corner of your site. When a visitor clicks it, the game opens in a modal overlay — no need to dedicate page space to an iframe.

Use it when you want games available on every page (for example, a storefront homepage or campaign landing page) without changing your layout.

## When to Use It

| Approach | Best for |
| -------- | -------- |
| [Simple iframe](/sharing/embed) | A dedicated game section on a single page |
| **Floating Play button** | Site-wide access from any page; ecommerce storefronts |

---

## Getting the Embed Code

1. Open your published game (or stream share dialog)
2. Click **Share/Embed**
3. Select the **Embed** tab
4. Choose **Floating Play button** (instead of Simple iframe)
5. Pick your platform — [General HTML](#general-html), [Shopify](/sharing/shopify), or [Shopline](/sharing/shopline)
6. Copy the generated snippet

---

## Customize the Button

In the Share/Embed panel, you can adjust:

| Setting | Default | Description |
| ------- | ------- | ----------- |
| **Play button text** | `🎮 Play` | Label shown on the floating button |
| **Play button color** | Your org brand color | Background color (hex, rgb, or hsl) |

Changes update the embed code immediately — copy again after editing.

---

## General HTML

For any website that accepts raw HTML before `</body>`.

### Hosted assets (recommended)

Loads CSS and JavaScript from DailyPlay — a short 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>
```

**Important:** Replace `https://your-site.com` in the widget URL with your site's origin (scheme + hostname, no trailing slash). The `origin` parameter is used for analytics and domain validation.

### Inlined CSS (WordPress-safe)

Some CMS platforms (notably WordPress Custom HTML blocks) strip external `<link>` tags. Choose **Inlined CSS (WordPress-safe)** in the embed panel — the same CSS is embedded inline in a `<style>` block so no external stylesheet is required. The snippet is slightly longer but works in restrictive CMS environments.

---

## How It Works

1. **Floating button** — Fixed to the bottom-right of the viewport (`z-index` above typical page content)
2. **Modal overlay** — Clicking the button opens a semi-transparent backdrop with the game iframe centered
3. **Close** — Visitors close the overlay with the × button or by clicking outside the panel
4. **Lazy loading** — The game iframe loads when the modal opens, keeping your page fast

For **streams**, the button stays hidden until DailyPlay confirms the stream is playable (preflight check). If the stream is unavailable, nothing is shown on the page.

---

## Widget URL Format

Games use a dedicated widget route (not the standard embed URL):

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

Streams use:

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

Compare with the [iframe embed URL](/sharing/embed#embed-url-format): `https://app.dailyplay.ai/embed/[game-id]`

---

## Platform Guides

Step-by-step instructions for ecommerce platforms:

- [Shopify](/sharing/shopify) — Custom Liquid in the theme editor
- [Shopline](/sharing/shopline) — Custom HTML section

---

## Security

### HTTPS

Your site must use HTTPS. Camera and microphone features inside the game also require HTTPS.

### Content Security Policy

If your site uses CSP, allow 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;
```

When using **Inlined CSS**, you only need `script-src` and `frame-src` from DailyPlay (CSS is inline).

---

## Troubleshooting

### Button appears but game does not load

- Confirm the game is **published**
- Check the game ID in the widget URL
- Verify `origin` matches your site's URL (including `https://`)

### Button not visible

- Ensure the snippet is placed before `</body>` and not inside a hidden container
- For streams, the button only appears when the stream is live and playable

### Styles look wrong

- Confirm `dailyplay-floating.css` loads (or use Inlined CSS mode)
- Check for theme CSS overriding `.dailyplay-floating-btn` — the widget uses `!important` on key layout rules

### WordPress strips the stylesheet

- Switch to **Inlined CSS (WordPress-safe)** in the embed panel

---

## Next Steps

- [Embed with iframe](/sharing/embed) for inline game sections
- [Shopify setup](/sharing/shopify)
- [Shopline setup](/sharing/shopline)
- [Track Analytics](/sharing/analytics) for embedded games