To control the state of the configurator, either use the configurator UI or the configuration API. This demo shows how to control the configurator state with configuration API.

var sceneId = '90d92c65-e35b-4203-8f0b-a75fd3664a71';
var api = claraplayer('player');
var option = document.getElementById('options')
option.onchange = changeHandler;

api.sceneIO.fetchAndUse(sceneId);
api.on('loaded', function() {

  // Form1 is the name of the form used to initialise the configurator in this demo
  // check https://clara.io/docs/tutorial-3_Configurators.html for more information about from
  api.configuration.initConfigurator({ form: 'Form1' });
  ['Gray', 'Black', 'Red', 'Blue', 'Green'].forEach( function(color, i){
    option.options[i] = new Option(color, color);
  });
  document.getElementById('baseScene').setAttribute('href', 'https://clara.io/view/' + sceneId);
});

function changeHandler(ev) {
  api.configuration.executeAttribute('Color',ev.target.value);
};

api.on('configurationChange', function(){
  var config = api.configuration.getConfiguration();
  document.getElementById('state').innerHTML = JSON.stringify(config);
});