Embed AI-powered size recommendations into your e-commerce experience with Body2Fit.

What is Body2Fit?

Body2Fit is a size recommendation widget by Bodygram. It lets shoppers find their best fit — without returns, without guesswork — by analyzing their body measurements against your garment size data.

Embed a single JavaScript SDK into your storefront. Shoppers interact with a guided flow and receive a size recommendation in seconds. Your team receives structured data to act on.

Body2Fit is designed for developers building integrations. This documentation covers everything you need to run a complete, working implementation.

Building a custom UI? If you need full control over the size recommendation experience, see the Headless SDK instead.

Prerequisites

Before writing any code, make sure you have:

A Bodygram account — Contact us to get access.
A Client Key — provided after your account is set up. This authenticates the widget on your domain.
Registered garments — each garment must be uploaded to the Bodygram dashboard or API before it can be used in the widget. The widget references garments by their SKU.

The widget requires a valid Client Key and at least one registered garment to initialize. Set these up before proceeding.

Configure the widget and click Apply & Embed to watch the lifecycle events fire in real time. The code panel shows a complete HTML file you can copy and run locally. The demo uses Bodygram's test brand — swap in your own clientKey, brandId, and garmentSKU to test against your catalogue.

Next: Integration Guide — plain HTML, React, Vue, and common patterns.

Interactive Demo

Configuration

clientKey

brandId

garmentSKU

countryCode

languageCode

measurementSystem

Widget lifecycle

SDK loaded

Item supported

Widget ready

Size selected

Widget closed

CODE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Store</title>
    <script src="https://v3.body2fit.bodygram.com/sdk.js"></script>
  </head>
  <body>
    <button id="openWidget">Find My Size</button>

    <script>
      const widget = new Body2FitSDK({
      clientKey: '001b093acb89b8e6ee7995abcd5dda24d66aebef1afa28ff8283dd95af236ec4',
      countryCode: 'US',
      languageCode: 'en',
      brandId: 'in_store',
      garmentSKU: 'BGdemo_486329',
      preferredMeasurementSystem: 'imperial',
      slideInDirection: 'right',
      });

      widget.embed();

      widget.on('supported', (data) => {
        if (!data.supported) {
          document.getElementById('openWidget').style.display = 'none';
        }
      });

      widget.on('ready', () => {
        document.getElementById('openWidget').addEventListener('click', () => {
          widget.open();
        });
      });

      widget.on('add-to-cart', (data) => {
        console.log('Size selected:', data.size);
      });

      widget.on('close', () => {
        // restore page state
      });
    </script>
  </body>
</html>

Getting Started

What is Body2Fit?

Prerequisites

Try it out

On this page