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

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

## 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](/sharing/floating-play-button)** | Fixed button that opens the game in an overlay — ideal for [Shopify](/sharing/shopify) and [Shopline](/sharing/shopline) storefronts |

### iframe Embed

The simplest way to embed your game:

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

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

---

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

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

---

## 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](/sharing/shopify). 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](/sharing/shopline). 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:

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

### Required Permissions

Include these in the `allow` attribute for full functionality:

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

```html
<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](/sharing/analytics) for embedded games
- [Share via Link](/sharing/share) for other channels