Developer docs  /  Themes

Embed layout & resize contract

layouts/embed.fluid is the chrome-less wrapper for tenants who iframe the storefront intotheir own marketing site (/embed/spaces, legacy /embed/units). If your theme doesn't shipone, embed URLs still work — they just render with full chrome through main.fluid. A properembed layout must provide:

  • <base target="_top"> — so links inside the iframe navigate the parent window instead of trapping the visitor inside the frame.
  • The height-publishing script. The parent page sizes the iframe by listening for postMessage events of type alyta:embed:resize — this exact type string matches the legacy Angular embed broadcaster, so tenants' existing wiring keeps working. From origin's embed.fluid:

```html

```

Two details are deliberate: the height is the body's real content height (getBoundingClientRect().height), not scrollHeightscrollHeight can never drop below the iframe viewport once the parent has grown it, so shrink events (filters hiding cards, the inline detail view) would ratchet the iframe permanently tall. And ResizeObserver covers both grow and shrink from data changes, with a load + requestAnimationFrame tick for initial sizing.

  • No SEO/OG/canonical tags (the parent page owns those), a transparent zero-margin body, the theme CSS variables so the embed matches the tenant's branding, and its own quote-modal include (it doesn't get main.fluid's chrome).

The parent-page snippet a tenant needs is just:

<iframe id="alyta" src="https://{their-host}/t/embed/spaces" style="width:100%;border:0"></iframe>
<script>
window.addEventListener('message', function (e) {
if (e.data && e.data.type === 'alyta:embed:resize')
document.getElementById('alyta').height = e.data.height;
});
</script>