plongee

Advanced For Website
Integration Guide

Instance Methods

Fittingbox Virtual Try-On Advanced For Website - Instance Method

(ex FitMix)

 

setFrame('sku_number')

 
This method allows Fittingbox Virtual Try-On Advanced for Website to load frames:
 

arguments
sample value
description
Example
glassesId (required)

string

'glassesId'

Frame's unique client reference

See Requirements > glassesId

This example load a frame when fitmix is ready but setFrame can be called anytime after fitmix is ready

var params = {
    apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn'
};
 
fitmixInstance = FitMix.createWidget('my-fitmix-container', params, onFitMixReady);
 
function onFitMixReady() {
  fitmixInstance.setFrame('1703-433490');
}
 
Example with a basic HTML button
 
<!-- HTML Content -->
 
<!--  Let's assume we have created a fitmixInstance (with the FitMix.createWidget function documented above)-->
 
<!-- This button will load the frame with the id 1703-433490-->
<button onclick="fitmixInstance.setFrame('1703-433490')">Load frame 1703-433490</button>
 
 

setLang('en')

 
This method allows the widget language to change dynamically.
Reminder: Default language is the browser’s language.
 

arguments
sample value
description
Example
lang (required)

String

'fr'

language code: Name in English/Name in French

'bg' - Bulgarian / Bulgare 
'cs' - Czech / Tchèque
'de' - German / Allemand 
'da' - Danish / Danois
'ee' - Ewe / Ewé 
'en' - English / Anglais 
'es' - Spanish / Espagnol 
'fi' - Finnish / Finnois 
'fr' - French / Français 
'el' - Greek / Grec
'hr' - Croatian / Croate
'hu' - Hungarian / Hongrois
'it' - Italian / Italien
'ja' - Japanese / Japonais
'ko' - Korean / Coréen
'nl' - Dutch / Néerlandais 
'no' - Norwegian / Norvégien 
'pl' - Polish / Polonais 
'pt' - Portuguese / Portugais
'ro' - Romanian / Roumain 
'ru' - Russian / Russe 
'se' - Swedish / Suédois
'sk' - Slovak / Slovaque
'sl' - Slovenian / Slovène 
'zh' - Chinese (simplified) / Chinois (simplifié)
'zh-CN' - Chinese (simplified) / Chinois (simplifié)
'zh-HK' - Hong Kong (traditional chinese) / Hong-Kongais (traditionnel)
'zh-TW' - Taiwanese (traditional chinese) / Taiwanais (traditionnel)
'uk' - Ukrainian / Ukrainien

This example loads a frame when fitmix is ready

setFrame can be called anytime as long as fitmixInstance is ready

var params = {
    apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn'
};
 
fitmixInstance = FitMix.createWidget('my-fitmix-container', params, onFitMixReady);
 
function onFitMixReady() {
  fitmixInstance.setLang('de');
}
 
 

remove(onFitmixRemoved)

 
Removes the widget from the parent html element

arguments
sample value
description
Example
callback (required)

function callback

function () {
    console.log("fitmixInstance removed");
}

callback function called after the disposal of the fitmix widget

you can safely remove the widget parent html element from the html page in this callback code

 

This function may be used when you want to remove the fitmixInstance from the page

This example loads a frame when fitmix is ready but setFrame can be called any time after fitmix is ready

var params = {
    apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn'
};
 
fitmixInstance = FitMix.createWidget('my-fitmix-container', params);
 
 
 
// call this function when you want to destroy the FitMix instance
function removeFromPage() {
    // remove the FitMix from the page after its creation
    fitmixInstance.remove(function() {
        // called when fitmixInstance is removed successfully
    });
}
 
 

getSnapshot()

 
The Getsnapshot feature allows you to retrieve a picture taken with the selected frames tried onin order to create your personal experience (social media or email sharing, wishlist selection etc.).
The source can be an uploaded photo or a live webcam.
The base 64 image is returned in the onSnapshot function given in the parameters of the createWidget function.
The getSnapshot function callback will be called when the try-on is valid (with glasses).
 
var params = {
    apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
    onSnapshot: onSnapshot,
};
 
fitmixInstance = FitMix.createWidget('my-fitmix-container', params, function() {
  fitmixInstance.setFrame('1703-433490');
});
 
 
function onSnapshot(dataB64) {
    var img = document.getElementById("my-snapshot");
    img.src = data.dataURL;
}
 
 
function getSnapshot() {
   fitmixInstance.getSnapshot();
}
 
 
getSnapshot + automatic download of image: https://codepen.io/Fittingbox/pen/a49d6a9c1cce73a895ee9e779678feca
 

setTryonPicture()

 
This method takes a picture in parameters (base 64 or URL of an image) and use it as a try-on model.
 
var params = {
    apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn'
};
 
fitmixInstance = FitMix.createWidget('my-fitmix-container', params, function() {
  fitmixInstance.setFrame('1703-433490');
});
 
function setTryonPicture(data) {
   fitmixInstance.setTryonPicture(data);
}
 
Warning: CORS must be enabled on the https server serving the photo
 

pauseStream() resumeStream()

 
This method allows pausing the access to the camera and resuming it when needed.
The function can be useful when hiding the FitMix window or popup. It’s actually used in the Popup integration example.
When called while in photo mode, the function won’t have any effect.
 
 
var params = {
    apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
};
 
fitmixInstance = FitMix.createWidget('my-fitmix-container', params, function() {
  fitmixInstance.setFrame('1703-433490');
});
 
 
var hide = function() {
  document.getElementById('my-fitmix-container').style.display = 'none'; // hide fitmix container
  fitmixInstance.pauseStream(); // stop camera, stop detection and tracking
};
 
var show = function() {
  document.getElementById('my-fitmix-container').style.display = 'block'; // show fitmix container
  fitmixInstance.resumeStream(); // get the camera stream back
};

setLensesAntireflection(true)

 
This method enable the anti reflective filter for lenses.
The parameter can be true or false. 
true → antireflection coating
false → no antireflection coating
 
var params = {
    apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
};
 
fitmixInstance = FitMix.createWidget('my-fitmix-container', params, function() {
   fitmixInstance.setFrame('1703-433490');
   fitmixInstance.setLensesAntireflection(true);
})
 
 
 

Size Guarantee

It is possible to guarantee the size of a frame tried-on by a user, by entering their pupillary distance or their gender.
Through this feature, Fittingbox Virtual Try-On can render a frame with guaranteed realistic size and fit.

 


setPupillaryDistance
 

The default pupillary distance is set to 63 mm.
For the most accurate virtual try-on, it is possible to offer a user the possibility of entering their precise pupillary distance by setting in Fittingbox Virtual Try-On the following parameter:


fitmixInstance.setPupillaryDistance(59); // pupillary distance in millimeters})
 

 


setUserInfo
 

If the user does not know their pupillary distance, it is possible to guarantee a more accurate virtual try-on than the standard by using statistical data based on the gender of the user.
You can set the possibility for the user to enter their gender by setting in Fittingbox Virtual Try-On the following parameter:


fitmixInstance.setUserInfo({gender: 'f'}); // female user
//fitmixInstance.setUserInfo({gender: 'm'}); // male user
 
 

LET'S TALK

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

CONTACT US