# I-embed sa Website

I-embed ang iyong mga DailyPlay game nang direkta sa iyong website para sa seamless na brand experience.

## Halimbawa

Narito ang live na halimbawa ng naka-embed na DailyPlay game:

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

## Mga Paraan ng Pag-embed

Nag-aalok ang DailyPlay ng dalawang embed format sa Share/Embed panel:

| Format | Paglalarawan |
| ------ | ----------- |
| **Simple iframe** | Inline game sa iyong page (ang gabay na ito) |
| **[Floating Play button](/fil/sharing/floating-play-button)** | Fixed button na bumubukas ng laro sa overlay — perpekto para sa [Shopify](/fil/sharing/shopify) at [Shopline](/fil/sharing/shopline) storefronts |

### iframe Embed

Ang pinakasimpleng paraan para i-embed ang iyong laro:

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

### Responsive Embed

Para sa responsive layouts na umaangkop sa screen size:

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

---

## Pagkuha ng Embed Code

### Mula sa Game Page

1. Buksan ang iyong published game
2. I-click ang **Share/Embed**
3. Piliin ang **Embed** tab
4. Kopyahin ang embed code

### Mula sa Manage Games

1. Pumunta sa **Manage Games**
2. Hanapin ang iyong laro
3. I-click ang **Share/Embed**
4. Kopyahin ang embed code

---

## Format ng Embed URL

### Standard Embed

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

### May Parameters

Magdagdag ng query parameters para sa customization:

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

Mga available na parameter:

| Parameter    | Values         | Paglalarawan              |
| ------------ | -------------- | ------------------------ |
| `hideHeader` | `true`/`false` | Itago ang game header     |
| `hideFooter` | `true`/`false` | Itago ang footer          |
| `autoplay`   | `true`/`false` | Awtomatikong simulan ang laro |

---

## Mga Gabay sa Sizing

### Mobile-First (Inirerekomenda)

Para sa mobile-optimized games:

| Dimension | Value   |
| --------- | ------- |
| Width     | 400px   |
| Height    | 700px   |
| Ratio     | ~1:1.75 |

### Desktop Display

Para sa mas malawak na layouts:

| Dimension | Value |
| --------- | ----- |
| Width     | 500px |
| Height    | 800px |

### Full-Width Responsive

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

---

## Mga Instruksyon ayon sa Platform

### WordPress

**Gamit ang HTML Block:**

1. Magdagdag ng bagong block
2. Piliin ang **Custom HTML**
3. I-paste ang embed code
4. I-preview at i-publish

**Gamit ang Shortcode (kung available):**

Sinusuportahan ng ilang theme ang shortcodes para sa iframes.

### Shopify

Para sa floating Play button sa iyong storefront, tingnan ang dedicated [Shopify guide](/fil/sharing/shopify). Para sa inline iframe sa page o product:

1. Pumunta sa iyong page/product sa Shopify admin
2. I-click ang **Show HTML** sa editor
3. I-paste ang iframe embed code
4. I-save

### Shopline

Para sa floating Play button, tingnan ang [Shopline guide](/fil/sharing/shopline). Para sa inline iframe, idagdag ang embed code sa Custom HTML section sa theme editor.

### Squarespace

1. Magdagdag ng **Code Block**
2. I-paste ang embed code
3. I-apply ang mga pagbabago

### Wix

1. Magdagdag ng **HTML iframe** element
2. I-paste ang iframe code
3. Ayusin ang size kung kailangan

### Webflow

1. Magdagdag ng **Embed** element
2. I-paste ang embed code
3. I-style ang container kung kailangan

---

## Pag-style ng Embed

### Container Styling

Balutin ang iframe sa styled container:

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

### Centered Layout

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

---

## Permissions

### Kinakailangang Permissions

Isama ang mga ito sa `allow` attribute para sa buong functionality:

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

| Permission   | Kailangan Para Sa                              |
| ------------ | --------------------------------------- |
| `camera`     | Expression-based games, video recording |
| `microphone` | Voice-controlled games                  |

### Kung Hindi Ginagamit ang Mga Feature

Kung hindi gumagamit ang iyong laro ng camera/mic, maaari mong tanggalin ang `allow` attribute:

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

---

## Mga Pagsasaalang-alang sa Seguridad

### Kinakailangan ang HTTPS

Dapat gumamit ang iyong website ng HTTPS para i-embed ang mga DailyPlay game. Hindi gagana ang embed sa HTTP-only sites.

### Content Security Policy

Kung may CSP ang iyong site, idagdag ang DailyPlay sa iyong allowed sources:

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

### Cross-Origin

Gumagana ang mga DailyPlay game sa loob ng iframes sa iba't ibang origins. Walang kinakailangang special configuration.

---

## Pagsubok sa Iyong Embed

1. **Local Testing** — Gumamit ng local server (http://localhost)
2. **Suriin ang Sizing** — Beripikahin na tama ang pagpapakita ng laro
3. **Mobile Test** — Tingnan sa mobile devices
4. **Feature Test** — Kumpirmahin na maayos ang paglalaro

---

## Troubleshooting

### Hindi naglo-load ang laro

- Beripikahin na tama ang game ID
- Suriin na published ang laro
- Siguraduhing ginagamit ang HTTPS

### Mali ang size

- Suriin ang width/height attributes
- Gumamit ng responsive wrapper
- Subukan sa target devices

### Hindi gumagana ang camera

- Magdagdag ng `allow="camera"` attribute
- Siguraduhin ang HTTPS (kailangan para sa camera)
- Dapat magbigay ang user ng permission

### Hinarang ng CSP

- Idagdag ang `frame-src https://app.dailyplay.ai` sa iyong CSP
- Suriin ang browser console para sa partikular na errors

## Mga Susunod na Hakbang

- [Subaybayan ang Analytics](/fil/sharing/analytics) para sa embedded games
- [Ibahagi sa pamamagitan ng Link](/fil/sharing/share) para sa ibang channels