Skip to main content

Quick start with the EyeFitU SizeEngine SDK

EyeFitU SizeEngine could be implemented using extensions and apps available on major eCommerce platforms. For platforms requiring custom integration, we provide EyeFitU SizingEngine SDK allowing an easy integration of the widget into product pages.

EyeFitU SizingEngine SDK implementation is done in three steps:

  1. Add the SDK script into the store.
  2. Define the place where the widget should be shown on a product page.
  3. Initialize the widget.

Add the SDK script

First, you need to add EyeFitU SizeEngine SDK to your page by placing following scripts into your HTML.

Copy and paste this code as the first item into the <head> of every webpage you want to have size recommendation.

<!-- EyeFitU Sizing Widget -->
<script
async
src="https://web-sdk.eyefitu.com/[store-id]/sdk/init.js"></script>
<script>
if (!window.eyefitu) {
window.eyefituCalls = [];
window.eyefitu = function(){window.eyefituCalls.push(arguments)};
}
eyefitu('store', '[store-domain]');
</script>

NOTE. Please note that the SDK script is unique for each store: [store-id] is assigned by EyeFitU, [store-domain] is a host name used by store, e.g. shop.example.com.

Below is an example HTML showing place where SDK script should be placed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shop in your size</title>
<link href="/favicon.ico" rel="shortcut icon">
<link href="/styles.css" rel="stylesheet">
<!-- EyeFitU Sizing Widget -->
<script
async
src="https://web-sdk.eyefitu.com/master/sdk/init.js"></script>
<script>
window.eyefituCalls = window.eyefituCalls || [];
function eyefitu(){eyefituCalls.push(arguments);}
eyefitu('store', 'shop.example.com');
</script>
<script src="/your-javascript.js"></script>
</head>
<body>
<img src="/product-image.png" alt="T-Shirt Dress">
<button>
Buy now
</button>
</body>
</html>

Define the place for the widget

Second, you need to put the widget element itself into the page.

The widget is a simple HTML element with a few required data attributes:

<article data-eyefitu-sizing-widget></article>

It supports the following attributes:

AttributeRequiredDescription
data-eyefitu-sizing-widgetyes

Identifies the element as the widget.

If the value is "small", then the widget is rendered in a minimalistic variant (use it to show size recommendations on a list of products).

To render the full version of the widget, you can define the attribute without specifying the value.

data-brandyesName of the product brand, used to lookup relevant size charts.
data-productyesName of the product category / garment type, used to lookup size chart.
data-genderyes

The gender this product is sold for, used for body modeling.

Should be either "female" or "male".

data-imageyesURL to a product image to be shown inside a widget dialog.
data-sizesyesList of size labels in which the product is sold. Should be defined as a JSON array.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- see example from previous section -->
</head>
<body>
<img src="/product-image.png" alt="T-Shirt Dress">
<article data-eyefitu-sizing-widget
data-brand="Your Brand Name"
data-product="Dresses"
data-image="https://example.com/product-image.png"
data-gender="female"
data-sizes='["XS", "S", "M", "L", "XL"]'>
</article>
<button>
Buy now
</button>
</body>
</html>

Please note that unlike other attributes, the value of data-sizes is wrapped into single quotes. That is because double quotes are used in JSON to denote strings (the list of sizes is supposed to be in JSON format).

Initialize the widget

So far we're one small step away from the finish line. To make things work, we need to call init method from EyeFitU SizeEngine SDK.

eyefitu('init');

The exact moment when to call init method depends on the front-end framework used. Below is a plain JavaScript and React examples. Please reach us for advice with other frameworks.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- see example from previous sections -->
</head>
<body>
<img src="/product-image.png" alt="T-Shirt Dress">
<article data-eyefitu-sizing-widget
data-brand="Your Brand Name"
data-product="Dresses"
data-image="https://example.com/product-image.png"
data-gender="female"
data-sizes='["XS", "S", "M", "L", "XL"]'>
</article>
<button>
Buy now
</button>
<script>
eyefitu('init');
</script>
</body>
</html>
class ProductView extends React.Component {

componentDidMount() {
eyefitu('init', this.sizingWidgetEl);
}

render() {
const {
brandName,
imageUrl,
productType,
productGender,
availableSizes,
} = this.props;

return (
<div className="product">
<img src={imageUrl} alt={productType} />
<article ref={(el) => { this.sizingWidgetEl = el }}
data-eyefitu-sizing-widget
data-brand={brandName}
data-product={productType}
data-image={imageUrl}
data-gender={productGender}
data-sizes={JSON.stringify(availableSizes)} />
<button>
Buy now
</button>
</div>
);
}

}

See also

Troubleshooting

If this tutorial doesn't work for you, don't hesitate to write directly to developers@eyefitu.com.

REST API

If you would like to use EyeFitU SizeEngine in a non-JavaScript app, such as native iOS or Android application, you can use our REST API.