Skip to main content

Faslet Widget NPM Module

For Javascript/Typescript development, we provide a 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 Widget 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/widget

Widget (Product page)

Example usage:

import { createWidget } from "@faslet/widget";

const widget = createWidget(SHOP_ID)
.withBrand(BRAND_IDENTIFIER)
.withProductId(PRODUCT_IDENTIFIER)
.withProductImage(PRODUCT_IMAGE_URL)
.withProductName(PRODUCT_NAME)
.withAddToCart(myAddToCartFunction)
.withOnResult(myResultCallback);

widget.addColor(COLOR_1_ID, COLOR_1_NAME).addColor(COLOR_2_ID, COLOR_2_NAME);

widget
.addVariant(VARIANT_1_ID, VARIANT_1_SIZE_LABEL, VARIANT_1_IN_STOCK, VARIANT_1_SKU, VARIANT_1_COLOR_ID, VARIANT_PRICE, VARIANT_IMAGE)
.addVariant(VARIANT_2_ID, VARIANT_2_SIZE_LABEL, VARIANT_2_IN_STOCK, VARIANT_2_SKU, VARIANT_2_COLOR_ID, VARIANT_PRICE, VARIANT_IMAGE);

// Adds the faslet-app.min.js to the page
widget.injectScriptTag();

// Adds the button to this css selector in your HTML
widget.addToDom("#faslet-container");

Order Tracking (After checkout/Thank You page)

Example usage with shop id Faslet Demo

import { createOrderTracking } from "@faslet/widget";

// GET THE SHOP_ID FROM YOUR FASLET REPRESENTITIVE
const ot = createOrderTracking(SHOP_ID).withOrderNumber(ORDER_NUMBER).withPaymentStatus(ORDER_STATUS);

ot.addProduct(PRODUCT_ID, VARIANT_ID, PRODUCT_NAME, VARIANT_NAME, PRODUCT_PRICE_TIMES_QUANTITY, QUANTITY, VARIANT_SKU);

ot.buildOrderTracking();

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