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:

• Size Me Up Virtual Assistant Snippet
• Add-to-cart
• Order Tracking

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.

The faslet-app tag has the following attributes:

Field	Description	Required
shop-id	The unique identifier for your shop. This is provided by Faslet.	Yes
platform	The platform you are using. This is used for analytics and to help us provide better support.	Yes
product-name	The name of the product.	Yes
product-identifier	The identifier for the product as explained here.	Yes
brand	The brand of the product.	Yes
product-img	A URL to the product image.	Yes
locale	The locale of the Virtual Assistant. This is optional and defaults to the browser language if omitted.	No
disable-product-recommendations	Disables the product recommendations feature.	No
mode	The mode of the Virtual Assistant. Can be set to "button" or "mini". Defaults to "button".	No
user-id	A prefered user id. This is required when using the Assistant State API.	No
disable-tracking	Disable all analytics. This will prevent any data from going into the Faslet Partner Portal, and will stop the system from being able to adjust automatically.	No
fullscreen	Have the popup completely fill the parent container. This can be useful for app implementations.	No

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:

Field	Description	Required
id	An 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
sku	The SKU of the variant.	Yes
size	The size of this variant. This should match the sizes in the Faslet size charts.	Yes
available	The current stock status of this variant.	Yes
price	The price of this variant.	Yes
color	The color of this variant.	No
imageUrl	A 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:

Field	Description
order	The store order number. This will be used to correlate with a return at a later stage.
payment_status	Whatever the store platform provides. We use this to disregard anything that is not considered paid
sku	The product SKU. This helps identify whether the user has used the Faslet Size Me Up Virtual Assistant on the particular product.
correlationId	An 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
title	The product title. This helps identify whether the user has used the Faslet Size Me Up Virtual Assistant on the particular product.
variant	The 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_id	The identifier of the product variant. This helps identify whether the user has used the Faslet Size Me Up Virtual Assistant on the particular product.
price	The 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
quantity	The 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