# 悬浮游玩按钮

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

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

## 何时使用

| 方式 | 最适合 |
| -------- | -------- |
| [Simple iframe](/zh/sharing/embed) | 单个页面上的专用游戏区块 |
| **Floating Play button** | 从任意页面全站访问；电商店面 |

---

## 获取嵌入代码

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

---

## 定制按钮

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

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

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

---

## General HTML

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

### 托管资源（推荐）

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

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

**重要：** 将 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](/zh/api/stream-status/)，仅在 `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](/zh/sharing/embed#embed-url-format) 对比：`https://app.dailyplay.ai/embed/[game-id]`

---

## 平台指南

电商平台的分步说明：

- [Shopify](/zh/sharing/shopify) — 主题编辑器中的 Custom Liquid
- [Shopline](/zh/sharing/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 嵌入](/zh/sharing/embed) 制作内联游戏区块
- [Shopify 设置](/zh/sharing/shopify)
- [Shopline 设置](/zh/sharing/shopline)
- 为嵌入游戏[追踪分析](/zh/sharing/analytics)