Embed the Inliner Editor

Put the same Studio editor on your site. Pass sourceUrl to open a specific hosted image. Publish returns a new Inliner URL you can put on your <img>.

Iframe + URL params

This is the usual third-party path. Encode the image URL and change it whenever you want to edit a different asset.

HTML

<iframe
  title="Inliner Editor"
  src="https://app.inliner.ai/inliner-editor/index.html?embed=1&sourceUrl=https%3A%2F%2Fimg.inliner.ai%2Facme%2Fhero.png&project=acme&mode=layers"
  style="width:100%;height:720px;border:0"
  allow="clipboard-write">
</iframe>

Build the src in JavaScript so each product or user gets their own image:

JavaScript

const sourceUrl = 'https://img.inliner.ai/acme/hero.png';
iframe.src = 'https://app.inliner.ai/inliner-editor/index.html?' + new URLSearchParams({
  embed: '1',
  sourceUrl,
  project: 'acme',
  mode: 'layers'
});

Query parameters

Param	Purpose
`sourceUrl`	Hosted image to open, usually `https://img.inliner.ai/{project}/{slug}.png`
`project`	Project namespace for Publish and Apply AI
`contentId`	Optional. Reopen a saved layer document
`mode`	`layers` (default) or `ai`
`editModel`	`cheap`, `recommended`, or `quality`
`embed`	Set to `1` when the editor is framed
`apiKey`	Needed for Publish / AI from another origin. Prefer the JS helper so the key stays off the iframe URL.

Do not put a session token on the URL. Use an API key from Account → API Keys when the editor runs on your domain.

JavaScript helper

The IIFE writes the same query params onto the iframe, then listens for publish.

HTML + JS

<div id="inliner-editor"></div>
<script src="https://app.inliner.ai/inliner-editor/inliner-editor.iife.js"></script>
<script>
InlinerEditor.embedIframe('#inliner-editor', {
  embedUrl: 'https://app.inliner.ai/inliner-editor/index.html',
  apiKey: 'inl_your_key',
  project: 'acme',
  sourceUrl: 'https://img.inliner.ai/acme/hero.png',
  mode: 'layers',
  onPublish(result) {
    document.querySelector('img.hero').src = result.url || result.dataUrl;
  }
});
</script>

Try it

The live snippet page accepts the same query params. Open a banana test image, or swap in your own sourceUrl.

Open the embed snippet

Resources

Live embed snippet
Chrome-less editor route (same query params)
REST API for generate / edit without the UI