Faslet Global Object

The `window._faslet` global

The _faslet global object is defined as follows: The Faslet system allows you to control and interact with the Size Me Up Virtual Assistant through a global JavaScript variable window._faslet. This interface provides an accessible way to customize the Size Me Up Virtual Assistant's behavior according to your needs.

interface Window {
  _faslet?: {
    id: string; // The product identifier
    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;
    }[];
    addToCart?: (variantId: string) => Promise<unknown>; // Will be invoked when Add-to-cart is clicked at the end of the widget flow
    sku: string; // The product SKU if it exists
    shopUrl: string;
    onButtonShow?: (
      productId: string, 
      configuration: {
          minWidth: number | undefined
          minHeight: number | undefined
      }
    ) => unknown; // Will be invoked when the button should show
    onButtonHidden?: (productId: string) => unknown; // Will be invoked when the button is hidden (either by AB testing or because it shouldn't show on this product)
    onOpen?: (productId: string) => unknown; // Will be invoked when the popup is opened
    onClose?: (productId: string) => unknown; // Will be invoked when the popup is closed
    onResult?: (
      result: { 
        label: string; 
        userName: string | undefined;
        userId: string;
        profile: {
          weight: number | undefined;
          height: number | undefined;
          ageRange: string | undefined;
          referenceShoeBrand: string | undefined;
          referenceShoeSize: string | undefined;
        }
      }, 
      resultType: 'auto' | 'result-screen',
      resultReason: 'pre-calculated' | 'after-close' | 'new-request' | 'instant-fit'
    ) => 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?: (productId?: string) => unknown; // Can be invoked to programmatically open the widget flow (in case of custom built buttons)
    onDataChanged?: (userData: {
        userId: string
        widgetVersion?: string
        seenExperiments?: string
        experimentVariants?: string
        profile?: FasletUserProfile
    }) => unknown; // Will be invoked when the user data is changed in the widget
    onExperimentsReady?: (
      activeExperiments: string[]
    ) => unknown; // Will be invoked when experiments are loaded
  };
}

Here are the properties available within the window._faslet object:

Property	Type	Required	Description
`id`	string	Yes	The product identifier.
`addToCart`	function	Yes	A function that will be invoked when the 'Add to Cart' button is clicked at the end of the popup flow.
`variants`	array	Yes	An array of variant objects with properties such as `size`, `color`, `id`, `available`, `sku`, `price`, and `imageUrl`.
`colors`	array	No	An array of color objects each with `id` and `name` properties.
`sku`	string	No	The product SKU, if it exists.
`shopUrl`	string	No	The URL of the shop.
`onButtonShow`	function	No	A function that will be invoked when the button should show.
`onButtonHidden`	function	No	A function that will be invoked when the button is hidden (either by AB testing or because it shouldn't show on this product).
`onResult`	function	No	A function that will be invoked when a result is calculated. It takes two parameters: an object with information about the result such as the size `label` that was recommended to the customer, the user's `profile`, a `resultType` which can be either `auto` or `result-screen` and a `result-reason` which will be one of `pre-calculated`, `after-close`, `new-request`, or `instant-fit`
`onColorSelected`	function	No	A function that will be invoked when a color is selected at the end of the popup flow.
`selectColor`	function	No	A function that can be invoked to tell the Virtual Assistant which color option to select.
`openWidget`	function	No	A function that can be invoked to programmatically open the popup flow (in case of custom built buttons).
`onOpen`	function	No	A function that will be invoked when the popup is opened.
`onClose`	function	No	A function that will be invoked when the popup is closed.
`onDataChanged`	function	No	A function that will be invoked when the user data is changed in the popup.
`onExperimentsReady`	function	No	A function that will be invoked when experiments are loaded. It takes an array of strings, each string representing an active experiment variant.

tip

Note that the addToCart function returns a promise. This allows calling a backend api asynchronously and the popup 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.

The window._faslet global​

The `window._faslet` global