All there is to know to be ready to integrate the solution
API Key
Advanced For Website API requires a unique apiKey.
If we did not provide you with your apiKey, please contact our customer support:
In the meantime, you can test our API with this demo apiKey and the following demo frames:
-
Demo apiKey: "TBVAcXitApiZPVH791yxdHbAc8AKzBwtCnjtv6Xn"
-
Demo frames:
-
"8053672909258"
-
"0888392486523"
-
"8056597233958"
-
Frame identifier
A frame is identified with a unique identifier.
This can be a generic unique identifier (e.g. EAN, UPC, GTIN) or your own unique SKU identifier.
Two variations of the same glasses model (different colors, materials or size) must have two distinct identifiers.
HTTPS protocol required
The website must be HTTPS to be able to use the Live mode.
HTTPS protocol is required by some browsers (in particular Google Chrome and Opera) to allow access to the user's camera and other features.
If your website does not provide HTTPS support, the live mode technology won't be available to all your visitors.
See https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https
Never use server cache for Fittingbox Virtual Try-On Advanced
Fittingbox Virtual Try-On Advanced files (fitmix.js and fitmix.bundle.js) must not be cached on your server in order to work properly.
Integration in an external iframe
It's not a common scenario to have Fittingbox Virtual Try-On Advanced inside another iframe.
If the Virtual Try-On Advanced is used inside an <iframe> element, all the parent iframe must use the following attribute: allow="camera"
<iframe allow="camera" ></iframe>
This will grant access to the camera for the live mode.
Minimal container size
Fittingbox Virtual Try-On Advanced widgets automatically adapt their sizes to fit the HTML element container dimensions.
This allows to support responsive layouts for different screens or devices.
In order for the solution to work properly, it is recommended to use a container with a minimal size of 300px width and 300px height.