Embedding pages

One snippet turns any static page into structured intake: your marketing site, a client's WordPress blog, a Notion-published page, the plain HTML brochure site an agency shipped in 2019. Visitors see a page; you see records flowing onto a board, triggering webhooks, ready for your team or an AI agent — with zero backend on the embedding site.

How it works

Each page in Snapi has a public submission endpoint:

POST https://api.snapi.ca/api/v1/public/submit/:entityId

The embed script renders your page automatically from its field schema and posts to this endpoint. Records appear in your workspace in real time.

Getting the embed snippet

1. Open your workspace and navigate to Pages.
2. Click the page you want to embed.
3. Click the Share / Embed button in the top-right toolbar.
4. Copy the snippet from the Embed tab.

It's a self-sizing iframe — no script tag with data attributes, no build step:

<iframe
  id="snapi-embed-..."
  src="https://app.snapi.ca/embed/your-org/contact-form"
  width="100%"
  height="480"
  frameborder="0"
  scrolling="no"
  style="border: none; border-radius: 8px;"
  title="Contact Form"
></iframe>
<script>
  // Listens for the embedded page reporting its own content height,
  // so the iframe grows/shrinks with the form and never shows its
  // own scrollbar. Included automatically when you copy the snippet.
</script>

No website? Use the standalone hosted page

Every public page also has its own real, shareable web page — not an iframe, not a snippet, just a link:

https://app.snapi.ca/forms/your-org/contact-form

It's a full page with your org name, the page's icon/color/description, and the page itself — styled the same way as an embed (see Styling below). Unlike the iframe embed URL, it's indexable and carries Open Graph tags for link previews, so it's meant to be shared directly: an "Apply Now" button in a job listing, a link in an email, a QR code on a poster. Get the link from the page's Share / Embed panel, or replace /embed/ with /forms/ in an iframe URL you already have.

Restricting where your page can be used

Set Allowed Domains in the page's Public Page tab (e.g. example.com, another.com) to control where the page works. Enforcement happens in two places:

• When the embed page loads — an iframe on a site that isn't on your list gets "This form cannot be embedded on this site" instead of the page.
• When a submission arrives — script-embed submissions from a non-allowed origin are rejected with 403.

Subdomains are included automatically (example.com also allows www.example.com). Leave the field empty to allow embedding anywhere.

Gotchas

• "app.snapi.ca refused to connect" — the page isn't public (enable the Public Page toggle and save), or the iframe URL wasn't copied from the Embed Code box.
• Don't add app.snapi.ca to your Allowed Domains. Submissions from an iframe embed technically arrive from Snapi's own origin — that's normal browser behavior and handled automatically. Your list should contain only the site(s) that embed the page.
• Domain restriction is a strong deterrent, not DRM. Browsers verify the embedding site via standard headers, which a non-browser client can spoof. For sensitive flows, enable Require Authentication or validate submissions in a pre-submit webhook.
• Internal fields never appear on public pages — fields marked Internal are stripped from the public page config and from any submission that tries to set them.
• Script updates: snapi.js is cached for up to an hour — changes to the SDK can take that long to reach embedded pages.

Styling the embedded page

snapi.js renders plain, real DOM into your page — no shadow root, no build step. That cuts both ways: your site's CSS can't accidentally clash with it (everything is scoped under the .snapi-form class), but it also means your CSS can reach in and restyle anything, as long as it loads after snapi.js or uses higher specificity.

Colors: the six CSS custom properties

Every color in the default styles reads from a CSS custom property with a hardcoded fallback, so overriding six variables reskins the whole page — inputs, buttons, links, focus rings, everything:

:root {
  --snapi-primary: #2551ed;   /* buttons, links, focus ring, submit */
  --snapi-text:    #111827;   /* labels, title, radio text */
  --snapi-bg:      #ffffff;   /* form background */
  --snapi-border:  #d1d5db;   /* input borders, table header rule */
  --snapi-danger:  #ef4444;   /* danger buttons, retry button */
  --snapi-success: #10b981;   /* success icon */
}

Everything else: the full class reference

For layout, spacing, and anything the six color variables don't cover, target these classes directly. Every field type, button, and state snapi.js can render has one.

Structure & typography

Inputs & buttons

File & reference fields

Tables & charts

Messages, states & the auth modal

Submission limits

Public page submissions are unlimited on every plan, including Free — no monthly quota, no record cap. See Plans & limits for the full comparison.

Spam and rate limiting

The public submit endpoint is IP-rate-limited (60 requests per 15 minutes per IP) regardless of plan. For high-volume use cases, authenticated API access via an API key is recommended instead.

Receiving submissions in real time

Every submission triggers your page's configured webhooks (Builder plan or higher). You can use a post-submit webhook to send confirmation emails, sync to a CRM, or trigger automation in n8n.