Documentation

Everything you need to put games, tools and AI tools into your pages, on one page.

Start in three steps

1. Join with an invite code (or apply on the same page). You get a licence key and a public id at once, and add the domains you will embed on.
2. Pick an item in the catalog and try it on its page.
3. Paste the code into your page. Every item page, and Get code in your console, gives you the code with your public id:

<script src="https://useiframe.com/f.js"
        data-account="YOUR_PUBLIC_ID" async></script>
<div data-iframe="geo-sleuth" data-ratio="4:3"></div>

Open the page: the item loads, and the place shows up under Embeds in your console.

The code

Put the <script> on a page once, and one <div data-iframe> wherever an item should appear:

<script src="https://useiframe.com/f.js" data-account="YOUR_PUBLIC_ID" async></script>

<div data-iframe="geo-sleuth" data-slot="main"></div>
<div data-iframe="rarest" data-slot="sidebar" data-launch="click" data-ratio="4:5">
  <button type="button">▶ Play Rarest</button>
</div>

The loader is small (under 3 KB compressed), loads asynchronously and never breaks the rest of your page if something goes wrong. Items run on a separate content domain and cannot touch your page’s cookies or scripts.

Putting it on your site

One rule: the code has to sit in your own page. The <script> once per page (adding it twice is harmless: it runs once), each <div> where an item should appear.

Plain HTML, static sites

Put the <script> in the <head> or before </body> (it loads asynchronously), and the <div> where the item goes.

WordPress (self-hosted)

Add a Custom HTML block to the post or page and paste the whole code. Only administrators and editors can save content with a <script> (on a multisite network, only super admins); for other roles the script is stripped on save. Then have an administrator put the script in the theme footer, or add it site-wide once with a code snippets plugin, and keep only the div in posts.

WordPress.com

Only plans that allow plugins keep a <script>; other plans strip it, so the code does nothing.

Blogger

Switch the post editor to HTML view before pasting. Or add an HTML/JavaScript gadget under Layout with the script once for the whole blog, and keep only the div in posts.

React, Next.js, Vue and other single-page apps

Add the script once in the root layout (or index.html) and write the div in your components. The loader notices new divs, so items on pages reached by client-side navigation load too, and places without data-slot keep their names when you come back to a page. In Next.js:

// app/layout.jsx: once
import Script from 'next/script';
<Script
  src="https://useiframe.com/f.js"
  data-account="YOUR_PUBLIC_ID"
  strategy="afterInteractive"
/>

// any page or component
<div data-iframe="geo-sleuth" data-slot="main" data-ratio="4:3" />

• Keep the default afterInteractive, not beforeInteractive, so the framework never finds a div that has already changed when it takes over the page.
• Don’t put framework-rendered content inside the div: when a click-to-start place starts, that content is replaced by the frame, and later updates from the framework can fail. For your own start button, call window.iframeApp.start(el) in its click handler.
• If your app sets <link rel="canonical">, update it on every route change: page addresses follow the canonical link.

Drag-and-drop site builders: some builders’ “embed HTML” widgets run your code inside a frame (iframe) of their own. We then see the frame’s address instead of your page, the allowed-domain check fails and the item doesn’t load. Use the builder’s “code in the head / footer of every page” setting for the script and a place that takes plain HTML for the div; if the builder has neither, it can’t be used for now.

Sites with a Content Security Policy (CSP): allow the content domain, for example:

script-src 'self' https://useiframe.com;
frame-src https://useiframe.com;
img-src 'self' https://useiframe.com;

Item not showing?

Check in this order:

1. The frame says “This embed isn’t switched on for …”: add that domain to the allowed domains on your console overview (add localhost to test on your own computer).
2. The frame says the code is missing its account, or the account isn’t active: copy the code again from Get code in your console and check that data-account is your public id; if your licence has expired, contact us to renew it.
3. No frame at all: check the page source still has the script (some editors strip it, see above), that a site builder hasn’t put the code in a frame of its own, that your CSP allows the content domain, and the browser’s developer console for errors.
4. The frame shows but the item never finishes loading: some items are large; give it a moment, or try another browser or network. You can also switch the place to another item in your console.
5. The place isn’t in your console: it appears once the page has been opened (or a click-to-start place has been seen); refresh the console. If it still isn’t there, it is one of the cases above.

