Skip to main content

SizeEngine SDK Sandbox

One of the options to implement EyeFitU SizeEngine is through the SDK.

JavaScript SDK renders What is my size prompt at product details page and provides UI for giving size recommendation.

Three things should be on a page in order to use the SDK:

  1. script tag which includes SDK into a page.
  2. article tag to set the injection point and provide a product metadata.
  3. Call to init to initialize the widget.

Below you could see interactive widget and code which should be on a page to implement it.

Consecutive sections explain options and allows to interactively see how they affect the widget.

Widget​

<script async src="https://web-sdk.eyefitu.com/v1/sdk/init.js"></script>
<article
  style="height: 44px"
  data-eyefitu-sizing-widget="true"
  data-language="en"
  data-brand="Calvin Klein"
  data-product="Tops"
  data-image="https://eyefituclientfiles.blob.core.windows.net/sandbox/jacket-g18bf9de78_640.png"
  data-gender="female"
  data-sizes="[&quot;XS&quot;,&quot;S&quot;,&quot;M&quot;,&quot;L&quot;,&quot;XL&quot;]"
></article>
<script>
  if (!window.eyefitu) {
    window.eyefituCalls = [];
    window.eyefitu = function(){window.eyefituCalls.push(arguments)};
  }
  
  eyefitu('store', 'sandbox.eyefitu.com');
  eyefitu('init');
</script>

data-gender​

data-gender should be set from product metadata to either female, male or unisex. This attribute has affect on multiple sides of size recommendation.

data-gender value is used to select body reference model to be used for detailed measurements prediction. It also affects the body silhouette on which size recommendation is explained.

When set to unisex, user would be asked to select gender on basic measurements screen.

data-brand​

data-brand together with data-gender and data-product are used to select the right size chart to be used for recommendation.

For multi-brand store just use the constant value.

data-product​

Value of data-product identifies one of size charts defined by brand. This value is a free-form ID which should be assigned based on structure of size charts.

data-sizes​

data-sizes should be set to a set of available sizes. Use JSON array serialization to encode the set, i.e. use JSON.stringify(["32", "34"]) in JavaScript.

This would be used to select a size chart and labels for the recommendation.

data-image​

Should be set to an absolute URL of a product image. The image is used inside the modal dialog to remind the user of context.

data-language​

User interface language is set on widget initialization and is not changeable by user from the widget.

Instead of guessing which language your users speak, we allow the store to set the widget language. Usually stores select language based on users profile or store language.

Default is English. It would be used when data-language is set to unsupported language code.

data-default-units​

On the other hand, users are provided a switch to select units of measure of convenience. While we accept size charts both in inches and centimeters, users are free to switch between units and see convenient measurements.

Based on anticipated customer profile, store could set a default to be imperial or metric. Customer would be able to change it right on the first widget screen.

data-ga-gender-dimension-index​

EyeFitU SDK could set custom dimension to be used for segmenting Google Analytics reports based on EyeFitU usage. After creating the custom dimension in Google Analytics, set it's index to data-ga-gender-dimension-index attribute.

This attribute is optional.

Last updated on