Integrate Size Adviser

You only need to insert the following simple code to start displaying Size Adviser on your product page template:

1. A simple ‘div’ container
2. A script in your footer to call our API

Let Usizy do the rest!

1. Container variables #

To display Size Adviser, you only need to insert a line of code with a ‘div’ container and two mandatory variables: “class” with value ‘usizy-external’ and “data-product” to indicate which product the user is visiting, and should receive a size recommendation. Find out more about essential variables.

Optionally, you can tweak the Size Adviser behaviour. For example, to display Size Adviser in a specific language or with a specific size system according to your user needs. Check out our additional variables.

<!-- Container with variables in your product pages template -->
<!-- Add this code in the 'body' container of your page code -->

<div class="usizy-external"
data-unique-product-id="product_identifier_sent_in_feed" <!-- e.g. 522445 -->
data-layout="layout_option" <!-- e.g. link -->
data-width="width" <!-- e.g. 100% -->
data-language="language" <!-- e.g. en -->
data-sizesystem="size_system" <!-- e.g. UK -->
data-price-vat="price_including_taxes" <!-- e.g. 67 -->
data-price-no-vat="price_excluding_taxes" <!-- e.g. 60 -->
data-guidelink="your_size_guide_url"  <!-- e.g. https://myecomerce/size-chart.jpg -->
></div>

2. Size Adviser JavaScript #

Now, you only need to include the following JavaScript in the footer of your template to call Usizy and enable Size Adviser on your product pages:

<!-- Code for call to Usizy API -->
<!-- Add this code in the 'footer' container of your page code -->

 <script src="https://static.usizy.es/js/platform.min.js"></script>

Script manual launch #

If you need to activate Size Adviser manually instead of during the initial page load, please refer to the Script manual launch article.

A complete example #

You can check our complete example with all variables and the location in the template of your website.