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:

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	Fixed button na bumubukas ng laro sa overlay — perpekto para sa Shopify at Shopline storefronts

iframe Embed

Ang pinakasimpleng paraan para i-embed ang iyong laro:

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

<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

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

<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

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

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:

<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 para sa embedded games
• Ibahagi sa pamamagitan ng Link para sa ibang channels