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:
| 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:
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-srcandframe-src.