Widget Parameters

Here follows an example of the Body2Fit widget instantiated with all possible parameters and callbacks. For details about each of these, refer to the sections below.

const widget = new Body2FitWidget({
    // Parameters
    // ----------
    clientKey: 'YOUR_PUBLIC_CLIENT_KEY',    // Public key provided by Bodygram.
    productInfo: {
        productId: {
            brandId: "YOUR_SHOP",           // The brand of the product.
            garmentSku: "YOUR_PRODUCT_SKU", // The SKU of the product.
        }
    },
    privacyPolicyUrl: 'https://example.com', // URL of your privacy policy.
    clientSessionId: "customerSession123", // Your own identifier of a particular user (e.g. session id)..
    sessionId: "session123",      // Already generated Body2Fit Session ID.
    countryCode: "UK",            // 2-letters code of the store country.
    languageCode: "en",           // 2-letters code of the language.
    measurementSystem: "metric",  // Measurement system to be used.
    token: "token42",             // An optional estimation token.
    disableStats: false,          // Disable body stats only size recommendation.
    disableAddToCart: false,      // Disable the "Add to Cart" button.
    enableFeedback: false,        // Enable the feedback button.
    enableClearUserData: false    // Enable the "Clear Data" button in the input form.
    hasCommentsInFeedbackForm: false // If true the feedback form will have a comments field.

    // Callbacks
    // ---------
    onEvent: event => {},          // when any event occurs
    onSupport: event => {},        // when product support data is retrieved
    onToken: event => {},          // when an estimation token is generated
    onRecommendation: event => {}, // when a size recommendation is made
    onAddToCart: event => {},      // when the user clicks on the "Add to Cart" button
    onCameraOrStatsSelected: event => {}, // when the user selects camera or stats
    onError: event => {},          // when an error occurs
    onOpen: () => {},             // when the user opens the widget
    onClose: () => {},          // when the user closes the widget
    onReady: () => {},          // when the widget is loaded and ready to be shown to the user
})

Parameters

clientKey

The client key that was provided by Bodygram. This key is used as a way to identify request coming from your website.

productInfo

An object that contains the necessary information to identify the product to recommend. The productInfo object must contain a productId object which contains your brand ID and the SKU of the product.

{
    productId: {
        brandId: "YOUR_SHOP",           
        garmentSku: "YOUR_PRODUCT_SKU",
    }
}

privacyPolicyUrl

The URL of your privacy policy. This URL will be displayed in the widget's input page.

clientSessionId

An optional ID that you want to associate to the session.

sessionId

An optional Id that was returned from a manual call to /v2/CreateSession. This will typically be only be used in cases where the widget can't be embedded directly on a product page (such as a native mobile app).

countryCode

The ISO 3166-1 Alpha-2 code of the country your e-store is in. For example JP for Japan or BE for Belgium.

languageCode

The ISO 639-1 code of the language in which widget instructions should be provided. Body2Fit currently only supports the following languages:

measurementSystem

Optional measurement system in which users provide their physiological information. By default, Body2Fit will try to infer the measurement system from the country code. Though, you can still force a particular measurement system by setting the measurementSystem parameter to one of the following values:

token

A previously generated estimation token to be used to bypass body scanning and make direct size recommendations via the sizeRecommendation function.

disableStats

Disables the body stats only size recommendation.

disableAddToCart

Removes the "Add to Cart" button from the widget.

enableFeedback

Enables the feedback functionality in the widget.

enableClearUserData

Enables the "Clear Data" button in the input form. When the user clicks on this button, a page with a warning message will be shown. If the user confirms, it will clear the estimation token from the localStorage, calls onReset callback if defined, and redirect the user to the root page of the widget.

hasCommentsInFeedbackForm

If true, the feedback form will have a comments field. This is useful if you want to collect additional feedback from the user.

Callbacks

onEvent

onEvent is called when any event occurs. This callback is useful for developers who want to track events using their own analytics tools. onEvent will receive an event object as its first argument. This object contains the following properties:

Here is a list of all possible events:

Structure of the parameters object depends on the event that was triggered. Here is a list of all possible events and their corresponding parameters object:

1. garment_support event
   1. is_supported: A boolean value that indicates whether the product is supported or not.
   2. brand: The brand of the product.
   3. sku: The SKU of the product.
2. garment_support_error event
   1. message: Error message
3. token event
   1. token: The estimation token.
   2. sku: The SKU of the product.
   3. brand: The brand of the product.
4. recommendation event
   1. recommendedSize: The size recommend by Bodygram.
   2. sku: The SKU of the product.
   3. brand: The brand of the product.
5. recommendation_error event
   1. message: Error message
6. add_to_cart event
   1. select_size: The size selected by the user.
   2. sku: The SKU of the product.
   3. brand: The brand of the product.
