# Embed

Embed elements drop external content directly into a slide. Three flavors, picked from the inspector.

## Three kinds

- **iframe** — any embeddable URL (YouTube, Vimeo, Calendly, Loom, Figma, your own custom widget). The most flexible.
- **code** — render a syntax-highlighted code block at canvas position. Useful for technical demos.
- **form** — link a form (defined elsewhere — e.g., Tally, Typeform, your own backend) so a [Button](/docs/build/slides/elements/button) with `action.kind: submit_form` can submit it.

Click **Embed** in the top toolbar; pick the kind in the inspector.

## iframe

<!-- omitted: ParamsTable -->

```json title="iframe-embed.json"
{
  "type": "embed",
  "embedKind": "iframe",
  "iframeUrl": "https://www.youtube.com/embed/dQw4w9WgXcQ",
  "position": { "x": 80, "y": 200, "w": 1100, "h": 619 }
}
```

Common embeds:

| What | URL pattern |
|---|---|
| YouTube | `https://www.youtube.com/embed/<videoId>` |
| Vimeo | `https://player.vimeo.com/video/<videoId>` |
| Loom | `https://www.loom.com/embed/<videoId>` |
| Calendly | `https://calendly.com/<user>?embed=true` |
| Figma | `https://www.figma.com/embed?embed_host=share&url=...` |

> [!WARNING]
> Some sites block being iframed (X-Frame-Options / Content-Security-Policy). If your embed shows a blank box, check the source's docs for an embed-specific URL — it usually exists.

## code

<!-- omitted: ParamsTable -->

```json title="code-embed.json"
{
  "type": "embed",
  "embedKind": "code",
  "code": {
    "language": "tsx",
    "source": "<!-- omitted: AvatarWidget -->"
  }
}
```

The current renderer uses a monospace font on a dark surface. Syntax highlighting is on the roadmap — the schema's already ready for it.

## form

<!-- omitted: ParamsTable -->

```json title="form-embed.json"
{
  "type": "embed",
  "embedKind": "form",
  "formId": "tally_xyz123"
}
```

Pair with a [Button](/docs/build/slides/elements/button) that has `action.kind: submit_form` and `formElementId` pointing at this embed's element ID. Without the button, the form submits when the visitor presses Enter inside it.

## Schema reference

`Embed` element:

<!-- omitted: ParamsTable -->

## Read next

- [Button → submit_form](/docs/build/slides/elements/button) — pair a button with a form embed
- [Video](/docs/build/slides/elements/video) — for direct MP4/WebM (not iframe sources)