Bet 06 · live

One tag, one job

Two lines of HTML put a working Motif demo on any page. The script is ~1 KB, has no dependencies, and does exactly one thing: replace each placeholder with the embed iframe. It does not count visitors, does not add a backlink, and does not expose anything beyond a window.MotifEmbed.scan() for nodes added later.

The whole integration

<script src="https://motifui.dev/embed.js" defer></script>
<div data-motif-embed="halo-button" data-height="280"></div>

Optional attributes: data-height (default 320) and data-title for the iframe's accessible name, which defaults to “Motif UI embed: <slug>”.

Live, on this page

Below is the real placeholder, rendered by the real script. With JavaScript disabled you get a link through to the same demo instead of an empty box — the placeholder starts life as a link for exactly that reason.

The embed script would put a live Halo Button demo here — open it directly →

src="/embed.js" · iframe target /embed/halo-button · frame-ancestors * (declared on the embed route)

For framework users

The placeholder is a normal element, so it works inside React, Vue or plain HTML. Mount it after a route change and call window.MotifEmbed.scan(); already-mounted nodes are skipped via a data-motif-mounted flag, so calling it twice does not create two iframes.

The script is served with cache-control: public, max-age=3600 and an x-sdk-version: 1 header. The attribute name is treated as permanent: new options arrive as new attributes rather than as a version change.