Interactive Experiences(Old) · Learn · Clara.io

Next (jQuery API) Previous (Embedding(Old))

Interactive Experiences(Old)

Check out our NEW API DOCUMENT for Clara.io’s Interactive Experiences.

This method allows you to embed a scene programatically directly into your page using JavaScript. With this method you can interact with the scene through the JavaScript API. Here is an example of a configurator created with Clara.io’s Interactive Experiences tools:

You can also find examples of how to create interactive embeds in our public Github repository here Clara IO Embeding Example Code.

This video also provides an overview of our Interactive Experiences capabilities via “div-embeds”:

To get started, add the following script to your page. If you use jQuery, add the script after your jQuery script tag to enable the jQuery plugin. Note that the third party javsacript loaded with this script is loaded asynchronously, and will not block the rendering of your page.

<script> window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m}; return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement", i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g, String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&q()})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({}); window.clara = lightningjs.require("clara", "http://clara.io/js/clara-embed.min.js"); if (typeof jQuery !== 'undefined') jQuery.fn.clara = function(c,o) { return clara('jq',this,c,o); }; (function() { var l = document.createElement('link'); l.href = "http://clara.io/css/clara-embed.css"; l.rel = "stylesheet"; document.head.appendChild(l); })(); </script>

Here is a barebones page which displays a Clara IO scene that fills the width of the screen.

NOTE: If your Clara IO scene is Private, then it will not be interactive. To set your scene to something other than Private:

Open your scene in the Clara.io
Click on the Share button at the top right of the browser window
Click on the Publishing tab in the dialogue that opens
In the Access Control section, select the radio button Unlisted: those with the share link may view, ora any of those above it.

The following pages describe the available methods of controlling the interactive embeds as well as the commands available:

Topics

Next (jQuery API) Previous (Embedding(Old))