Body2Fit Integration

<!-- Prod (stable) -->
<script src="https://headless.body2fit.bodygram.com/sdk.umd.js"></script>

<!-- Beta (latest) -->
<script src="https://headless.stg.body2fit.bodygram.cc/sdk.umd.js"></script>

const sdk = new BodygramSDK({
  clientKey: 'org_1Ft28OBw925ToHy0FlaIwH',
  locale: 'en',        // optional — 'en' | 'ja' | 'ko' | 'fr' | 'es' | 'zh' | ...
});

const supported = await sdk.getBody2FitIsProductSupported({
  brandId,     // provided by Bodygram during onboarding
  garmentSKU,  // note: SKU is all-caps here — different from other SDK methods
});

if (supported) {
  // show the scan button or size recommendation UI
}

const { front, side } = await sdk.scan({
  camera: {
    facingMode: 'environment',
    width: { ideal: 1080 },
    height: { ideal: 1920 },
  },
  silhouette: 'male',    // 'male' | 'female' — defaults to 'female'
  welcomeModal: 'how-to-scan', // 'tap-to-start' | 'how-to-scan' | false
});

// front and side are base64-encoded jpeg strings
console.log(front); // 'data:image/jpeg;base64,...'
console.log(side);  // 'data:image/jpeg;base64,...'

const capture = await sdk.selfie({
  facingMode: 'user',        // 'user' | 'environment' — defaults to 'user'
  orientation: 'auto',       // 'auto' | 'portrait' | 'landscape' — defaults to 'auto'
  requireGyro: false,        // require device-orientation permission before starting
  isDebug: false,            // show on-screen debug overlay
});

// CaptureResult — image is a base64 data URL ready for getBody2FitSelfieEstimation()
const { image, width, height, capturedAt } = capture;
console.log(image); // 'data:image/jpeg;base64,...'

try {
  const { image } = await sdk.selfie();
  // …pass `image` to sdk.getBody2FitSelfieEstimation()
} catch (err) {
  if (err.code === 'SELFIE_CLOSED_BY_USER') {
    // user cancelled — fall back to stats input or re-prompt
  }
}

const estimation = await sdk.getBody2FitPhotoEstimation({
  front,                // base64 jpeg from sdk.scan()
  side,                 // base64 jpeg from sdk.scan()
  age: 25,              // years
  gender: 'male',       // 'male' | 'female'
  height: 1800,         // millimeters — 180 cm → 1800
  weight: 70000,        // grams — 70 kg → 70000
});

const { token } = estimation.estimations.estimationToken;
const { measurements } = estimation.estimations;

localStorage.setItem('bg-estimation-token', token);

// Predict-weight flow — no weight, optional bodyType
const selfieEstimation = await sdk.getBody2FitSelfieEstimation({
  selfie: image,        // 'data:image/jpeg;base64,...' from sdk.selfie()
  height: 1800,         // millimeters — required (500–2500)
  age: 25,              // optional (0–100)
  gender: 'male',       // optional — 'male' | 'female'
  bodyType: 'AVERAGE',  // optional — 'SLIM' | 'AVERAGE' | 'CURVY'
});

// Known-weight flow — weight provided, bodyType ignored
const selfieEstimationWithWeight = await sdk.getBody2FitSelfieEstimation({
  selfie: image,
  height: 1800,
  weight: 70000,        // grams (10000–200000) — switches to known-weight model
  age: 25,
  gender: 'male',
});

const { token } = selfieEstimation.estimations.estimationToken;
const { measurements } = selfieEstimation.estimations;

const estimation = await sdk.getBody2FitStatsEstimation({
  age: 25,              // years
  gender: 'male',       // 'male' | 'female'
  height: 1800,         // millimeters — 180 cm → 1800
  weight: 70000,        // grams — 70 kg → 70000
});

// The token encodes the user's estimated measurements.
// Save it to skip re-estimation on future visits.
const { token } = estimation.estimations.estimationToken;

// The measurements array contains individual body dimensions.
const { measurements } = estimation.estimations;

localStorage.setItem('bg-estimation-token', token);

{
  "estimations": {
    "estimationToken": {
      "token": "BY1AGJaDM680SNg2bbAI_jj3dB1us..."
    },
    "measurements": [
      { "estimationType": "HEIGHT",     "value": 1800, "unit": "MILLIMETERS" },
      { "estimationType": "WEIGHT",     "value": 70000, "unit": "GRAMS" },
      { "estimationType": "BUST_GIRTH", "value": 898,  "unit": "MILLIMETERS" },
      { "estimationType": "WAIST_GIRTH","value": 753,  "unit": "MILLIMETERS" },
      { "estimationType": "HIP_GIRTH",  "value": 934,  "unit": "MILLIMETERS" }
    ],
    "avatarData": null,
    "input": {
      "preferredSystemOfMeasurement": "METRIC",
      "tightness": 0,
      "inputType": "MANUAL_STATS"
    }
  }
}

{
  "error": {
    "code": "INTERNAL_ERROR",
    "message": "A human-readable description of the error"
  }
}

const recommendations = await sdk.getBody2FitSizeRecommendation({
  estimationToken,
  productInfo: [
    { brandId, garmentSku },
    // add more products if needed
  ],
});

