Instantiate and manage the VTO module

How to integrate the VTO module to instantiate it and manage the VTO experience

Import the VTO library

Load the script in your webpage:

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

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

Add an HTML container

The VTO module 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 VTO module instantiation method.

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

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

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

Instantiate the VTO module

The instantiation of the VTO 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: '...',
};
         
fitmixInstance = FitMix.createWidget('my-fitmix-container',
  params,
  function() {
    // The module is now ready to be used to propose a VTO experience
    console.log('VTO module is ready.');
  }
);

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

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

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

See the article on Best practices.

Manage the VTO experience

Once the VTO module is initialized, control the VTO 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 a VTO experience.

function onCTAButtonClick() {
  // Manage the visibility of the `div` container to display the VTO module
  fitmix.style.display = 'block';
  // Start the VTO experience
  fitmixInstance.startVto('live')
}

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.

Refer to the `onStopVto` callback to hide the VTO module. It is necessary to wait for the callback to be triggered in order to hide the module as hiding it too soon may prevent the camera handle from being correctly released.

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

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

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