The FitAp widget is a tool used by your shop customers to easily find their best fitting size for your shop’s products, by clicking the widget button that will render in the page automatically, if you insert the required HTML elements described in this documentation on the product’s page.

Using the widget the customers provide their data (like name, weight, height and age) and take two pictures using a tablet or a mobile phone (one from the front and one from the side), or fill a short survey, as instructed in the widget’s on-screen tutorial. With this information the size recommendation system (SizeRec) will generate their size that best fit them, using the grading tables defined for your shop’s products inside this Configuration Panel.

The customer’s information is saved, and the next time they visit the shop's site they already have the size pre-selected. If they wish to update their size (due to changes in their measurements) they can launch the process of finding their recommended size again, by clicking the FitAp widget button.

NOTE:The widget button will display on your site's page if you have at least one subscription active, and there are measurements available for that subscription. Also, the FitAp system must find a valid configuration for determining the product's type and fit, for the button to be displayed. If you use the data-shop-product-link or the data-shop-product-id make sure to have the product links correctly configured in the FitAp Admin Panel. See the examples on this page for valid configurations for the widget button.

In order to use the FitAp widget, you must follow these steps.

Step 1:

Include in your product’s shop page the script , which at the moment can be found at the address . We recommend to add this script in the head section of the product's page. 

<script type="text/javascript" 
    src="https://ait-mtm-testbed.s3.eu-central-1.amazonaws.com/widgetdev.min.js">
</script>

Step 2:

Create a DOM element with the following id ait-mtm-widget-container wherever you want the widget button to render.

Step 3:

Add data attributes in order to configure the widget. See an example on the right.

- data-btn-class field is a class name that contains your CSS rules, in order to customize the look and feel of the button on your product’s page (see the example in Step 4).
- data-shop-id field is generated when creating a new shop in our database using the New Shop button in the FitAp Admin Panel. You can find the shop id in the header of the shop details page.
- data-shop-user-id represents the id used internally by your shop’s site to uniquely identify the user.
- data-fit-id field represents the sub-category of your base product (examples: RC01-M, summer, autumn). The fits used by your shop can be defined in the Product types / Fits tab of the shop’s details page in the FitAp Admin Panel.
- data-language field sets the widget’s language. By default we have English (en), French (fr) and Romanian (ro) implemented. Other languages are provided on demand.
- data-shop-product-link field tells the widget to get the product type and the fit from the association defined in the database for the product's page address (the data-fit-id is no longer needed if you use this field). To use this feature, set the field’s value to true. You can complete your shop’s product links using the Product links tab of the shop’s detail page, in the FitAp Admin Panel, or you can ask our server to scrape your shop’s site for the links. Only part of the link can be provided (for example: products/costumes/summer), and the widget will try to best match the page’s link with the defined links.
- data-shop-product-id field tells the widget to get the product type and the fit from the association defined in the database for the product's id (the data-fit-id is no longer needed if you use this field). To use this feature, set the field’s value to your product id. You can complete your shop’s product links using the Product links tab of the shop’s detail page. Only part of the product id can be provided (for example: JKT-), and the widget will try to best match the product id with the defined links. 

<!-- specifying 'fit-id' data field -->
<div id="ait-mtm-widget-container"
    data-btn-class="widget-button"
    data-shop-id="SO123"
    data-shop-user-id="logat10091"
    data-fit-id="jacket"
    data-language="en">
</div>

<!-- specifying the 'shop-product-link' data field set to "true" -->
<div id="ait-mtm-widget-container"
    data-btn-class="widget-button"
    data-shop-id="SO123"
    data-shop-user-id="logat10091"
    data-shop-product-link="true"
    data-language="fr">
</div>

<!-- specifying the 'shop-product-id' data field -->
<div id="ait-mtm-widget-container"
    data-btn-class="widget-button"
    data-shop-id="SO123"
    data-shop-user-id="logat10091"
    data-shop-product-id="JKT-3"
    data-language="fr">
</div>

Step 4:

To customize the look and feel of the widget button set the data-btn-class to a class name that contains your CSS rules. 

.widget-button {
    border: none;
    color: #ffffff;
    background-color: #ff8800;
    padding: 12px 24px;
    border-radius: 4px;
    margin-left: 20px;
    cursor: pointer;
}
.widget-button:focus {
    outline: none;
}

Example:

You can use the example on the right as a guide. 

<!-- use the following as a starting point -->
<head>
    ...
    <style>
        ...     
        .widget-button {
            border: none;
            color: #ffffff;
            background-color: #ff8800;
            padding: 12px 24px;
            border-radius: 4px;
            margin-left: 20px;
            cursor: pointer;
        }
        .widget-button:focus {
            outline: none;
        }
    </style>
    ...
    <script type="text/javascript"
        src="https://ait-mtm-testbed.s3.eu-central-1.amazonaws.com/widgetdev.min.js">
    </script>
</head>
<body>
    ...
    <div>
        <img src = "./productDetails.png" class="productDetails" />
        <div id = "ait-mtm-widget-container"
                data-shop-id="SO01"
                data-fit-id="jacket" 
                data-language="en">
        </div>
    </div>
    ...
</body>