# Shopline

Add DailyPlay to your Shopline store so customers can play games from your storefront.

## Embed Options

| Method | Type | Status |
| ------ | ---- | ------ |
| **Custom HTML** | Floating Play button | Available now |
| **Simple iframe** | Inline game on a page | Available now — see [Embed on Website](/sharing/embed) |
| **Shopline app** | App embed in theme editor | Coming soon |

---

## Floating Play Button (Custom HTML)

The recommended approach for Shopline. A floating **Play** button appears on the page; clicking it opens the game in a full-screen overlay.

### Step 1 — Get your embed code

1. In DailyPlay, open your published game
2. Click **Share/Embed** → **Embed**
3. Select **Floating Play button**
4. Choose **Shopline**
5. Ensure **Custom HTML** is selected (the app/plugin option is not yet available)
6. Customize button text and color if needed
7. Copy the snippet

### Step 2 — Add to your theme

1. In Shopline admin, open the **Theme Editor**
2. Navigate to the page or template where you want the game
3. Click **Add section** → **Custom HTML**
4. Paste the copied embed code
5. Save and publish

### Step 3 — Set your store origin

The embed code includes a placeholder origin in the widget URL:

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

Replace `https://your-store.com` with your Shopline store's public URL (scheme + hostname, no trailing slash). For example, if your store is `https://mybrand.shoplineapp.com`, the encoded origin should be `https%3A%2F%2Fmybrand.shoplineapp.com`.

The Share/Embed panel generates the snippet with this placeholder — update it before saving in Shopline.

---

## Site-Wide vs Single Page

| Goal | Where to add Custom HTML |
| ---- | ------------------------ |
| Button on every page | A global footer or layout section included on all templates |
| Button on one page only | That page's Custom HTML section in the theme editor |
| Game inline on a page | Use the [iframe embed](/sharing/embed) in page content instead |

---

## Simple iframe on a Page

For a game embedded directly in page content (not floating):

1. In DailyPlay, choose **Simple iframe** in the embed panel
2. Copy the iframe code
3. In Shopline, edit the page and add an HTML or embed block
4. Paste the iframe code
5. Save and publish

See [Embed on Website](/sharing/embed) for sizing and responsive layout tips.

---

## Shopline App (Coming Soon)

A native DailyPlay Shopline app with an **App embed** block is in development. When available, you will:

1. Install the DailyPlay app from the Shopline app marketplace
2. Open the **Theme Editor** → **App embeds**
3. Enable **DailyPlay Floating Widget**
4. Configure game ID, button label, and color in the embed settings

Until the app is published, use **Custom HTML** as described above.

---

## Troubleshooting

### Button does not appear

- Confirm the Custom HTML section is saved and the theme is published
- Check that the snippet is complete (CSS link, script loader, button, and modal)
- Verify the game is **published** in DailyPlay

### Game fails to load

- Double-check the game ID in the widget URL
- Ensure the `origin` parameter matches your store URL exactly (URL-encoded)
- Your store must be served over **HTTPS**

### Styles missing

- Confirm the `<link>` to `dailyplay-floating.css` is present and not stripped by Shopline
- If your theme strips external stylesheets, use **General HTML** with **Inlined CSS** from the [Floating Play Button](/sharing/floating-play-button) guide and paste that variant instead

### Button hidden behind theme elements

- The widget uses a high `z-index`. If obscured, check for sticky headers or chat widgets with higher stacking order

---

## Next Steps

- [Floating Play Button overview](/sharing/floating-play-button)
- [Embed on Website](/sharing/embed)
- [Track Analytics](/sharing/analytics)