悬浮游玩按钮

Floating Play button 嵌入会在网站右下角添加固定按钮。访客点击后，游戏在模态浮层中打开 — 无需为 iframe 预留页面空间。

当您希望在每个页面都能访问游戏（例如店面首页或活动落地页）而又不改变布局时，请使用它。

何时使用

方式	最适合
Simple iframe	单个页面上的专用游戏区块
Floating Play button	从任意页面全站访问；电商店面

---

获取嵌入代码

1. 打开已发布的游戏（或 stream 分享对话框）
2. 点击 Share/Embed
3. 选择 Embed 标签
4. 选择 Floating Play button（而非 Simple iframe）
5. 选择平台 — General HTML、Shopify 或 Shopline
6. 复制生成的代码片段

---

定制按钮

在 Share/Embed 面板中，您可以调整：

设置	默认值	说明
Play button text	🎮 Play	悬浮按钮上显示的标签
Play button color	您的组织品牌色	背景色（hex、rgb 或 hsl）

更改会立即更新嵌入代码 — 编辑后请重新复制。

---

General HTML

适用于在 </body> 前接受原始 HTML 的任何网站。

托管资源（推荐）

从 DailyPlay 加载 CSS 与 JavaScript — 代码片段较短：

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

重要： 将 widget URL 中的 https://your-site.com 替换为您站点的 origin（协议 + 主机名，无尾部斜杠）。origin 参数用于分析与域名验证。

内联 CSS（WordPress 安全）

部分 CMS 平台（尤其是 WordPress Custom HTML 区块）会剥离外部 <link> 标签。在嵌入面板中选择 Inlined CSS (WordPress-safe) — 相同的 CSS 会以内联 <style> 块嵌入，因此不需要外部样式表。代码片段稍长，但可在受限的 CMS 环境中使用。

---

工作原理

1. 悬浮按钮 — 固定在视口右下角（z-index 高于典型页面内容）
2. 模态浮层 — 点击按钮打开半透明背景，游戏 iframe 居中显示
3. 关闭 — 访客可通过 × 按钮或点击面板外关闭浮层
4. 懒加载 — 游戏 iframe 在模态打开时加载，保持页面快速

对于 streams，按钮会保持隐藏，直到 DailyPlay 确认 stream 可玩（预检）。若 stream 不可用，页面上不显示任何内容。

要以相同方式控制您自己的浮层或 iframe，请调用公开的 Stream Status API，仅在 available 为 true 时挂载。

---

Widget URL 格式

游戏使用专用的 widget 路由（非标准嵌入 URL）：

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

Streams 使用：

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

与 iframe 嵌入 URL 对比：https://app.dailyplay.ai/embed/[game-id]

---

平台指南

电商平台的分步说明：

• Shopify — 主题编辑器中的 Custom Liquid
• Shopline — Custom HTML 区块

---

安全

HTTPS

您的站点必须使用 HTTPS。游戏内的摄像头与麦克风功能也需要 HTTPS。

Content Security Policy

若站点使用 CSP，请允许 DailyPlay 资源：

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

使用 Inlined CSS 时，您只需来自 DailyPlay 的 script-src 与 frame-src（CSS 为内联）。

---

故障排除

按钮出现但游戏无法加载

• 确认游戏已发布
• 检查 widget URL 中的游戏 ID
• 核实 origin 与您站点的 URL 匹配（包含 https://）

按钮不可见

• 确保代码片段放在 </body> 之前，且不在隐藏容器内
• 对于 streams，仅当 stream 上线且可玩时才显示按钮

样式看起来不对

• 确认 dailyplay-floating.css 已加载（或使用 Inlined CSS 模式）
• 检查是否有主题 CSS 覆盖 .dailyplay-floating-btn — widget 在关键布局规则上使用 !important

WordPress 剥离样式表

• 在嵌入面板中切换到 Inlined CSS (WordPress-safe)

---

下一步

• 使用 iframe 嵌入 制作内联游戏区块
• Shopify 设置
• Shopline 设置
• 为嵌入游戏追踪分析