Foldkit docs

Raw iframe

For a CMS, a template language, or anywhere you cannot add a script tag. You get a working, autosaving editor with no events and no commands.

The markup

Anywhere HTML goes
<!-- The token goes in the fragment, never the query string: a fragment is
     not sent to any server, not logged, and not in a Referer. -->
<iframe
  src="https://foldkit.theboxes.asia/e?t=sandbox#t=es_YOUR_SESSION_TOKEN"
  style="width:100%;height:800px;border:0"
  allow="fullscreen"
></iframe>

Why the token goes in the fragment

Three properties, none of which a query string has.

  • A fragment is not sent to any server, including ours.
  • It does not appear in access logs or proxy logs.
  • It is not sent in a Referer to anything the page later links to.

A single-use session token in a query string ends up in all three. Mint it on your server — see server-to-server — and render it into the fragment.

Without a backend

If you have no server to mint a token, use a publishable key in the fragment instead. The same origin rules apply: the page framing this has to be on your verified list.

<iframe
  src="https://foldkit.theboxes.asia/e?t=your-tenant#k=pk_live_YOUR_KEY"
  style="width:100%;height:800px;border:0"
></iframe>

What you give up

  • No events. You will not know when a design was saved from the page. Use the webhook — which you should be doing anyway.
  • No commands. You cannot set the box, change the theme, trigger an export or read a snapshot from your page.
  • No auto-resize. Give the iframe a fixed height. 800px is a reasonable starting point; below about 600px the editor gets cramped.

Everything else works, including autosave. Read designs back over the REST API.

Attributes worth setting

<iframe
  src="https://foldkit.theboxes.asia/e?t=your-tenant#t=es_…"
  style="width:100%;height:800px;border:0"
  allow="fullscreen"
  title="Box designer"
></iframe>
  • allow="fullscreen" — the 3D preview offers a fullscreen control.
  • title— screen readers announce the frame by it. Without one it is “iframe”.
  • Do not add sandbox unless you know exactly which tokens the editor needs. It requires scripts, same-origin, forms and downloads, and a partial list produces a blank frame with a browser console message rather than an error you can catch.