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
|
|
|
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
|
|
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
|
|
var params = {
apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
css: 'https://www.mydomain.com/fitmix-custom.css',
};
fitmixInstance = FitMix.createWidget('my-fitmix-container', params);
|
onSnapshot (optional)
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.
|
|
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