7. camera_or_stats_selected event
   1. option: The option selected by the user. It could be camera or stats.
8. error event
   1. message: Error message
   2. additional_info: An object containing additional information about the error. It could be undefined.
9. widget_closed event
   1. parameters will be undefined.
10. widget_opened event
    1. parameters will be undefined.
11. widget_ready event
    1. parameters will be undefined.
12. scan_completed event
    1. token: The estimation token.
    2. sku: The SKU of the product.
    3. brand: The brand of the product.
13. scan_failed event
    1. sku: The SKU of the product.
    2. brand: The brand of the product.

{
    "event": "garment_support",
    "timestamp": 1705897499985,
    "parameters": {
        "is_supported": true,
        "brand": "YOUR_SHOP",
        "sku": "YOUR_PRODUCT_SKU"
    }
}

const onEvent = function(event) {
    // Here shows an example of how to use events with Google Analytics.
    gtag('event', event.event, event.parameters);
}

onSupport

Called when the product data is retrieved after instantiating the Body2Fit widget.

{
    "support": {
        "productId": {
            "brandId": "YOUR_SHOP",
            "garmentSku": "YOUR_PRODUCT_SKU"
        },
        "supported": "SUPPORTED"
    }
}

{
    "error": {
        "code": "INVALID_PRODUCT_ID",
        "message": "Invalid product ID: missing product SKU."
    }
}

const onSupport = function(event) {
    if (event.support.supported === "SUPPORTED") {
        console.log("Product is supported!");
    } else if (event.support.supported === "UNSUPPORTED") {
        console.log("Product is not supported.");
    } else {
        console.log("Unknown support status.");
    }
}

onToken

Called when a new estimation token is generated after making a size recommendation.

{
    "token": "ABC123",
    "sku": "YOUR_SHOP",
    "brand": "YOUR_PRODUCT_SKU"
}

const onToken = function(event) {
    const token = event.token;
    const sku = event.sku;
    const brand = event.brand;

    console.log(`Received token: ${token}`);
    console.log(`Product SKU: ${sku}`);
    console.log(`Product Brand: ${brand}`);
    window.localStorage.setItem('body2fit-token', token)
}

onRecommendation

Called when a new size recommendation is made.

{
    "recommendation": {
        "recommendedSize": "M"
    }
}

const onRecommendation = function(event) {
    const recommendedSize = event.recommendation.recommendedSize;
    // Display the recommended size on your UI
    console.log(`Recommended Size: ${recommendedSize}`);
}

onAddToCart

Called when the user selects a specific size in the Body2Fit widget.

{
    "selection": {
        "selectSize": "M"
    },
    "sku": "YOUR_SHOP",
    "brand": "YOUR_PRODUCT_SKU"
}

const onAddToCart = function(event) {
    const selectedSize = event.selection.selectSize;
    const sku = event.sku;
    const brand = event.brand;

    // Add the selected item to the cart or perform other cart-related actions
    console.log(`Selected Size: ${selectedSize}`);
    console.log(`Product SKU: ${sku}`);
    console.log(`Product Brand: ${brand}`);
}

onCameraOrStatsSelected

Called when the user selects camera or stats.

{
    "option": "camera"
}

const onCameraOrStatsSelected = function(event) {
    const option = event.option;

    // Handle the event
    console.log(`User has selected: ${option}`);
}

onError

Called when an error happens during the widget or SDK's lifecycle. Supplying details about the error message, a timestamp, and additonal data, such as the user's user-agent.

{
    "message": "Gyro unavailable.",
    "timestamp": 12345678900,
    "data": {
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko)"
    }
}

const onError = function(event) {
    const message = event.message;
    const timestamp = event.timestamp;
    const data = event.data;

    // Handle the error, log it, or display it to the user
    console.log(`Error message: ${message}`);
    console.log(`Timestamp: ${timestamp}`);
    console.log(`Data: ${data}`);
}

onClose

Called when the user closes the Body2Fit widget.

const onClose = function() {
    // Handle the close event
    console.log(`Widget has been closed.`);
}

onOpen

Called when the user opens the Body2Fit widget.

const onOpen = function() {
    // Handle the open event
    console.log(`Widget has been opened.`);
}

onReady

Called when the widget is properly loaded and ready to be shown. Clients should not call the show method before this callback is received.

const onReady = function() {
    // Handle the ready event
    console.log(`Widget is ready to be shown.`);
}

Methods

show

Shows the Body2Fit widget.

hide

Hides the Body2Fit widget.

getRecommendation

Returns the recommended size given the productInfo and token. This call does not work if no estimation token is provided when the Body2Fit widget is instantiated.

{
    recommendation: {
        recommendedSize: "M"
    }
}

{
    error: {
        code: "INVALID_PRODUCT_ID",
        message: "Invalid product ID: missing product SKU."
    }
}