Skip to main content

Other/Custom Platforms

Packages

We provide packages for a few different platforms. If you use PHP or Javascript, we highly recommend using one of these packages to simplify the integration:

Required integration

tip

In order to provide full insights, Faslet requests that you implement both the Widget on the Product Page and Order Tracking on the Thank You page. To validate your installation, please see our Integration Checklist

Widget Snippet

In order to add the widget to your site, you need to provide Faslet with a list of size chart or product identifiers. If you're unsure where to get these from, please get in touch with the Faslet team on support@faslet.me.

Using Size Chart/Product Identifiers

locale is an optional attribute. It can be set to an ISO language code (such as en-US or nl), to define the default widget language. If this is omitted, the widget will automatically detect the browser language. The widget will always fall back to English if the language isn't supported.

tip

SIZE_CHART_IDENTIFIER must be provided to the Faslet team, so that these can be mapped to size charts. Often this can be via a product feed

warning

Please don't cache the widget source on your site. Faslet uses some of the fastest infrastructure available, and the widget code itself is compressed with gzip, so it is not necessary. The widget code is also updated very often, and unexpected things may occur if you have an out of date copy. If you have any concerns about performance, or would like to have a technical discussion, please reach out to support@faslet.me.

Variants, Sizes, Colors and Add to Cart

To allow adding to cart, a variants list, add to cart function and possibly a colors list need to be passed through to the widget for this specific product. This is simply done by defining a window._faslet object

window._faslet = {
id: "PRODUCT_ID",
shopUrl: "https://my-shop-url",
addToCart: function (id) {
alert("id " + id);
return Promise.resolve();
},
variants: [
{ size: "S", color: "red", id: "variant_id_1", available: true, sku: "123", price: 59.99, imageUrl: 'https://placekitten.com' },
{ size: "S", color: "blue", id: "variant_id_2", available: true, sku: "456", price: 59.99, imageUrl: 'https://placekitten.com' },
{ size: "M", color: "red", id: "variant_id_3", available: true, sku: "789", price: 59.99, imageUrl: 'https://placekitten.com' },
{ size: "M", color: "blue", id: "variant_id_4", available: false, sku: "000", price: 59.99, imageUrl: 'https://placekitten.com' },
{ size: "L", color: "blue", id: "variant_id_5", available: false, sku: "111", price: 59.99, imageUrl: 'https://placekitten.com' },
],
colors: [
{ id: "red", name: "Dashing Red" },
{ id: "blue", name: "Stylish Blue" },
],
};

Where available is the stock status of the variant! Please send all variants, including out of stock, by setting available to true or false depending on the stock status. If the given product does not have color options, you can simply omit the color and provide an empty colors array:

window._faslet = {
id: "PRODUCT_ID",
shopUrl: "https://my-shop-url",
addToCart: function (id) {
alert("id " + id);
return Promise.resolve();
},
variants: [
{ size: "S", id: "variant_id_1", available: true, sku: "123", price: 59.99, imageUrl: 'https://placekitten.com' },
{ size: "M", id: "variant_id_2", available: true, sku: "456", price: 59.99, imageUrl: 'https://placekitten.com' },
],
colors: [],
};

The window._faslet global

The _faslet global object is defined as follows:

interface Window {
_faslet?: {
id: string; // The product identifier
sku: string; // The product SKU if it exists
shopUrl: string;
addToCart?: (variantId: string) => Promise<unknown>; // Will be invoked when Add-to-cart is clicked at the end of the widget flow
onButtonShow?: () => unknown; // Will be invoked when the button should show
onButtonHidden?: () => unknown; // Will be invoked when the button is hidden (either by AB testing or because it shouldn't show on this product)
onResult?: ({ label: string }, resultType: 'auto' | 'result-screen') => unknown; // Will be invoked when a result is calculated
onColorSelected?: (colorId: string) => unknown; // Will be invoked when a color is selected at the end of the widget flow
selectColor?: (colorId: string) => unknown; // Can be invoked to tell the widget which color option to select
openWidget?: () => unknown; // Can be invoked to programmatically open the widget flow (in case of custom built buttons)
variants: {
size: string;
color?: string;
id: string;
available: boolean;
sku: string;
price?: number;
imageUrl?: string; // The thumbnail image for this variant to be shown in the widget result screen
}[];
colors?: {
id: string;
name: string;
}[];
};
}
tip

Note that the addToCart function returns a promise. This allows calling a backend api asynchronously and the widget will await this. This is very handy if your add to cart is not simply a redirect. If in doubt, a Promise.resolve() can always be returned, as has been done in the above examples.

Order tracking code

In order to correctly provide return data, Faslet requests that you activate order tracking. What this does is track the Faslet information, product information and the order number for each order, so that if a return does happen, we can correlate this with Faslet widget users.

How this works is to load some scripts, and then for each product in the order, provide the order and product information. The following fields are required:

FieldDescription
orderThe store order number. This will be used to correlate with a return at a later stage.
payment_statusWhatever the store platform provides. We use this to disregard anything that is not considered paid
skuThe product SKU. This helps identify whether the user has used the Faslet widget on the particular product.
correlationIdAn identifier for this product. This should map the product id set above on the window._faslet object. Note that this is not for the variant, but the parent product. This is used to track an order to a size recommendation
titleThe product title. This helps identify whether the user has used the Faslet widget on the particular product.
variantThe product variant, normally something like "Large" or "Large, Red". This helps identify whether the user has used the Faslet widget on the particular product.
variant_idThe identifier of the product variant. This helps identify whether the user has used the Faslet widget on the particular product.
priceThe price of the single product after discounts have been applied. This helps us calculate the increase in average order value that Faslet provides.
quantityThe amount of this product ordered. This helps us calculate the increase in average order value that Faslet provides.

Example (in Lightspeed's template language):

note

Faslet does not collect any information that can be used to personally identify the user. Any information collected is purely for purposes of reducing returns and providing the store with the best analysis about sizing.

Extra Features

Select the variant on the PDP

This feature allows your store to select the size variant recommended by Faslet.

When a result is received, the widget invokes the window._faslet.onResult function if it exists. This function has the following signature:

onResult: ({ label: string }, resultType: 'auto' | 'result-screen') => unknown

The label given through will correlate to the Size Labels passed into the widget variants. The result type will tell you where the result was received (either inside the popup on the result screen, or via the auto-result on the button when it has already been filled in). Depending on your platform, this label can then be used to select the correct variant on the PDP.

Add to cart directly from the widget

This feature allows your customers to directly add their variant to the cart.

If the addToCart function is present, at the result screen inside the widget popup, an add to cart button will be visible. When clicked, the window._faslet.addToCart function will be called if it exists.

This function can be specified as follows (with the variants):

window._faslet = {
id: "PRODUCT_ID",
shopUrl: "https://my-shop-url",
addToCart: function (id) {
alert("id " + id);
return Promise.resolve();
},
variants: [
{ size: "S", id: "variant_id_1", available: true, sku: "123", price: 59.99, imageUrl: 'https://placekitten.com' },
{ size: "M", id: "variant_id_2", available: true, sku: "456", price: 59.99, imageUrl: 'https://placekitten.com' },
],
colors: [],
};

The label given through will correlate to the Size Labels passed into the widget variants. The result type will tell you where the result was received (either inside the popup on the result screen, or via the auto-result on the button when it has already been filled in). Depending on your platform, this label can then be used to select the correct variant on the PDP.

Help

In case of any questions, please don’t hesitate to contact us on support@faslet.me