plongee

Advanced For Website
Integration Guide

How to: Customized integration

How to: Customized Virtual Try-On Advanced For Website integration

(ex FitMix)

With this type of integration, you can choose how you want your Advanced for Website to be displayed by styling the html element yourself.

This type of integration is used in Sample 2.

 

1. Add an html element

Add a div in your html.

This div will contain the Advanced for Website. 

The id is important and will be used in the createWidget function below (you can use your own name, but the same name must be used in the createWidget function)

 

<!-- HTML CONTENT -->
 
<div id="my-fitmix-container"></div>

 

 

2. Set html element size (style css)

A size must be set in your css files for Advanced for Website to work correctly.

It can be set to either a fixed or a dynamic size:

/* CSS CONTENT */
 
/* Fixed size */
#my-fitmix-container {
    width : 660px; /* Change to desired width*/
    height : 560px; /* Change to desired height */
}
 
/* OR dynamic size (will adapt to the parent div) */
#my-fitmix-container {
    width : 100%;
    height : 100%;
}

 

 

3. Get Advanced for Website and add widget 

Now that you have:

 - added a container for your Advanced for Website

 - set its size

We can create the Advanced for Website instance.

 

The following code must be added in the HTML (in head)

<!-- HTML CONTENT -->
 
 
<!-- load FitMix script, must be done only once in HEAD  -->
<script src="//static.fittingbox.com/api/v1/fitmix.js" type="text/javascript"></script>
 
 
<!-- load FitMix instance when window is ready -->
<script type="text/javascript">
 
    window.onload = function() {
         
        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() {
                // fitmixInstance is ready
                console.log('fitmixInstance creation complete.');
                 
                // Set the current frame
                // This is a demo glassesId and must be updated to your own glassesId value
                // This function can be called again to change the frame
                fitmixInstance.setFrame('1703-433490'); // for glassesId values, see Requirements > glassesId
            }
        );
    }
</script>

 

 

4. Your Advanced for Website is now ready

Now that the container was added, the size set and the script loaded, you should see a working Advanced for Website created in the div you have added.

You can now link your glasses “try-on” button to a setFrame('glassesId') to change the glasses.

 

Basic on page integration example (intermediate) : https://codepen.io/Fittingbox/pen/cb94d662f163a987cccf6bd5791673aa

 

Advanced integration (advanced) : https://codepen.io/Fittingbox/pen/92c07d9762fd814c6c170903b5f51d71

LET'S TALK

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

CONTACT US