Skip to main content

Faslet React NPM Module

For Javascript/Typescript development, we provide a React Component NPM package, which has source code available in our public Github.

tip

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

Usage​

To install the Faslet NPM module:

npm install @faslet/react-widget

Size Me Up Virtual Assistant (Product page)​

Example usage with shop id Faslet Demo

import { FasletWidget } from '@faslet/react-widget';

function ExampleProductPage() {

    // Get the product variants and colors
    const colors = [{ id: COLOR_1_ID, name: COLOR_1_NAME},{ id: COLOR_2_ID, name: COLOR_2_NAME}];
    const variants = [
        {variantId: VARIANT_1_ID, sizeLabel: VARIANT_1_SIZE_LABEL, inStock: VARIANT_1_IN_STOCK, sku: VARIANT_1_SKU, colorId: VARIANT_1_COLOR_ID, price: VARIANT_PRICE, imageUrl: VARIANT_IMAGE },
        {variantId: VARIANT_2_ID, sizeLabel: VARIANT_2_SIZE_LABEL, inStock: VARIANT_2_IN_STOCK, sku: VARIANT_2_SKU, colorId: VARIANT_2_COLOR_ID, price: VARIANT_PRICE, imageUrl: VARIANT_IMAGE },
    ];

    // Render the widget
    return  (
        <>
            <FasletWidget
                productId=PRODUCT_IDENTIFIER
                shopId=SHOP_ID
                brandId=BRAND_IDENTIFIER
                productImageUrl=PRODUCT_IMAGE_URL
                productName=PRODUCT_NAME
                colors={colors}
                variants={variants}
                onAddToCart={myAddToCartFunction}
                onResult={myResultFunction}
            />
        </>
    );
}


Order Tracking (After checkout/Thank You page)​

Example usage with shop id Faslet Demo

import { useFasletOrderTracking } from "@faslet/react-widget";

export function ExampleThankYouPage() {
  const productsInOrder = [
    {
      productId: PRODUCT_ID,
      variantId: VARIANT_ID,
      productName: PRODUCT_NAME,
      variantName: VARIANT_NAME,
      priceTimesQuantity: PRODUCT_PRICE_TIMES_QUANTITY,
      quantity: QUANTITY,
      sku: VARIANT_SKU
    },
  ];

  useFasletOrderTracking(SHOP_ID, ORDER_NUMBER, ORDER_STATUS, productsInOrder);

  return <p>Thank you for your order!</p>;
}

Examples​

In the project's Github Repository, you can find an example implementation.

Help​

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