This demo shows how to add configuration panel in the webpage.

var sceneId = '90d92c65-e35b-4203-8f0b-a75fd3664a71';
var api = claraplayer('player');
var panelControl = document.getElementById('panelControl');
var customDiv = document.getElementById('panel-embed');

api.sceneIO.fetchAndUse(sceneId, null, { waitForPublish: true });
api.on('loaded', function () {
  panelControl.onchange = changeHandler;

  // el specific the div the configurator control panel will initialize to
  // If missing, the panel will initialize inside player window
  api.configuration.initConfigurator({ form: 'Form1', el: panelControl.value === 'Inside Player' ? undefined : customDiv});
  document.getElementById('baseScene').setAttribute('href', 'https://clara.io/view/' + sceneId);
});

function changeHandler(ev) {
  var isInsidePlayer = ev.target.value === 'Inside Player';
  api.configuration.initConfigurator({ form: 'Form1', el: isInsidePlayer ? undefined : customDiv});
  customDiv.style.display = isInsidePlayer ? 'none' : 'block';
}