Integrate the 3D Viewer

How to integrate the 3D Viewer in your webpages

Import the JS library

Load the script in your webpage:

<script src="//vto-advanced-integration-api.fittingbox.com/index.js" type="text/javascript"></script>

The script must be imported only once and synchronously (no `defer` or `async` loading).

Add an HTML container

The module is provided via an iframe which will be embedded in an HTML `div`.

You set and configure the `div` in your webpage, and pass it as a parameter (using its `id`) in the module instantiation method.

<div id="my-container"></div>

This `div` must have a size set for the module to work properly.
The size can be set either in a fixed or dynamic manner.

/* Fixed size */
#my-container {
    width : 660px; /* Change to desired width*/
    height : 560px; /* Change to desired height */
}
/* OR dynamic size (will adapt to the parent div) */
#my-container {
    width : 100%;
    height : 100%;
}

Instantiate the module

The instantiation of the module is done with the `FitMix.createWidget()` method.

The method takes the `id` of the `div` in which to embed the module, a structure to pass on initialization parameters and a callback triggered when the module is properly initialized.

var params = {
  apiKey: '...',
};
         
myViewerModule = FitMix.createWidget('my-container',
  params,
  function() {
    // The module is now ready to be used
    console.log('Module is ready.');
  }
);

Initialization parameters need to contain the `apiKey` (the license info).

You can also provide the `frame` parameter, if you already know which pair of glasses you want to show first to the end-user (e.g. in a PDP).

Refer to the API Reference for the list of initialization parameters.

Important: We recommend to instantiate the module as soon as possible in the webpage lifecycle in order to do the needed pre-processings in the background.

Additionally, the module should be instantiated only once in a scope and the same instance should be used for several consecutive experiences.

See the article on Best practices.

Manage the module

Once the module is initialized, control the experience with the `startVto` and `stopVto` methods.

It is mandatory to wait for the initialisation callback to be triggered before calling methods on the instance.

Call the `startVto` method when the user clicks on a CTA button on your website to actually start an experience:

function onCTAButtonClick() {
  // Manage the visibility of the `div` container to display the VTO module
  my-container.style.display = 'block';
  // Start the experience
  myViewerModule.startVto('viewer')
}

The integration is responsible for managing the visibility of the HTML element, in order to display the parent element when the `startVto` is called and hide it when the VTO module is stopped.

Conversely, call the `stopVto` method when requested.

Listen to the `onStopVto` callback to hide the module:

var params = {
  apiKey: '...',
  // Use the callback to hide the module when it is properly stopped
  onStopVto: hideModule,
};

function onCloseAction() {
  // Stop the experience
  myViewerModule.stopVto()
}

function hideModule() {
  // Manage the visibility of the `div` container to hide the VTO module
  my-container.style.display = 'none';
}

And more

Choose your default point of view

By default, the module displays the frames from a "quarter" view.

However, you can adapt it to your preference and start from a "front" view (see the setViewerDefaultPosition method in the 3D Viewer API Reference).

Example