Iframe embeds

The simplest way to add a form to your site: build it in the yorkyy dashboard, get a public link, drop it on your page as an iframe. No code on your side, no integration to maintain.

When to use embeds

Use iframe embeds when:

You're not a developer and don't want to write code
You want yorkyy's hosted form UI exactly as-is (themed, validated, mobile-friendly)
You'd rather edit the form in our dashboard than redeploy your site

Use endpoints instead if you want your own form UI and just want yorkyy to receive the submissions.

Basic embed

Build your form at dashboard / Forms
Publish it — drafts can't be embedded
Copy the public URL — looks like https://yorkyy.com/f/mP33VvCwDqN
Drop this iframe wherever you want the form to appear:

<iframe
  src="https://yorkyy.com/f/mP33VvCwDqN"
  width="100%"
  height="600"
  style="border:none;"
  loading="lazy"
  title="Contact form"
></iframe>

That's the entire integration. Submissions flow through yorkyy's normal notification pipeline; your channels receive them in real time.

Responsive height (recommended)

Fixed iframe heights cause layout issues — too short and you get scrollbars; too tall and you get empty space. Use this small snippet to auto-size the iframe to its content:

<iframe id="yorkyy-form" src="https://yorkyy.com/f/mP33VvCwDqN"
        width="100%" style="border:none;" loading="lazy"></iframe>

<script>
  window.addEventListener("message", (event) => {
    if (event.origin !== "https://yorkyy.com") return;
    if (event.data?.type !== "yorkyy:resize") return;
    const iframe = document.getElementById("yorkyy-form");
    if (iframe && typeof event.data.height === "number") {
      iframe.style.height = event.data.height + "px";
    }
  });
</script>

The form measures its own content and posts { type: "yorkyy:resize", height }to the parent window whenever the height changes. The origin check is critical — never accept messages from arbitrary origins.

Embedding in popular platforms

Webflow / Framer / Squarespace

Add an "Embed" or "HTML" block to your page and paste the iframe code. Set the block's width to 100%. For auto-resize, also paste the script snippet in your site's <head> (Site settings → custom code).

WordPress

In the block editor, add a "Custom HTML" block and paste the iframe. For auto-resize, install a "Header Footer Code" plugin and paste the script snippet in the footer.

React / Next.js

"use client";

import { useEffect, useRef } from "react";

export function YorkyyForm({ publicId }: { publicId: string }) {
  const ref = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    const onMessage = (event: MessageEvent) => {
      if (event.origin !== "https://yorkyy.com") return;
      if (event.data?.type !== "yorkyy:resize") return;
      if (ref.current && typeof event.data.height === "number") {
        ref.current.style.height = event.data.height + "px";
      }
    };
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, []);

  return (
    <iframe
      ref={ref}
      src={`https://yorkyy.com/f/${publicId}`}
      width="100%"
      style={{ border: "none" }}
      loading="lazy"
      title="yorkyy form"
    />
  );
}

Theming

The embedded form respects every styling choice you made in the dashboard's Style panel — palette, typography, density, radius. The form's color scheme also follows the visitor's system preference (light or dark mode), independent of your site's theme. To force one mode, append?theme=light or ?theme=dark to the src URL.

What gets posted to the parent window

The iframe sends two kinds of messages:

Type	Payload	When
`yorkyy:resize`	`{ height: number }`	Whenever the form's height changes.
`yorkyy:submitted`	`{ submissionId: string }`	Right after a successful submission.

You can listen for yorkyy:submitted to fire analytics, swap the iframe for a custom thank-you, or trigger any other client-side action.

Security

Iframe embeds are sandboxed by the browser. yorkyy's iframe runs in a separate origin and cannot read or write your site's cookies, localStorage, or DOM. The only communication path is postMessage — and you control which messages your script trusts.

We set Content-Security-Policy: frame-ancestors * on form pages so they can be embedded anywhere. If you want to restrict which sites can embed your form, set an origin allowlist on the form in the dashboard (Phase 7).

Local testing

Embed testing has a few gotchas during local development:

Test against the production yorkyy when you can. Hosted forms work cleanly through any tunnel; the iframe pattern is designed for production use.
Avoid pnpm dev over tunnels. Next.js dev mode includes a hot-reload websocket that connects back to localhost, which breaks behind any tunnel (ngrok, cloudflared, etc.). You'll see partial styling and unclickable elements. Use pnpm build && pnpm start for tunneled testing — production builds have no HMR websocket.
Test on localhost first. Open a second tab to your form's public URL on localhost:3000/f/<id> directly and confirm it works there before embedding.
ngrok free tier shows an interstitial the first time someone visits a tunnel URL. Set ngrok-skip-browser-warning header on your fetch or use a paid tier for clean testing.