Embedding Ceros on a Website

knlowledgeart

Embedding Ceros on a Website

Getting Ceros content on your website is an extremely straightforward process. Here’s how. Additionally, for a step-by-step tutorial, be sure to check out our Publishing and Embedding courses.

  1. Publish your experience and select either the “Full Height” or “Scrolling” embed code provided. You can learn more about these two options in our video lesson here or in the content below.
  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.

Example:

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 267.97%;height:0;top:0;left:0;bottom:0;right:0;margin:0;border:0 none" id="issue-56cf3e2c21600">
<iframe allowfullscreen src="//view.ceros.com/creative-services/desktop?heightOverride=2744" style="position:absolute;width:100%;height:100%;top:0;left:0;bottom:0;right:0;margin:0;padding:0;border:0 none" frameborder="0" class="ceros-experience"></iframe>
</div>
<script type="text/javascript" src="//view.ceros.com/scroll-proxy.min.js"></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 bottom left corner. 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 lower left corner of the Ceros Studio.

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.

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.

To learn more advanced publishing tips, visit our Publishing Designer Course.