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:

Manual 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, we provide two options.

The simpler option is using the tagging/categorization system in your eCommerce Platform. In platforms like Shopify and Lightspeed, you can simply pass a tag through to our widget. Note that this tag is on a product level, and not a variant level.

In some platforms it requires considerable custom development effort to provide a tagging option in the CMS per product, and as such it is easier to provide Faslet with a list of size chart or product identifiers. Note that this must be mapped by the Faslet team and using this option may come with some setup fees depending on how many identifiers are provided.

If you're unsure which option fits your store best, please get in touch with the Faslet team on support@faslet.me.

Option 1: Using Tags/Categories

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

PRODUCT_TAG should be the tag provided by Faslet for this product, such as "Faslet_Shirt_Male".

Option 2: Using Size Chart/Product Identifiers (Advanced)

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.

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: string) {
alert("id " + id);
return Promise.resolve();
},
variants: [
{ size: "S", color: "red", id: "variant_id_1", available: true, sku: "123" },
{ size: "S", color: "blue", id: "variant_id_2", available: true, sku: "456" },
{ size: "M", color: "red", id: "variant_id_3", available: true, sku: "789" },
{ size: "M", color: "blue", id: "variant_id_4", available: false, sku: "000" },
{ size: "L", color: "blue", id: "variant_id_5", available: false, sku: "111" },
],
colors: [
{ id: "red", name: "Dashing Red" },
{ id: "blue", name: "Stylish Blue" },
],
};

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: string) {
alert("id " + id);
return Promise.resolve();
},
variants: [
{ size: "S", id: "variant_id_1", available: true, sku: "123" },
{ size: "M", id: "variant_id_2", available: true, sku: "456" },
],
colors: [],
};

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>;
onButtonShow?: () => unknown;
onButtonHidden?: () => unknown;
variants: {
size: string;
color?: string;
id: string;
available: boolean;
sku: string;
}[];
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.

Help

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