Third-party embed

Inliner Editor on your site

Drop the editor in an iframe. Point sourceUrl at the hosted image you want to edit. Change that param to open a different image.

Iframe + URL params

Build the src in code with encodeURIComponent (or URLSearchParams) so the image URL stays intact.

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

Query parameters

Param	Purpose
`sourceUrl`	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 below so the key stays off the iframe URL.

JavaScript helper

<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 a specific image

This page reads the same query params. Paste a hosted Inliner URL and open it.