You can easily embed any Cleverstory experience within your website or CMS. Once embedded, all content updates will automatically reflect in real-time—no need for manual refreshes or code changes.
Here’s how you can do it:
Step 1: Log in to Cleverstory
Head to Cleverstory and log in with your credentials.
Step 2: Select the Experience
Choose the Storyboard you want to embed. Click on it to access the storyboard settings.
Step 3: Copy the Embed Code
Within the settings panel, look for the Embed Code section and click Copy Code.
You’ll get a snippet like this:
<Sample Code>
<div class="cleverstory__live_element" data-live-element="https://showcase.cleverstory.io/embedded/68876c1ab207b61e7f54cf40" data-id="68876c1ab207b61e7f54cf40" data-width="100%" data-height="400px">
<div id="page-68876c1ab207b61e7f54cf40" style="display: none;"></div>
</div>
<script>
!function(){var t=window,e=t.Cleverstory;if("function"==typeof e)e();else{var a=document,n=function(){var t=a.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://editor.cleverstory.io/scripts/embed_page.min.js";var e=a.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)};t.attachEvent?t.attachEvent("onload",n):t.addEventListener("load",n,!1)}}();
</script>
<Sample Code>
⚡ Note: Within the code, you will have an option to customise the height and the width of the experience you are embedding.
You will see a section in the embed code that reads " data-width="100%" data-height="400px"
While the width will auto adjust to the screen width, you can customise what the height of the experience should be.
Step 4: Paste it into Your CMS
Paste the embed code into your CMS’s HTML editor or source code view—wherever you normally embed external content.
⚡ Note: Cleverstory embeds load inside an iframe and automatically adjust to fit the content’s height.