Getting Ceros content on your website is an extremely 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!
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.
Every experience has its own unique embed code. Click the Embed button in any published experience to find it.
Full Height vs. Scrolling
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
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?