Flex Inline renders a published experience directly on your page, scoped within a Shadow DOM so its styles remain separate from your site. You add it by pasting a div that points at the experience's manifest plus the inline client script. Inline is in beta, and your own page owns analytics.
Important: Inline is currently in beta. Reach out to your CSM for more information about gaining access.
What Does Inline Mean?
Inline places a published Flex experience directly in your page without an iframe. The experience is rendered within a Shadow DOM, a scoped section of the page that keeps its styles separate from the rest of your site while still being part of it.
Inline vs. iFrame
Both Inline and iFrame add a published experience to your page, but they do so differently. An iFrame loads the experience inside a separate nested frame, while Inline injects it directly into your page with no frame at all. That core difference drives the rest:
Aspect | Inline | iFrame |
How it loads | Directly on your page, with no frame | Inside a separate nested frame |
Look and feel | Native to the page, with no iframe scrollbars | Boxed, and can show iframe scrollbars |
Styles and scripts | Styles scoped by a Shadow DOM, but shares your page's scroll and scripts | Fully isolated from your page |
Analytics | Your page owns analytics | Built-in analytics or GTM |
Inline is one of two delivery modes that don’t require an iframe, the other being server-side rendering. To compare and decide which delivery method fits your goal, see How Should I Deliver My Published Flex Experience?
How Do I Add an Experience Inline?
Publish the Flex experience.
Open the Embed code options from the Publish menu.
Select iFrameless from the Type dropdown menu.
Click on the inline code in the embed code window to copy it.
Paste the code into the page where you want the experience to appear.
Once added to the page, the script finds the code, attaches a Shadow DOM, and renders the experience.
Because the inline embed is a plain div plus a script, it works in CMS WYSIWYG (”What You See Is What You Get”) editors such as WordPress, Webflow, and AEM, the same as the iFrame embed.
How Do I Capture Analytics With Inline?
With Inline, Ceros does not set up Google Analytics or GTM for you. Instead, the experience fires analytics events on your page, and you listen for them and forward them to your analytics tool.
// Listen for Flex analytics events on your page document.body.addEventListener('ceros-analytics-event', (e) => { const { eventType, experienceName, pageName, componentName } = e.detail // forward to GA or your analytics here })
How Do I Deep-Link to a Specific Page?
Deep-linking lets a multi-page experience open to a specific page from a shared link, and it makes the browser back and forward buttons move between experience pages. The link carries a per-embed query parameter in the form cer_<experienceSlug>=<pageSlug>, so each experience on the page deep-links independently.
In Inline, deep-linking works automatically with no flicker. The inline script reads the link and loads the correct page before the experience appears on screen, so visitors land on the right page instantly and no setup is required.
Inline Beta Limitations
Inline is in beta, and several limitations apply in v1 that do not affect Standalone or iFrame:
position: fixedandposition: stickydo not work yet. Elements set to fixed or sticky positioning will not pin correctly because the experience no longer controls its own scroll container. This is a known issue.Inline content may not be fully indexed for SEO. Inline content is injected with JavaScript inside a Shadow DOM and may not be indexed by all search engines. Use SSR when SEO matters.
Inline requires a relaxed Content Security Policy. Inline currently needs
'unsafe-inline'for styles and scripts.There is no built-in cookie-consent UI. Inline does not provide a cookie-consent interface, so your own consent management applies.
Flex sets no cookies in Inline. The only cookies present are those your own injected code sets, such as your analytics or tracking pixels.
Password-protected experiences cannot be embedded inline. Experiences that require a password are not supported in Inline in v1. Use a standalone link or the iFrame embed for those.
Tip: For the fixed and sticky limitation, set the wrapping div to a fixed height, for example, 800px, or 100vh for full viewport height, to force the experience to scroll internally so fixed and sticky elements pin correctly.