<!-- define a div element that will hold the 360 HD Viewer -->
<div id="put-viewer-here"></div>
#put-viewer-here {
  height:512px;
}

/*Override style for the viewer tooltip text */
.cylindo-drag-tooltip,.cylindo-zoom-drag-tooltip{
  color:#B2A2D3 !important;
}
// 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',
  'frames': [1, 5, 10, 15, 20],
  'presentation': 'stacked'
}

// 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