---

Synchronous Embedding

The embed code uses Lightning.js to load Clara safely and politely. However, if the Clara.io embed is the main focus of your web page, you can load it synchronously to speed up the scene loading. This mechanism has the following side effects:

• Clara.io globals will pollute your page: exo, THREE, bootstrap, jQuery, et cetera.
• The rest of the content on your page is now loaded in parallel with the Clara embed, and may be delayed slightly.
• You must wait until the embedded code is loaded before calling the clara function.

First, add to your page:

<script src="https://clara.io/api/utils/div_embed_dependencies.js"></script>

This sets the global variable claraDivEmbedDependencies. (api/utils/div_embed_dependencies) returns JSON if you prefer that).

Replace the embed code with:

var loadScript = function(src, callback) {
  var script = document.createElement('script');
  script.onload = callback;
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
};

(function() { var l = document.createElement('link'); l.href = claraDivEmbedDependencies.css; l.rel = "stylesheet"; document.head.appendChild(l); })();

claraDivEmbedDependencies.js.slice(0,-1).forEach(loadScript);
loadScript(claraDivEmbedDependencies.js.slice(-1)[0], function() {
  var clara = divEmbed(window, document);
  if (typeof jQuery !== 'undefined') jQuery.fn.clara = function(c,o) { return clara.jq(this,c,o); };

  // you may now use the clara or $.clara functions.
});

$.clara works the same as described in the jQuery plugin section of this document. However, the plain javascript function clara works slightly differently.

Replace:

clara('init', {el: element, id: 'uuid', loadingImg: '/img/splash.jpg'}).then(function() {
    alert('player started');
});

with:

clara.init({el: element, id: 'uuid', loadingImg: '/img/splash.jpg'});
alert('player started');

---