# Shopline

将 DailyPlay 添加到 Shopline 商店，让客户可从店面游玩游戏。

## 嵌入选项

| 方法 | 类型 | 状态 |
| ------ | ---- | ------ |
| **Custom HTML** | 悬浮游玩按钮 | 现已可用 |
| **Simple iframe** | 页面内联游戏 | 现已可用 — 见[嵌入网站](/zh/sharing/embed) |
| **Shopline app** | 主题编辑器中的 App embed | 即将推出 |

---

## 悬浮游玩按钮（Custom HTML）

Shopline 的推荐方式。页面上出现悬浮 **Play** 按钮；点击后在全屏浮层中打开游戏。

### 第 1 步 — 获取嵌入代码

1. 在 DailyPlay 中打开已发布的游戏
2. 点击 **Share/Embed** → **Embed**
3. 选择 **Floating Play button**
4. 选择 **Shopline**
5. 确保选择了 **Custom HTML**（应用/插件选项尚不可用）
6. 按需定制按钮文案与颜色
7. 复制代码片段

### 第 2 步 — 添加到主题

1. 在 Shopline 管理后台打开 **Theme Editor**
2. 导航到您想要游戏的页面或模板
3. 点击 **Add section** → **Custom HTML**
4. 粘贴复制的嵌入代码
5. 保存并发布

### 第 3 步 — 设置商店 origin

嵌入代码在 widget URL 中包含占位符 origin：

```
https://app.dailyplay.ai/embed/[game-id]/widget?origin=https%3A%2F%2Fyour-store.com
```

将 `https://your-store.com` 替换为您的 Shopline 商店公开 URL（协议 + 主机名，无尾部斜杠）。例如，若商店为 `https://mybrand.shoplineapp.com`，编码后的 origin 应为 `https%3A%2F%2Fmybrand.shoplineapp.com`。

Share/Embed 面板生成的代码片段带有此占位符 — 在 Shopline 中保存前请先更新。

---

## 全站与单页

| 目标 | 在何处添加 Custom HTML |
| ---- | ------------------------ |
| 每个页面都有按钮 | 所有模板中包含的全局页脚或布局区块 |
| 仅在一个页面有按钮 | 主题编辑器中该页面的 Custom HTML 区块 |
| 页面内联游戏 | 改用页面内容中的 [iframe 嵌入](/zh/sharing/embed) |

---

## 页面上的 Simple iframe

要在页面内容中直接嵌入游戏（非悬浮）：

1. 在 DailyPlay 的嵌入面板中选择 **Simple iframe**
2. 复制 iframe 代码
3. 在 Shopline 中编辑页面并添加 HTML 或嵌入区块
4. 粘贴 iframe 代码
5. 保存并发布

尺寸与响应式布局提示见[嵌入网站](/zh/sharing/embed)。

---

## Shopline App（即将推出）

带有 **App embed** 区块的原生 DailyPlay Shopline 应用正在开发中。可用后，您将：

1. 从 Shopline 应用市场安装 DailyPlay 应用
2. 打开 **Theme Editor** → **App embeds**
3. 启用 **DailyPlay Floating Widget**
4. 在嵌入设置中配置游戏 ID、按钮标签与颜色

在应用发布前，请按上文说明使用 **Custom HTML**。

---

## 故障排除

### 按钮不出现

- 确认 Custom HTML 区块已保存且主题已发布
- 检查代码片段完整（CSS 链接、脚本加载器、按钮与模态）
- 核实游戏在 DailyPlay 中已**发布**

### 游戏无法加载

- 仔细检查 widget URL 中的游戏 ID
- 确保 `origin` 参数与商店 URL 完全匹配（URL 编码）
- 商店必须以 **HTTPS** 提供服务

### 样式缺失

- 确认指向 `dailyplay-floating.css` 的 `<link>` 存在且未被 Shopline 剥离
- 若主题剥离外部样式表，请使用[悬浮游玩按钮](/zh/sharing/floating-play-button)指南中带 **Inlined CSS** 的 **General HTML**，并粘贴该变体

### 按钮被主题元素遮挡

- Widget 使用较高的 `z-index`。若被遮挡，请检查是否有更高堆叠顺序的粘性页眉或聊天小部件

---

## 下一步

- [悬浮游玩按钮概览](/zh/sharing/floating-play-button)
- [嵌入网站](/zh/sharing/embed)
- [追踪分析](/zh/sharing/analytics)