# Shopline

Idagdag ang DailyPlay sa iyong Shopline store para makapaglaro ang mga customer mula sa iyong storefront.

## Mga Opsyon sa Pag-embed

| Method | Uri | Status |
| ------ | ---- | ------ |
| **Custom HTML** | Floating Play button | Available now |
| **Simple iframe** | Inline game sa isang page | Available now — tingnan ang [I-embed sa Website](/fil/sharing/embed) |
| **Shopline app** | App embed sa theme editor | Coming soon |

---

## Floating Play Button (Custom HTML)

Ang inirerekomendang approach para sa Shopline. Lumalabas ang floating **Play** button sa page; ang pag-click dito ay bumubukas ng laro sa full-screen overlay.

### Hakbang 1 — Kunin ang iyong embed code

1. Sa DailyPlay, buksan ang iyong published game
2. I-click ang **Share/Embed** → **Embed**
3. Piliin ang **Floating Play button**
4. Piliin ang **Shopline**
5. Siguraduhing naka-select ang **Custom HTML** (hindi pa available ang app/plugin option)
6. I-customize ang button text at color kung kailangan
7. Kopyahin ang snippet

### Hakbang 2 — Idagdag sa iyong theme

1. Sa Shopline admin, buksan ang **Theme Editor**
2. Mag-navigate sa page o template kung saan mo gusto ang laro
3. I-click ang **Add section** → **Custom HTML**
4. I-paste ang kinopyang embed code
5. I-save at i-publish

### Hakbang 3 — Itakda ang store origin

Kasama sa embed code ang placeholder origin sa widget URL:

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

Palitan ang `https://your-store.com` ng public URL ng iyong Shopline store (scheme + hostname, walang trailing slash). Halimbawa, kung ang iyong store ay `https://mybrand.shoplineapp.com`, ang encoded origin ay dapat `https%3A%2F%2Fmybrand.shoplineapp.com`.

Ginagawa ng Share/Embed panel ang snippet na may placeholder na ito — i-update ito bago mag-save sa Shopline.

---

## Site-Wide vs Single Page

| Layunin | Saan idadagdag ang Custom HTML |
| ---- | ------------------------ |
| Button sa bawat page | Global footer o layout section na kasama sa lahat ng templates |
| Button sa isang page lang | Custom HTML section ng page na iyon sa theme editor |
| Inline game sa isang page | Gamitin ang [iframe embed](/fil/sharing/embed) sa page content |

---

## Simple iframe sa Page

Para sa larong naka-embed nang direkta sa page content (hindi floating):

1. Sa DailyPlay, piliin ang **Simple iframe** sa embed panel
2. Kopyahin ang iframe code
3. Sa Shopline, i-edit ang page at magdagdag ng HTML o embed block
4. I-paste ang iframe code
5. I-save at i-publish

Tingnan ang [I-embed sa Website](/fil/sharing/embed) para sa sizing at responsive layout tips.

---

## Shopline App (Coming Soon)

May native DailyPlay Shopline app na may **App embed** block na kasalukuyang ginagawa. Kapag available, ikaw ay:

1. Mag-i-install ng DailyPlay app mula sa Shopline app marketplace
2. Bubuksan ang **Theme Editor** → **App embeds**
3. Mag-e-enable ng **DailyPlay Floating Widget**
4. Magko-configure ng game ID, button label, at color sa embed settings

Hanggang ma-publish ang app, gamitin ang **Custom HTML** gaya ng inilarawan sa itaas.

---

## Troubleshooting

### Hindi lumalabas ang button

- Kumpirmahin na naka-save ang Custom HTML section at naka-publish ang theme
- Suriin na kumpleto ang snippet (CSS link, script loader, button, at modal)
- Beripikahin na **published** ang laro sa DailyPlay

### Hindi naglo-load ang laro

- Dobleng suriin ang game ID sa widget URL
- Siguraduhing eksaktong tumutugma ang `origin` parameter sa store URL (URL-encoded)
- Dapat naka-serve ang iyong store sa **HTTPS**

### Nawawala ang styles

- Kumpirmahin na nandiyan ang `<link>` sa `dailyplay-floating.css` at hindi tinatanggal ng Shopline
- Kung nagtatanggal ang iyong theme ng external stylesheets, gamitin ang **General HTML** na may **Inlined CSS** mula sa [Floating Play Button](/fil/sharing/floating-play-button) guide at i-paste ang variant na iyon

### Nakatago ang button sa likod ng theme elements

- Gumagamit ang widget ng mataas na `z-index`. Kung nakatago, suriin ang sticky headers o chat widgets na may mas mataas na stacking order

---

## Mga Susunod na Hakbang

- [Pangkalahatang-ideya ng Floating Play Button](/fil/sharing/floating-play-button)
- [I-embed sa Website](/fil/sharing/embed)
- [Subaybayan ang Analytics](/fil/sharing/analytics)