Live embeds: switch items without editing pages

The first time a place is opened, it is registered as an embed (one per page address and place name). Then, under Embeds in your console, you can:

• switch selected places to another item;
• replace one item everywhere at once (say a game was retired and you want a similar one);
• go back to the item written in the page;
• undo any change from the Changes list.

Changes apply on the next load; the page itself stays untouched. When an item is taken down for a while, its stand-in shows where one is set, and you can always switch it yourself.

How a page is identified: its same-host <link rel="canonical"> if it has one, else its address, without the # part and without tracking parameters (utm_*, gclid, fbclid, ref), so one page is never counted as many.

Allowed domains

Your code only works on the domains in your account; someone copying your code to their site gets nothing. The rules:

• example.com covers every subdomain too (www., blog. …);
• add localhost to test on your computer;
• change them any time on the console overview, up to 20.

Statistics

The console counts loads per place per day (an item actually opened). Places with data-launch="click" also count impressions (seen but not clicked yet). The overview shows 7- and 30-day totals and your busiest items and pages; Embeds lists each place with its 7-day loads and when it was last seen. Places not seen for 30 days are marked idle, never deleted.

With the earnsite engine

earnsite is the companion site engine. Put your licence key in its LICENSE_KEY setting: the engine picks games and builds pages through your account, and items load from your own site’s play. subdomain, so visitors only ever see your domain. Those pages show up under Embeds like any other, with the same one-click switching. One licence covers 3 engine installs by default.

For developers: the API

To pick items or manage embeds from code, call the API. Everything is JSON; errors look like {"error":{"code","message"}}.

Everything except the catalog needs two headers: Authorization: Bearer <licence key> and X-Install-Id: inst_ plus 24 letters or digits (one fixed value per server or app; it counts as an engine install). Keep the key on your server — never in a web page.

Let your AI do it (MCP)

If you use Claude or another AI tool that speaks MCP, connect your account: it can pick items, write the code, list and switch your embeds, read statistics and send requests.

• URL: https://www.iframe.app/mcp/site
• Header: Authorization: Bearer <licence key>

{
  "mcpServers": {
    "iframe-app": {
      "type": "http",
      "url": "https://www.iframe.app/mcp/site",
      "headers": { "Authorization": "Bearer gh_live_…" }
    }
  }
}

Tools: catalog_search, item_get, embed_code, account_get, domains_set, embeds_list, embeds_switch (dry_run first), embeds_unpin, embeds_undo, changes_list, stats, request_item, suggest_game, my_submissions. They only reach your own account. Keep the key on your own device.

Beta limits

• The beta is free and by invitation;
• up to 3 engine installs per account (counted over 30 days);
• up to 2,000 new embeds per account per hour (normal use never gets close);
• API: 600 requests per minute per account.

Need more? Tell us through the channel your invite came from.

FAQ

Will it slow my page down?

No. The script is small and asynchronous, and items run in their own frame. With several items on one page, data-launch="click" keeps it quick.

Do items show ads?

Items made by iframe.app have none. Items marked “publisher ads inside” come from a game publisher that shows its own ads in the game (usually a short one before play); that revenue goes to the publisher. Tick “No ads” in the catalog to hide them.

Does it work on phones?

Items marked “phones” in the catalog are tested on phones. Portrait shapes (like 9:16) work best there.

What if an item breaks?

Every item is checked daily and broken ones are taken down; where a stand-in is set, it shows instead. You can also switch it with one click in your console.

Can I change an item or remove its branding?

No, items are shown as they are. See the terms.

Lost or leaked key?

Leaked: replace it on the console overview (you type the current key once more). Lost: contact us and we will issue a new one.

Do you collect data about my visitors?

No personal data: only page addresses, place names and load counts. See privacy.