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
<!-- 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
Refererto 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
sandboxunless 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.