# 嵌入网站

将 DailyPlay 游戏直接嵌入网站，打造无缝的品牌体验。

## 示例

以下是已嵌入 DailyPlay 游戏的实时示例：

<iframe
  src="https://app.dailyplay.ai/embed/77"
  width="350"
  style="height: 600px; border: none;"
  allowfullscreen
></iframe>

## 嵌入方式

DailyPlay 在 Share/Embed 面板中提供两种嵌入格式：

| 格式 | 说明 |
| ------ | ----------- |
| **Simple iframe** | 页面内联游戏（本指南） |
| **[Floating Play button](/zh/sharing/floating-play-button)** | 固定按钮，在浮层中打开游戏 — 非常适合 [Shopify](/zh/sharing/shopify) 与 [Shopline](/zh/sharing/shopline) 店面 |

### iframe 嵌入

嵌入游戏最简单的方式：

```html
<iframe
  src="https://app.dailyplay.ai/embed/[game-id]"
  width="400"
  height="700"
  frameborder="0"
  allow="camera; microphone"
></iframe>
```

### 响应式嵌入

适用于适配屏幕尺寸的响应式布局：

```html
<div style="position: relative; width: 100%; max-width: 400px; margin: 0 auto;">
  <div style="padding-top: 175%; position: relative;">
    <iframe
      src="https://app.dailyplay.ai/embed/[game-id]"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      frameborder="0"
      allow="camera; microphone"
    ></iframe>
  </div>
</div>
```

---

## 获取嵌入代码

### 从游戏页面

1. 打开已发布的游戏
2. 点击 **Share/Embed**
3. 选择 **Embed** 标签
4. 复制嵌入代码

### 从 Manage Games

1. 前往 **Manage Games**
2. 找到您的游戏
3. 点击 **Share/Embed**
4. 复制嵌入代码

---

## 嵌入 URL 格式

### 标准嵌入

```
https://app.dailyplay.ai/embed/[game-id]
```

### 带参数

添加查询参数以定制：

```
https://app.dailyplay.ai/embed/[game-id]?hideHeader=true&theme=light
```

可用参数：

| 参数 | 值 | 说明 |
| ------------ | -------------- | ------------------------ |
| `hideHeader` | `true`/`false` | 隐藏游戏页眉 |
| `hideFooter` | `true`/`false` | 隐藏页脚 |
| `autoplay` | `true`/`false` | 自动开始游戏 |

---

## 尺寸指南

### 移动优先（推荐）

适用于针对移动优化的游戏：

| 尺寸 | 值 |
| --------- | ------- |
| Width | 400px |
| Height | 700px |
| Ratio | ~1:1.75 |

### 桌面显示

适用于更宽的布局：

| 尺寸 | 值 |
| --------- | ----- |
| Width | 500px |
| Height | 800px |

### 全宽响应式

```html
<div style="max-width: 500px; margin: 0 auto;">
  <div style="position: relative; padding-top: 160%;">
    <iframe
      src="https://app.dailyplay.ai/embed/[game-id]"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px;"
      allow="camera; microphone"
    ></iframe>
  </div>
</div>
```

---

## 按平台的说明

### WordPress

**使用 HTML Block：**

1. 添加新区块
2. 选择 **Custom HTML**
3. 粘贴嵌入代码
4. 预览并发布

**使用 Shortcode（如可用）：**

部分主题支持用于 iframe 的 shortcode。

### Shopify

要在店面使用悬浮游玩按钮，请参阅专门的 [Shopify 指南](/zh/sharing/shopify)。要在页面或产品中内联 iframe：

1. 在 Shopify 管理后台前往您的页面/产品
2. 在编辑器中点击 **Show HTML**
3. 粘贴 iframe 嵌入代码
4. 保存

### Shopline

悬浮游玩按钮请参阅 [Shopline 指南](/zh/sharing/shopline)。内联 iframe 请在主题编辑器的 Custom HTML 部分添加嵌入代码。

### Squarespace

1. 添加 **Code Block**
2. 粘贴嵌入代码
3. 应用更改

### Wix

1. 添加 **HTML iframe** 元素
2. 粘贴 iframe 代码
3. 按需调整尺寸

### Webflow

1. 添加 **Embed** 元素
2. 粘贴嵌入代码
3. 按需设置容器样式

---

## 嵌入样式

### 容器样式

将 iframe 包裹在带样式的容器中：

```html
<div
  style="
  max-width: 400px;
  margin: 2rem auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
"
>
  <iframe
    src="https://app.dailyplay.ai/embed/[game-id]"
    width="100%"
    height="700"
    frameborder="0"
    allow="camera; microphone"
  ></iframe>
</div>
```

### 居中布局

```html
<div style="text-align: center; padding: 2rem 0;">
  <iframe
    src="https://app.dailyplay.ai/embed/[game-id]"
    width="400"
    height="700"
    frameborder="0"
    style="border-radius: 12px;"
    allow="camera; microphone"
  ></iframe>
</div>
```

---

## 权限

### 所需权限

在 `allow` 属性中包含以下内容以实现完整功能：

```html
allow="camera; microphone"
```

| 权限 | 用于 |
| ------------ | --------------------------------------- |
| `camera` | 基于表情的游戏、视频录制 |
| `microphone` | 语音控制游戏 |

### 若不使用这些功能

若游戏不使用摄像头/麦克风，可移除 `allow` 属性：

```html
<iframe
  src="https://app.dailyplay.ai/embed/[game-id]"
  width="400"
  height="700"
  frameborder="0"
></iframe>
```

---

## 安全注意事项

### 需要 HTTPS

您的网站必须使用 HTTPS 才能嵌入 DailyPlay 游戏。仅 HTTP 的站点无法嵌入。

### Content Security Policy

若站点有 CSP，请将 DailyPlay 添加到允许的来源：

```
frame-src https://app.dailyplay.ai;
```

### 跨域

DailyPlay 游戏可在不同源的 iframe 中运行。无需特殊配置。

---

## 测试您的嵌入

1. **本地测试** — 使用本地服务器（http://localhost）
2. **检查尺寸** — 确认游戏正确显示
3. **移动端测试** — 在移动设备上查看
4. **功能测试** — 确认游玩正常

---

## 故障排除

### 游戏无法加载

- 确认游戏 ID 正确
- 检查游戏已发布
- 确保使用 HTTPS

### 尺寸不正确

- 检查 width/height 属性
- 使用响应式包装器
- 在目标设备上测试

### 摄像头无法工作

- 添加 `allow="camera"` 属性
- 确保 HTTPS（摄像头需要）
- 用户必须授予权限

### 被 CSP 阻止

- 在 CSP 中添加 `frame-src https://app.dailyplay.ai`
- 检查浏览器控制台中的具体错误

## 下一步

- 为嵌入游戏[追踪分析](/zh/sharing/analytics)
- 通过[链接分享](/zh/sharing/share)到其他渠道