Embed the digital application form

Embed the hosted start form on your site with an iframe. This example uses:

https://form.kaaj.ai/applications/start/kaaj-test

Replace kaaj-test with your start slug.

Example

Configuration required for every host

The browser decides whether an iframe is allowed. The page that owns the iframe cannot override a refusal from form.kaaj.ai.

• form.kaaj.ai must not send X-Frame-Options: DENY or X-Frame-Options: SAMEORIGIN. If it sends Content-Security-Policy, the frame-ancestors directive must include your site origin (for example https://www.example.com). The start page currently sends neither header, so browsers allow the frame.
• If your site sends its own Content-Security-Policy, frame-src must include https://form.kaaj.ai. child-src must include it too when that directive is set. A meta CSP tag counts the same as a response header.
• Do not set the sandbox attribute unless the value includes allow-scripts allow-forms allow-same-origin allow-popups. Without those tokens the form cannot run scripts, submit, or keep its session.
• Set an explicit height. A bare <iframe> is 300 by 150 pixels, which clips the form. A full-page embed uses height: 100vh and border: 0.
• Serve your page over HTTPS. Cookies set by form.kaaj.ai are third-party cookies inside the frame. They are sent only when the cookie is SameSite=None; Secure. SameSite=Lax or Strict cookies are dropped, and the form session will not stick.
• referrerpolicy="strict-origin-when-cross-origin" sends your site origin without the full path. Use it when the form should know which site embedded it.

File upload works with the default iframe permissions. Add allow="camera; microphone" only if a later step needs those devices.

HTML

No framework is required. If the page is served with a Content-Security-Policy, that policy needs frame-src https://form.kaaj.ai.

<iframe
  src="https://form.kaaj.ai/applications/start/kaaj-test"
  title="Business Financing Application"
  referrerpolicy="strict-origin-when-cross-origin"
  style="display:block;width:100%;height:100vh;border:0"
></iframe>

Next.js

Use the iframe in an App Router page. It can be a Server Component. next/image remote patterns, rewrites, and transpilePackages are not involved.

Change next.config.js only when the app already sets a Content-Security-Policy. In that case add frame-src https://form.kaaj.ai on the response that serves the page:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: 'frame-src https://form.kaaj.ai',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Leave that headers() function out when the app does not send a Content-Security-Policy. Adding only frame-src replaces the whole policy.

const FORM_URL = 'https://form.kaaj.ai/applications/start/kaaj-test';

export default function Page() {
  return (
    <iframe
      src={FORM_URL}
      title="Business Financing Application"
      referrerPolicy="strict-origin-when-cross-origin"
      style={{ display: 'block', width: '100%', height: '100vh', border: 0 }}
    />
  );
}

React

React does not sanitize src on an iframe, so no extra library is required. If the page or the hosting CDN sends Content-Security-Policy, allow https://form.kaaj.ai in frame-src.

const FORM_URL = 'https://form.kaaj.ai/applications/start/kaaj-test';

export default function App() {
  return (
    <iframe
      src={FORM_URL}
      title="Business Financing Application"
      referrerPolicy="strict-origin-when-cross-origin"
      style={{ display: 'block', width: '100%', height: '100vh', border: 0 }}
    />
  );
}

Angular

Angular treats iframe [src] as a resource URL and blocks it. Binding the string directly throws "unsafe value used in a resource URL context" and the frame stays blank. Mark the URL with DomSanitizer.bypassSecurityTrustResourceUrl.

angular.json does not need a change for this embed. If the page sends a Content-Security-Policy, allow https://form.kaaj.ai in frame-src.

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

const FORM_URL = 'https://form.kaaj.ai/applications/start/kaaj-test';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <iframe
      [src]="formUrl"
      title="Business Financing Application"
      referrerpolicy="strict-origin-when-cross-origin"
      style="display:block;width:100%;height:100vh;border:0"
    ></iframe>
  `,
})
export class AppComponent {
  readonly formUrl: SafeResourceUrl;

  constructor(sanitizer: DomSanitizer) {
    this.formUrl = sanitizer.bypassSecurityTrustResourceUrl(FORM_URL);
  }
}

Vue

Vue binds a normal URL with :src. It does not require a sanitizer. Allow https://form.kaaj.ai in frame-src only if the page or host adds a Content-Security-Policy.

<script setup>
const formUrl = 'https://form.kaaj.ai/applications/start/kaaj-test';
</script>

<template>
  <iframe
    :src="formUrl"
    title="Business Financing Application"
    referrerpolicy="strict-origin-when-cross-origin"
    style="display:block;width:100%;height:100vh;border:0"
  />
</template>