Skip to content
DailyPlay Docs

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

Section titled “When to Use It”
Approach Best for
Simple iframe A dedicated game section on a single page
Floating Play button Site-wide access from any page; ecommerce storefronts

Getting the Embed Code

Section titled “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, Shopify, or Shopline
  6. Copy the generated snippet

Customize the Button

Section titled “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

Section titled “General HTML”

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

Section titled “Hosted assets (recommended)”

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

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)

Section titled “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

Section titled “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

Section titled “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: https://app.dailyplay.ai/embed/[game-id]

Platform Guides

Section titled “Platform Guides”

Step-by-step instructions for ecommerce platforms:

  • Shopify — Custom Liquid in the theme editor
  • Shopline — Custom HTML section

Security

Section titled “Security”

HTTPS

Section titled “HTTPS”

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

Content Security Policy

Section titled “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

Section titled “Troubleshooting”

Button appears but game does not load

Section titled “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

Section titled “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

Section titled “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

Section titled “WordPress strips the stylesheet”
  • Switch to Inlined CSS (WordPress-safe) in the embed panel

Next Steps

Section titled “Next Steps”