How to: Simplified Fittingbox Virtual Try-On Advanced For Website integration (ex FitMix)
For minimal development, this integration is recommended.
This integration can be used on any type of page (catalog, product ...).
The Advanced for Website will be called only when setFrame function is called.
This integration is used in the Sample 1.
What will be done here:
-
add script in the HTML to download the Advanced for Website library.
-
initialize Advanced for Websitewith its apiKey and the popupIntegration option.
-
add the setFrame function trigger on a button
HTML content : add the script + plug the button to the setFrame function
|
<script src="//static.fittingbox.com/api/v1/fitmix.js"type="text/javascript"></script>
<!-- Example of button that will select a frame, and show FitMix -->
<button onclick="fitmixInstance.setFrame('484736')">Frame 1</button>
|
Javascript content : initialize Advanced for Website
|
var params = {
apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
popupIntegration: true
};
fitmixInstance = FitMix.createWidget('my-fitmix-container', params);
|
Expected behaviour:
After employing the popupIntegration, Advanced for Website will be ready to use.
When calling setFrame for the first time, Advanced for Website will be initialized and virtual try-on will be activated.
The user will be able to use the Close button on the popup, which hides it and stops the webcam stream. There is currently a known bug that may cause the camera stream on some browsers not to be released when the popup is closed.
When calling setFrame again, the popup will be displayed and the stream resumed, with minimal waiting time between the 2 try-ons. It is also possible to click on another setFrame without closing the popup.
The position and size of the popup are customizable through the parameter popupIntegration shown above:
|
// popup will pop on the top left corner
var params = {
apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
popupIntegration: {
vertical: 'top',
horizontal: 'left',
}
}
// popup will pop on the center of the screen
var params = {
apiKey: 'TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn',
popupIntegration: {
centeredHorizontal: true,
centeredVertical: true,
width: '700px',
height: '600px',
}
}
|
Responsiveness:
If the size of the screen is smaller than the requested width / height, the popup will be displayed fullscreen with the close button centred on top;
The popupIntegration is fully compatible with mobile integration.
popupIntegration example (beginner) : https://codepen.io/Fittingbox/pen/fe3ff45aa228cbe7fc4b4ec04acb6a23
