Embedding a Ceros Experience on a Website

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 pages in your experience are the same height, otherwise, you will only be able to use the Scrolling embed.

Example

Here’s an example of what the Full Height embed code looks like. Feel free to embed this code on your 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-5dfa6bd3e485e" data-aspectRatio="0.25714286" data-mobile-aspectRatio="0.06539153"><iframe allowfullscreen src='//view.ceros.com/ceros-educate/educate-example' 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="//view.ceros.com/scroll-proxy.min.js" data-ceros-origin-domains="view.ceros.com"></script>

Every experience has a 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.

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.

Note: Check out our Introduction to oEmbed and How It Works with Ceros guide to learn about a simplified alternate embedding method!