<!-- define a div element that will hold the 360 HD Viewer -->
<div id="put-viewer-here"></div>
#put-viewer-here {
  height:512px;
  margin-left:auto;
  margin-right:auto;
}
// declare the variable that will hold the 360 HD Viewer instance
var viewerInstance = null;
// the opts object should hold the start properties of the 360 HD Viewer
var opts = {
              'SKU': 'ARMCHAIR',
            'accountID': 4404,
            'features': ["Fabric_Material", "Cow Hide Black/White", "Wood_Material", "Beechwood 2"],
  'country': 'us',   
  'containerID': 'put-viewer-here',
    'thumbLocation': 'left',
}

// make sure the cylindo framework has been "installed"
if (cylindo) {
  // do not instantiate the viewer until the framework reports ready.
  cylindo.on('ready', function () {
    // create the instance
    viewerInstance = cylindo.viewer.create(opts);
  });
}

External CSS

  1. https://viewer.cylindo.com/3.x/v3.3.1/viewer.css

External JavaScript

  1. https://viewer.cylindo.com/3.x/v3.3.1/viewer.js