Embed on Website

Embed your DailyPlay games directly on your website for a seamless brand experience.

Example

Here’s a live example of an embedded DailyPlay game:

Embed Methods

DailyPlay offers two embed formats in the Share/Embed panel:

Format	Description
Simple iframe	Inline game on your page (this guide)
Floating Play button	Fixed button that opens the game in an overlay — ideal for Shopify and Shopline storefronts

iframe Embed

The simplest way to embed your game:

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

Responsive Embed

For responsive layouts that adapt to 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>

---

Getting the Embed Code

From the Game Page

1. Open your published game
2. Click Share/Embed
3. Select the Embed tab
4. Copy the embed code

From Manage Games

1. Go to Manage Games
2. Find your game
3. Click Share/Embed
4. Copy the embed code

---

Embed URL Format

Standard Embed

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

With Parameters

Add query parameters for customization:

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

Available parameters:

Parameter	Values	Description
hideHeader	true/false	Hide the game header
hideFooter	true/false	Hide the footer
autoplay	true/false	Start game automatically

---

Sizing Guidelines

Mobile-First (Recommended)

For mobile-optimized games:

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

Desktop Display

For wider 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>

---

Platform-Specific Instructions

WordPress

Using HTML Block:

1. Add a new block
2. Select Custom HTML
3. Paste the embed code
4. Preview and publish

Using Shortcode (if available):

Some themes support shortcodes for iframes.

Shopify

For a floating Play button on your storefront, see the dedicated Shopify guide. For an inline iframe on a page or product:

1. Go to your page/product in Shopify admin
2. Click Show HTML in the editor
3. Paste the iframe embed code
4. Save

Shopline

For a floating Play button, see the Shopline guide. For an inline iframe, add the embed code in a Custom HTML section in the theme editor.

Squarespace

1. Add a Code Block
2. Paste the embed code
3. Apply changes

Wix

1. Add an HTML iframe element
2. Paste the iframe code
3. Adjust size as needed

Webflow

1. Add an Embed element
2. Paste the embed code
3. Style the container as needed

---

Styling the Embed

Container Styling

Wrap the iframe in a 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

Required Permissions

Include these in the allow attribute for full functionality:

allow="camera; microphone"

Permission	Needed For
camera	Expression-based games, video recording
microphone	Voice-controlled games

If Features Aren’t Used

If your game doesn’t use camera/mic, you can omit the allow attribute:

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

---

Security Considerations

HTTPS Requirement

Your website must use HTTPS to embed DailyPlay games. The embed won’t work on HTTP-only sites.

Content Security Policy

If your site has a CSP, add DailyPlay to your allowed sources:

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

Cross-Origin

DailyPlay games work within iframes across different origins. No special configuration needed.

---

Testing Your Embed

1. Local Testing — Use a local server (http://localhost)
2. Check Sizing — Verify the game displays correctly
3. Mobile Test — View on mobile devices
4. Feature Test — Confirm game plays properly

---

Troubleshooting

Game not loading

• Verify the game ID is correct
• Check the game is published
• Ensure HTTPS is used

Wrong size

• Check width/height attributes
• Use responsive wrapper
• Test on target devices

Camera not working

• Add allow="camera" attribute
• Ensure HTTPS (required for camera)
• User must grant permission

Blocked by CSP

• Add frame-src https://app.dailyplay.ai to your CSP
• Check browser console for specific errors

Next Steps

• Track Analytics for embedded games
• Share via Link for other channels