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 Inline from the embed toggle.
Choose either Full Height or Scrolling from the Style 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, you can use the following API for listening to analytics and forwarding them:
// 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
})
Or, use the following to listen to a specific experience via slug/regex:
// Only experiences matching a filter: '*' (all), a substring, or a RegExp
window.flexAnalytics.onExperience('spring-launch', ({ analyticsEvent }) => { … })
window.flexAnalytics.onExperience(/campaigns\/2026\//, ({ analyticsEvent }) => { … })
What Does This Mean?
When you embed a Flex experience with Inline, it keeps track of what visitors do, such as opening the experience, viewing a page, clicking a component, or playing a video. It does not send that information to Google Analytics on its own. Instead, it announces each of those actions on your own web page, and you add the code above that listens for those announcements and passes them along to your existing analytics tool. You can listen to every experience on the page at once, or narrow it down to a single experience when you have more than one embedded on the same page.
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:
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.
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.