Initialization

Get the javascript

The player is delivered as a javascript umd module. The simplest way to include it is with a script tag:

<script src="https://clara.io/js/claraplayer.min.js"></script>

Initialize the player

The player module exposes a single function: claraplayer. This function takes either the id of a DOM Node, or the DOM Node itself. This DOM Node functions as the container for the player, and all player elements will be rendered inside it.

NOTE: The passed in DOM Node must have a height associated with it.

The return value of the function will be a javascript object that exposes the functionality of the player.

<div id="clara-embed" style="width: 400px; height: 300px;"></div>
<script src="https://clara.io/js/claraplayer.min.js"></script>
<script>
  var clara = claraplayer('clara-embed');

  clara.on('loaded', function() {
    console.log('Clara player is loaded and ready');
  });

  // Fetch and initialize the sceneId
  clara.sceneIO.fetchAndUse("36f47863-c0b9-467f-a64f-78e34e2d894e");
</script>

By passing in the DOM node:

var clara = claraplayer(document.getElementById('clara-embed'));

Next, understand Actions and Selectors.