[
  {
    "recommendation": {
      "recommendedSize": "M",
      "goodFit": true
    },
    "productInfo": {
      "brandId": "bodygram-client",
      "garmentSku": "body2fit-garment-1"
    }
  }
]

{
  "code": "INVALID_ESTIMATION_TOKEN", // or something else
  "message": "A human-readable description of the error"
}

const fitting = await sdk.getBody2FitSizeFitting({
  estimationToken,
  productInfo: [
    { brandId, garmentSKU },
  ],
});

[
  {
    "result": {
      "estimationToken": { "token": "BY1AGJaDM680SNg2bbAI_..." },
      "avatarType": "UPPER_BODY",
      "sizes": [
        {
          "size": { "index": 2, "name": "M" },
          "recommendationRank": 0,
          "neutralRecommendationRank": 0,
          "tightness": 0,
          "fittingPoints": [
            { "fittingPoint": "BUST_GIRTH",  "tightness": -1 },
            { "fittingPoint": "WAIST_GIRTH", "tightness": 0  },
            { "fittingPoint": "HIP_GIRTH",   "tightness": 0  }
          ]
        },
        {
          "size": { "index": 3, "name": "L" },
          "recommendationRank": 1,
          "neutralRecommendationRank": 1,
          "tightness": 1,
          "fittingPoints": [
            { "fittingPoint": "BUST_GIRTH",  "tightness": 0 },
            { "fittingPoint": "WAIST_GIRTH", "tightness": 1 },
            { "fittingPoint": "HIP_GIRTH",   "tightness": 2 }
          ]
        }
      ],
      "sizeGroups": []
    },
    "productInfo": {
      "brandId": "bodygram-client",
      "garmentSKU": "body2fit-garment-1"
    }
  }
]

{
  "code": "INVALID_ESTIMATION_TOKEN", // or something else
  "message": "A human-readable description of the error"
}

const fitting = await sdk.getBody2FitSizeFitting({
  estimationToken,
  productInfo: [
    { brandId, garmentSKU },
  ],
});

const firstSize = fitting[0].result.sizes[0]; // pass a single size from the fitting response

const [tightnessCategory, averageTightness] = BodygramSDK.utils.calculateOverallTightness(firstSize);

console.log(tightnessCategory);   // e.g. 'best-fit'
console.log(averageTightness);    // mean tightness across fitting points, or NaN for the no-fit cases

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Body2Fit Example</title>

    <!-- Load the Bodygram Headless SDK -->
    <script src="https://headless.body2fit.bodygram.com/sdk.umd.js"></script>
  </head>
  <body>
    <button id="startBtn">Find my size</button>

    <script>
      // ─── Replace these with your actual values from Bodygram ───────────────
      const CLIENT_KEY  = 'YOUR_CLIENT_KEY';   // issued during onboarding
      const BRAND_ID    = 'YOUR_BRAND_ID';     // provided by Bodygram
      const GARMENT_SKU = 'YOUR_GARMENT_SKU';  // the SKU you uploaded to Bodygram
      // ───────────────────────────────────────────────────────────────────────

      async function start() {
        // Step 1 — Initialize the SDK with your client key.
        // The SDK sets up the scanner iframe in the background.
        const sdk = new BodygramSDK({
          clientKey: CLIENT_KEY,
          locale: 'en', // change to match your user's language
        });

        // Step 2 — Check whether this garment is supported before going further.
        // Only show the size-finding experience when Bodygram has data for the product.
        const supported = await sdk.getBody2FitIsProductSupported({
          brandId: BRAND_ID,
          garmentSKU: GARMENT_SKU, // note: SKU is all-caps here
        });

        if (!supported) {
          console.log('This garment is not supported by Bodygram.');
          return;
        }

        // Step 3 — Open Scanflow so the user can take a front and side photo.
        // Both images come back as base64-encoded jpegs.
        //
        // Want to skip the camera entirely? Replace this block with:
        //   const estimation = await sdk.getBody2FitStatsEstimation({
        //     age: 25, gender: 'male', height: 1800, weight: 70000,
        //   });
        const { front, side } = await sdk.scan({
          silhouette: 'male',       // 'male' | 'female'
          welcomeModal: 'how-to-scan',
        });

        // Step 4 — Create an estimation token from the photos and user stats.
        // The token represents the user's body measurements and is reusable —
        // save it to skip the scan on future visits.
        const estimation = await sdk.getBody2FitPhotoEstimation({
          front,
          side,
          age: 25,        // replace with actual user input
          gender: 'male', // replace with actual user input
          height: 1800,   // millimeters — 180 cm → 1800
          weight: 70000,  // grams — 70 kg → 70000
        });

        const estimationToken = estimation.estimations.estimationToken.token;

        // Optional: save the token so returning users skip the scan next time.
        localStorage.setItem('bg-estimation-token', estimationToken);

        // Step 5 — Get the size recommendation for the product.
        // You can pass multiple products in a single call.
        const recommendations = await sdk.getBody2FitSizeRecommendation({
          estimationToken,
          productInfo: [{ brandId: BRAND_ID, garmentSku: GARMENT_SKU }],
        });

        const { recommendedSize, goodFit } = recommendations[0].recommendation;
        console.log(`Recommended size: ${recommendedSize} (good fit: ${goodFit})`);
      }

      document.getElementById('startBtn').onclick = start;
    </script>
  </body>
</html>