Minimal Widget Integration

Enterprise Offering

This documentation covers Bodygram's Body2fit service, which is an enterprise offering. For our self-service API, please refer to the Bodygram Platform docs.

To integrate the Body2Fit widget into your website, copy the following minimal code snippet and fill in clientKey, brandId, and garmentSku with your information.

<!doctype html>
<html lang="en">
    <head>
        <script src="https://widget.body2fit.bodygram.com/v0/widget.js"></script>
        <link rel="stylesheet" href="https://widget.body2fit.bodygram.com/v0/widget.css" />
    </head>
    <body>
        <div id="body2fit"></div>
    </body>
    <script>
        const widget = new Body2FitWidget('body2fit', {
            clientKey: 'MY_PUBLIC_CLIENT_KEY',
            productInfo: {
                productId: {
                    brandId: 'MY_BRAND_ID',
                    garmentSku: 'MY_PRODUCT_SKU',
                },
            },
        })
    </script>
</html>

For a complete and detailed list of all the widget parameters and callbacks, refer to the parameters page.

Immediate recommendation

Each user who completes the size recommendation flow generates an estimation token. This token can be used later to make immediate size recommendations for other products without having to re-open the widget.

Storing the token

Body2Fit does not store the token, and rather lets you decide what storage option is the most appropriate for your use case. For example, the following code snippet implements the onToken callback to store the estimation token in a cookie on the user's device, and loads it if it is available.

const widget = new Body2FitWidget({
    clientKey: "MY_PUBLIC_CLIENT_KEY",
    productInfo: {
        productId: {
            "brandId": "MY_BRAND_ID",
            "garmentSku": "MY_PRODUCT_SKU"
        }
    },
    // Load and store the token in the onToken and token parameters.
    // In this example we use localStorage.
    onToken: event => {
        window.localStorage.setItem('body2fit-token', event.token)
    },
    token: window.localStorage.getItem('body2fit-token')
})

Token and Cookies

While you are free to store estimation tokens however you want, Bodygram recommends storing the token in cookies so that token is stored on the client. When doing so, it is your responsibility to adapt your cookie policy to inform your users.

Token and privacy

Estimation tokens are encrypted messages (SHA-256) that contain all of the necessary information for Body2Fit to make size recommendations. In particular, estimation tokens do not contain any user-specific data.

Recommendation from Token

Assuming that you have access to a previously-generated estimation token, you can make an immediate size recommendation by passing the token when the widget is instantiated and then call the getRecommendedSize() method.

const widget = new Body2FitWidget({
    clientKey: "MY_PUBLIC_CLIENT_KEY",
    productInfo: {
        productId: {
            "brandId": "MY_BRAND_ID",
            "garmentSku": "MY_PRODUCT_SKU"
        }
    },
    token: window.localStorage.getItem('body2fit-token') // or retrieve the token from somewhere else in your app
})

widget.getRecommendedSize() // Get the recommended size.

This recommended size can then be used to update some element in your page similarly to the example in the Recommendation results section.

Best sizeNo sizeError example

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

{
    "recommendation": {}
}

{
    "error": {
        "code": "INVALID_ESTIMATION_TOKEN",
        "message": "The estimation token seems to be incorrect or malformed."
    }
}

Compatibility

Body2Fit supports the latest versions of the following browsers:

Google Chrome
Microsoft Edge
Firefox
Safari

Support and Requests

For any questions or requests (e.g. UI customization), please contact Bodygram support.