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.
    textIfNoGoodFit: "Custom button text" // Optional text to display on button when goodFit is false. Please ensure this text is in the correct language (it should match the languageCode parameter).

    // 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:

Language name	Native name	Code
English (default)	English	en
Japanese	日本語	ja

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:

Value	Description
metric	The metric system (default).
imperial	The imperial metric units system using only pounds as the weight input

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.

textIfNoGoodFit

Optional text to display on the button entry point when goodFit is false. This allows you to customize the message shown to users when the fit recommendation indicates that the product may not fit well. If not provided, the best possible size will be shown even if it may not be a good fit.

Note: You need to handle localizations yourself. Please ensure this text is in the correct language (it should match the languageCode parameter).

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:

Property	Description
event	The name of the event that was triggered.
timestamp	The timestamp of the event in milliseconds since the Unix epoch.
parameters	The parameters that were used to instantiate the widget. This may or may not defined.

Here is a list of all possible events:

Event	Called when...
garment_support	Called when the product data is retrieved after instantiating the Body2Fit widget
garment_support_error	Called when an error happens while trying retrieve the product data
token	Called when a new estimation token is generated after making a size recommendation
recommendation	Called when a new size recommendation is requested
recommendation_error	Called when an error happens while trying to make a recommendation
add_to_cart	Called when the user selects a specific size in the Body2Fit widget
camera_or_stats_selected	Called when the user selects camera or stats in the Body2Fit widget
error	Called when an error happens during the widget or SDK's lifecycle
widget_closed	Called when the user closes the Body2Fit widget
widget_opened	Called when the user opens the Body2Fit widget
widget_ready	Called when the widget is properly loaded and ready to be shown
scan_completed	Called when the user has successfully completed a scan
scan_failed	Called when the user's scan attempt has failed

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.

Example eventExample callback

{
    "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.

Example eventExample error eventExample callback

{
    "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.

Example eventExample callback

{
    "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.

Example eventExample callback

{
    "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.

Example eventExample callback

{
    "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.

Example eventExample callback

{
    "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.

Example eventExample callback

{
    "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.

Example callback

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

onOpen

Called when the user opens the Body2Fit widget.

Example callback

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.

Example callback

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.

Example resultExample Error

{
    recommendation: {
        recommendedSize: "M"
    }
}

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