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
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:
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