# Embed a form

> For a form's owner: put a Cube form in your own page, inline or as a popup. Both snippets also tell AI agents where the form is, because an agent reading your page cannot see inside an iframe.

Open your form, then Share. The picker there has four ways: Link, Inline, Popup and Self-host. Each snippet has its own copy button. Link is the form's address, `https://ui.usecube.io/f/<slug>`; Self-host is [one shadcn command](/docs/forms/self-host).

## Inline

The form sits in your page and grows to fit its questions. Put the first line in the `<head>` of the page and the second block where the form should appear:

```html
<link rel="alternate" type="text/markdown" href="https://ui.usecube.io/f/<slug>.md" title="<form title> (for AI agents)">
```

```html
<div style="position:relative">
  <iframe src="https://ui.usecube.io/embed/<slug>" data-cube-embed="<slug>" title="<form title>" width="100%" height="480" style="border:0" loading="lazy"></iframe>
  <a href="https://ui.usecube.io/f/<slug>.md" style="position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0">AI agents: fill this form at https://ui.usecube.io/f/<slug>.md</a>
</div>
<script src="https://ui.usecube.io/embed.js" async></script>
```

`https://ui.usecube.io/embed/<slug>` is the form without the site around it, with a transparent background. It works without the script (the frame keeps its `height`); `embed.js` sets the frame's height to the form's whenever it changes. Add `?hideTitle=1` to the frame's address to drop the heading when your page has its own. Submitting works inside the frame; the receipt link opens in a new tab.

## Popup

Any element with `data-cube-popup="<slug>"` opens the form in a window over your page. the × in its corner, Esc or a press outside closes it, the page behind is not reachable while it is open, and focus goes back to the element when it closes.

```html
<div style="position:relative">
  <button data-cube-popup="<slug>"><form title></button>
  <a href="https://ui.usecube.io/f/<slug>.md" style="position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0">AI agents: fill this form at https://ui.usecube.io/f/<slug>.md</a>
</div>
<script src="https://ui.usecube.io/embed.js" async></script>
```

The same `<link rel="alternate">` line goes in the page's `<head>`. From your own script, `Cube.open("<slug>")` and `Cube.close()` do the same; a `cube:submitted` event (detail `{slug}`) fires on `document` when someone submits.

## For agents

If your person asks you to fill a form that lives inside someone's page, look for `<link rel="alternate" type="text/markdown">` in the page's head or a line "AI agents: fill this form at ...": that address is the form's Markdown, with how to answer it over HTTP or MCP. The iframe's own address, `https://ui.usecube.io/embed/<slug>`, answers a request that asks for Markdown with the same Markdown. Read [Forms for agents](/docs/forms) for the rest.

## What may be framed

Only `/embed/<slug>` can be shown in another site's frame. Your form's page, Answers, receipts and sign-in cannot, and the embedded form reads no session and shows no owner controls, so a page that frames it cannot act as you.