plongee

Advanced For Website
Integration Guide

Functions & Initialization

CreateWidget: Fittingbox Virtual Try-On Advanced For Website

(ex FitMix)

 

FitMix.createWidget (params, containerId, callback) 

Fittingbox Virtual Try-On Advanced For Website is the library itself. It can be called to create a new instance of Fittingbox Virtual Try-On Advanced For Website with the createWidget function.

This method allows you to add an Advanced For Website widget in the specified html element.

This function returns the instance of the created Advanced For Website. The instance will be used to call functions.

 

/* Javascript content */
 
 
var params = {
    apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn', // This is a demo apiKey and must be updated to your own apiKey (see Requirements > API Key)
};
         
fitmixInstance = FitMix.createWidget(
    'my-fitmix-container',
    params,
    function() {
        console.log('fitmixInstance creation complete.');
 
  fitmixInstance.setFrame('1703-433490'); // This is a demo glassesId and must be updated to your own glassesId value (see Requirements > Frame glassesId)
}
);
 

Details:

createWidget(containerId, params, callback)

The containerId is the id of the HTML element that will embed the Advanced For Website.

The id must be used only once per page.

If there are multiple identical id in the page, Advanced For Website will be embedded in the first element in the DOM.

This parameter is mandatory.

 

createWidget(containerId, params, callback)

params is an object (key/value).

Here is the list of possible options:

 
 

key

value

description

Example

apiKey (required)

string

language js
theme Eclipse
'myFittingboxApiKey'

 

 

Your apiKey value provided by Fittingbox

See Requirements > API Key

 

language js
var params = {
apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
};


fitmixInstance = FitMix.createWidget('my-fitmix-container', params);

 

lang (optional)

string

language js
theme Eclipse
'en'

 

 

 

Language code value.

If no value is provided, lang of the user's browser will be used

See Fittingbox Virtual Try-On Advanced For Website functions > setLang

 

language js
var params = {
apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
lang: 'es',
};
fitmixInstance = FitMix.createWidget('my-fitmix-container', params);

 

css (optional)

string

language js
theme Eclipse
'//www.mydomain.com/fitmix-custom.css'

 

language js
theme Eclipse
'.buttonAction  { color: red !important; }', // inline css

 

 
Stylesheet to load and apply for customization
 
It can also be used with inline css

 

language js
var params = {
apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
css: 'https://www.mydomain.com/fitmix-custom.css',
};
fitmixInstance = FitMix.createWidget('my-fitmix-container', params);

 

onSnapshot (optional)

callback function

 

Callback of function getSnapshot

See Advanced For Website instance methods > fitmixInstance.getSnapshot()

popupIntegrationboolean or objectActivate simplified integration in popupSee Simplified integration 1

 

createWidget(containerId params, callback)

callback is a function.

The function is called when widget creation is complete.

Function on fitmixInstance must be called only after this has been called. 

 

language js
var params = {
apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn'
};

fitmixInstance = FitMix.createWidget('my-fitmix-container', params, onFitMixReady);

function onFitMixReady(liveCompatible, advanced) {
if(liveCompatible) {
console.log('fitmixInstance is now ready, live compatible');
} else {
console.log('fitmixInstance is now ready, live not compatible:', advanced.liveCompatibilityDetails);

if(advanced.retrictedBrowser) {
console.log('Current browser blocks webcam usage');
}
}
}

 

Example: https://codepen.io/Fittingbox/pen/df7ade93b285d39551dd4dee90a467b0

LET'S TALK

Request a free demo, a free quote or set up an appointment with one of our sales representatives.

CONTACT US