Iframe embed

The classic embed. You paste two lines into your page; Ceros' embed script replaces the marker <div> with an <iframe> pointing at the experience's standalone URL.

<div
  data-embed-width="100%"
  data-embed-height="auto"
  data-ceros-experience="https://acme.ceros.site/spring-launch/"
></div>
<script src="https://assets.ceros.site/js/embed.v1.js"></script>

Get the snippet from Embed in Flex, or from the /experiences/{resourceId}/embed-codes endpoint in the API reference.

The two variants

They differ only in data-embed-height:

Variant	Attribute	Behaviour
Full height	data-embed-height="auto"	The iframe grows and shrinks to match the experience's content. No inner scrollbar.
Scrollable	data-embed-height="800px"	Fixed height; content scrolls inside the iframe.

Full height is usually what you want for an experience that sits in the flow of a page. Use scrollable when you need the experience to occupy a fixed slot in your layout.

data-embed-width accepts any CSS width (100%, 960px, …).

How it works

1. embed.v1.js scans the page for <div data-ceros-experience> elements.
2. For each one, it creates an <iframe> whose src is the experience URL.
3. The page inside the iframe is the ordinary standalone published page — same HTML, same caching, same analytics.
4. On full-height embeds, a script inside the iframe reports its content height to the host page via postMessage, and the host resizes the iframe to match. This continues for the life of the page, so the iframe tracks content that changes size.

The script is safe to include once for any number of embeds on the page, and it picks up markers added after load, so it works in single-page apps.

Multiple experiences on one page

Add one marker <div> per experience and a single <script> tag:

<div
  data-embed-width="100%"
  data-embed-height="auto"
  data-ceros-experience="https://acme.ceros.site/spring-launch/"
></div>

<div
  data-embed-width="100%"
  data-embed-height="auto"
  data-ceros-experience="https://acme.ceros.site/q3-report/"
></div>

<script src="https://assets.ceros.site/js/embed.v1.js"></script>

What you get

Because the iframe is the standalone page, everything that mode provides comes along:

• Custom head and body HTML from the experience renders inside the iframe.
• Analytics and error monitoring run inside the experience. This is currently the only embed mode where they do.
• Complete CSS and JS isolation. Your site's global styles can't reach into the experience, and the experience can't reach out. On a corporate CMS or a marketing site with opinionated global CSS, or strict security controls, this is the pragmatic choice.

Trade-offs

• Two documents. The page and the iframe load separately, so the experience is not in your page's initial HTML and doesn't contribute to its SEO.
• A boundary you can't reach across with CSS. Handy for isolation, inconvenient when you want the experience to inherit your fonts or theme.
• Scroll behaviour. A fixed-height iframe traps scrolling inside itself. Full-height embeds avoid this, which is why they're the default.

Analytics

The experience's analytics run inside the iframe as normal. To receive experience events on the host page — clicks, page views, video milestones — use the iframe embed SDK's flexEmbedSdk.on(...) / flexEmbedSdk.onExperience(...). See the Flex Experience SDK documentation for more information.

The iframeless modes dispatch the same events directly on your page; see Analytics events if you're comparing the two, or migrating.

When to use it

• You need analytics or error monitoring inside the experience today.
• Your page has global CSS or JavaScript that would otherwise conflict.
• Your security controls require JavaScript isolation.
• You want the simplest possible integration and don't need the experience in your initial HTML.

When to reach for something else

• You want it to feel like part of the page, with no nested document → Flex Inline.
• You want it server-rendered into your own HTML for SEO and LCP → Flex SSR.