Skip to content
Fitle

Widget

Our widget consists of graphical element, a size recommendation button, that is displayed on your product page. This element enables the recommendation process to be triggered, and displays the final size recommendation when the process is completed.

How does it work

The technology behind the widget is based on HTML custom elements, a web standard that allows to create custom HTML tags and their behavior, with the help of JavaScript. The custom element, when loaded, fetches the necessary data from our servers, and it displays the size recommendation button. In parallel, it prepared a hidden iframe with the recommendation modal. This modal will be display when the button is clicked.

How to set it up

Setting up the widget requires to modify your product page. First, you need to add the script that makes the custom element available. Then, you need to place the custom element where you want the size recommendation button to appear.

Add the script

Add the following script into your product page template (Product Detail Page aka PDP):

<script type="module" src="https://recommender.fitle.com/sr.js"></script>

This script defines the custom element fitle-size-recommender, so that the browser knows what to do when it encouters this element within the page.

Place the custom element

Position the custom element where you want the size recommendation button to appear.

<!-- ... your code before the custom element -->
<fitle-size-recommender
  clientId="<client_id>"
  productId="TSHIRT5678"
  availableSizes="S,M,L,XL"
  productImageUrl="https://example.com/images/tshirt.jpg"
  language="us"
>
</fitle-size-recommender>
<!-- ... your code after the custom element -->

The custom element has several attributes. Some of them are mandatory, others not. A dedicated reference section explains all available attributes and their usage.

Conclusion

Now that the custom element is placed, it is important and mandatory to set up the events; otherwise, no data will be displayed on your Fitle dashboard. To do this, please complete the next step.

Platform Guides

Reference