Generating the Embed Code
Getting Ceros content on your website is a straightforward process. Here’s how:
Publish your experience and select either the Full Height or Scrolling embed code provided.
Paste the copied embed code into the HTML editor on your CMS.
Publish the host page on your site, and you’re done!
Full Height vs Scrolling?
When embedding content made in Ceros Studio, there are two embed code options. While there are some notable differences, both codes automatically scale to fit the width of whatever container you put Ceros into.
Full Height Embed
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.
Full Height embedded experiences have a few limitations in comparison to Standalone and Scrolling experiences:
Pinned objects are not compatible with Full Height embedded experiences
All page heights must be equal to use the Full Height embed
Here is an example code you can test in your CMS:
<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-5dfa6bd3e485e" data-aspectRatio="0.25714286" data-mobile-aspectRatio="0.06539153"><iframe allowfullscreen src='https://view.ceros.com/ceros-educate/test-125?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='For Educate Article' scrolling='no'></iframe></div><script type="text/javascript" src="https://view.ceros.com/scroll-proxy.min.js" data-ceros-origin-domains="view.ceros.com"></script>
Scrolling Embed
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.
This example shows an experience embedded with the Scrolling embed code. As you can see, the experience in the Our Projects section is placed into a small container rather than taking up the entire length of the page.
Please Note:
Pinned objects will work in Scrolling experiences
Additionally, page heights do not need to be the same height
Re-Embedding Experiences
It's important to note that making experience updates (text, images, interactions, animations, etc.) will not require you to re-embed an experience. You’ll only need to re-embed an experience if you:
Change the canvas size
Add a layout (tablet and/or mobile)
Change the browser scaling setting
Adjust the fold line location
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 website. It is only required once per page, regardless of the number of experiences present on the page.