嵌入网站

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

示例

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

嵌入方式

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

格式	说明
Simple iframe	页面内联游戏（本指南）
Floating Play button	固定按钮，在浮层中打开游戏 — 非常适合 Shopify 与 Shopline 店面

iframe 嵌入

嵌入游戏最简单的方式：

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

响应式嵌入

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

<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

全宽响应式

<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 指南。要在页面或产品中内联 iframe：

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

Shopline

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

Squarespace

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

Wix

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

Webflow

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

---

嵌入样式

容器样式

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

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

居中布局

<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 属性中包含以下内容以实现完整功能：

allow="camera; microphone"

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

若不使用这些功能

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

<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
• 检查浏览器控制台中的具体错误

下一步

• 为嵌入游戏追踪分析
• 通过链接分享到其他渠道