Skip to main content

Other/Custom Platforms

Custom Integration with Faslet

This section covers the steps required to integrate Faslet with custom or non-standard platforms. If you are using PHP or JavaScript, we recommend using our specially designed packages for these platforms for an easier integration process:

Integration Checklist

The following steps are required to integrate Faslet:

tip

To deliver full insights, Faslet requires both the Size Me Up Virtual Assistant on the Product Page and Order Tracking on the Thank You page. To verify your installation, see our Integration Checklist.

Step-by-Step Integration Guide (ALL STEPS REQUIRED)

1. Add Size Me Up Virtual Assistant Snippet to the PDP

To implement the Size Me Up Virtual Assistant on your site, provide Faslet with a list of size chart or product identifiers. If you need assistance obtaining these, contact our support team at support@faslet.me.

This snippet should be placed on every product page. The button will only show once a product is activated in the Faslet system. If the button is not showing, please contact support@faslet.me.

Implementation Using Size Chart/Product Identifiers

The locale attribute is optional. Set it to an ISO language code (e.g., en-US or nl) to define the default Virtual Assistant language. If omitted, the Virtual Assistant detects the browser language and defaults to English if the language isn't supported.

tip

Please provide the SIZE_CHART_IDENTIFIER to the Faslet team to map it to size charts, which can often be done via a product feed.

danger

Avoid caching the our code on your site. Faslet employs high-speed infrastructure and compresses the code with gzip, making caching unnecessary. Frequent code updates may cause issues with outdated copies. If you have concerns about performance or need a technical discussion, reach out to support@faslet.me.

2. Variants, Sizes, Colors and Add to Cart

The Faslet Size Me Up Virtual Assistant allows customers to choose a variant (such as size or color) and add the product directly to the cart from the popup. This section covers how to enable these functionalities.

Enabling Variants Your products might come in different variants, like colors and sizes. Faslet allows the user to choose these variants directly in the popup. To enable this feature, you need to pass a list of variants when you initialize the Virtual Assistant.

A variant has the following attributes:

FieldDescriptionRequired
idAn identifier for the variant. This could be a SKU or any other unique identifier, as long as it is consistently used throughout the Faslet integration.Yes
skuThe SKU of the variant.Yes
sizeThe size of this variant. This should match the sizes in the Faslet size charts.Yes
availableThe current stock status of this variant.Yes
priceThe price of this variant.Yes
colorThe color of this variant.No
imageUrlA URL to a thumbnail for this variant.No
danger

Please send all variants, including out of stock, by setting available to true or false depending on the stock status.

window._faslet = {
...
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" },
],
...
};

If the given product does not have color options, you can simply omit the color and provide an empty colors array

window._faslet = {
...
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: [],
...
};
tip

A full definition of all the options on the window._faslet object can be found in the Faslet Global Object documentation.

3. Enabling Add to Cart

Faslet can call a function to add the product directly to the cart when a customer clicks on the Add to Cart button in the popup. To enable this functionality, you need to provide a Javascript function that will be called when this event happens.

This function should take one parameter: id. It should return a Promise that resolves when the product has been added to the cart.

You can specify this function in the addToCart attribute when initializing the Size Me Up Virtual Assistant.

window._faslet = {
...
addToCart: function (id) {
alert("id " + id);
return Promise.resolve();
},
...
tip

Please note that this function needs to be able to handle the situation when the variant is out of stock or not available for any reason. The function should reject the Promise with an appropriate error message in these cases.

4. Order tracking code

To deliver comprehensive return data and provide detailed business intelligence, Faslet necessitates the activation of order tracking. Order tracking allows for the capture of Faslet-related information, such as product details, and the order number for each transaction. This becomes crucial if a return is initiated, allowing us to link this with Faslet Size Me Up Virtual Assistant interactions.

The process entails loading specific scripts, and subsequently, for each product part of the order, order and product information is provided. Here are the necessary fields and what they mean:

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 Size Me Up Virtual Assistant 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 Size Me Up Virtual Assistant on the particular product.
variantThe product variant, normally something like "Large" or "Large, Red". This helps identify whether the user has used the Faslet Size Me Up Virtual Assistant on the particular product.
variant_idThe identifier of the product variant. This helps identify whether the user has used the Faslet Size Me Up Virtual Assistant 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. Please provide only a number and in a consistent currency
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 is committed to maintaining user privacy and does not collect any information that could be utilized to personally identify users. The data collected is exclusively used to minimize returns and provide the store with accurate sizing analysis.

5. Putting it all together

Here's how the complete Size Me Up Virtual Assistant snippet would look:

HTML to place the Size Me Up Virtual Assistant on the PDP

Javascript to configure the Size Me Up Virtual Assistant on the PDP

window._faslet = {
id: SIZE_CHART_IDENTIFIER,
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" },
],
addToCart: function (id) {
alert("id " + id);
return Promise.resolve();
}
};

Javascript to track orders on the order confirmation page (in Lightspeed's template language)

Select the variant on the PDP

This documentation has moved

Help

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