# Embed
Render a Klarefi intake inside your own site with the embed script, inline or as a floating launcher
Source: https://www.klarefi.com/docs/guides/embed

The embed script renders your published intake link inside your own site.
Applicants fill out the form, upload documents, and answer follow-up questions
without leaving your page. Your branding, form styling, and logic all carry
over because the embed renders the same hosted intake.

Get your snippet from the dashboard: open a workflow, choose Share intake
link, then Embed on your site. The snippet already contains your link slug and
the correct script URL.

## Inline

Renders the intake into an element on your page and auto-resizes to the
content height.

```html
<div id="klarefi-intake"></div>
<script
  async
  src="https://app.klarefi.com/embed/v1.js"
  data-klarefi-intake="your-link-slug"
  data-mode="inline"
  data-target="#klarefi-intake"
></script>
```

If `data-target` is omitted or does not match an element, the script creates a
container right before its own script tag.

## Launcher

Adds a floating button in the bottom-right corner that opens the intake in a
panel. Escape and clicking outside close the panel. The panel keeps its state
across open and close, so applicants never lose progress.

```html
<script
  async
  src="https://app.klarefi.com/embed/v1.js"
  data-klarefi-intake="your-link-slug"
  data-mode="launcher"
></script>
```

Optional: `data-color="#0f172a"` recolors the launcher button to match your
site.

## JavaScript API

The script exposes `window.Klarefi`:

| Method               | Description                                             |
| -------------------- | ------------------------------------------------------- |
| `Klarefi.open()`     | Opens the launcher panel                                |
| `Klarefi.close()`    | Closes the launcher panel                               |
| `Klarefi.on(ev, cb)` | Subscribes to an event, returns an unsubscribe function |

## Events

The iframe posts namespaced messages to your page. The script verifies the
message origin in both directions against the origin it was loaded from, and
payloads never contain applicant data.

| Event               | Payload         | When                                          |
| ------------------- | --------------- | --------------------------------------------- |
| `klarefi:ready`     | none            | The intake finished booting inside the iframe |
| `klarefi:resize`    | `{ height }`    | Content height changed; inline mode resizes   |
| `klarefi:submitted` | `{ sessionId }` | The applicant submitted the intake            |

Subscribe with the plain event name:

```js
Klarefi.on("submitted", function (payload) {
  console.log("Intake submitted", payload.sessionId);
});
```

## Single-page apps

The script is idempotent. If your router injects it again on navigation, an
intake that is already mounted stays untouched and no duplicate is created.

## Attribution and white label

Embedded intakes show a small "Powered by Klarefi" link below the form.
Organizations with the white label add-on never show attribution, in embeds or
anywhere else.

## Not the sessions `snippet` field

The `snippet` field returned by `POST /api/v1/sessions` is a redirect helper:
it sends the browser to the hosted session page. It does not embed anything.
Use the embed script on this page to render an intake inside your site, and
`signed_url` when you want to redirect an applicant to a session you created
through the [Sessions API](/docs/api/sessions).

## Browser support

The embedded session uses a partitioned cookie (CHIPS) so it works with
third-party cookie blocking in current Chrome, Edge, Firefox, and Safari 18.4
or later. On browsers that reject all third-party cookies, applicants can
still use your hosted intake link directly.

## Security notes

- Only `/i/*` and `/s/*` are frameable. Every other Klarefi route refuses to
  render inside an iframe.
- Any site can currently frame your public intake link, the same way any site
  can link to it. A per-organization domain allowlist is planned so you can
  restrict embedding to your own domains.
- If your site enforces a Content Security Policy, allow the Klarefi origin in
  `script-src` and `frame-src`.