Embedding Ceros on a Website

2 Minute read

Reading Time: 2 minute

Getting Ceros content on your website is an extremely straightforward process. Here’s how:

  1. Publish your experience and select either the “Full Height” or “Scrolling” embed code provided.
  2. Paste the copied embed code into the HTML editor on your CMS.
  3. Publish the host page on your site, and you’re done!

Note: Pinned Objects will not work in full height embedded experiences, if you want Pinned Objects you should opt for a scrolling embed. Additionally, a full height embed is only possible if a pages in your experience are the same height, otherwise Ceros will default to a scrolling embed.


Here’s an example of the full height embed code looks like. Feel free to embed this code on your own site to see how easy it is to get Ceros content up and running.

<div style='position: relative;width: auto;padding: 0 0 388.89%;height: 0;top: 0;left: 0;bottom: 0;right: 0;margin: 0;border: 0 none' id="experience-614dce567a085" data-aspectRatio="0.25714286" data-mobile-aspectRatio="0.06539153"><iframe allowfullscreen src='//view.ceros.com/ceros-educate/tech-landing-page?heightOverride=5600&mobileHeightOverride=12234' style='position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: 0;padding: 0;border: 0 none;height: 1px;width: 1px;min-height: 100%;min-width: 100%' frameborder='0' class='ceros-experience' title='Tech Landing Page' scrolling='no'></iframe></div><script type="text/javascript" src="//view.ceros.com/scroll-proxy.min.js" data-ceros-origin-domains="view.ceros.com"></script>

Every experience has its own unique embed code. Click the Embed button in any published experience to find it.

Embed gif

Full Height vs. Scrolling

scrolling vs full height

For long-scroll experiences, Ceros provides two different versions of the code.

Full Height: Displays your content at the full page canvas height set in the Canvas Settings in the Design tab. This option scrolls naturally with your parent page without additional scrollbars. This option is only possible if every page in your experience is the same height.

Scrolling: Displays your content in a viewport with internal scrollbars. The iframe will match the Width and Fold set in the Canvas Settings in the Design tab.

The example we’ve provided above uses the Full Height option.

Both codes automatically scale to fit the width of whatever container you put Ceros into.

Animate on Scroll

The Javascript at the end of the Ceros embed code is required for animations to play on scroll. Otherwise, anything appearing below the fold will play before the user sees it. If your animations don’t work as expected, check to make sure your CMS has not automatically removed the script.

Using our export feature, your development team is welcome to host the scroll-proxy.min.js on your own website. It is only required once per page, regardless of the number of experiences present on the page.

Customizing for Your Site

Every website is different, so your needs may vary. Fortunately, our embed code is completely open-source. Feel free to change it or create a custom iFrame with your experience URL.

Was this helpful?

You already voted!
14 out of 19 people found this helpful