Guides

Embed

Render a Klarefi intake inside your own site with the embed script, inline or as a floating launcher

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.

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

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

MethodDescription
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.

EventPayloadWhen
klarefi:readynoneThe 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:

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.

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.

On this page