Configuration

Configuration Object

The Body2Fit SDK is initialized with a configuration object that contains all the necessary settings:

const config = {
    // Required fields
    clientKey: "your-client-key",
    countryCode: "US",
    languageCode: "en",
    brandId: "your-brand-id",
    garmentSKU: "your-garment-sku",
    preferredMeasurementSystem: "metric",

    // Optional fields
    priorityFlow: "stats",
    enabledFlows: ["upload", "selfie", "full-body"],
    features: ["shinyAvatar", "avatarLighting:studio", "weightInterval5"],
    brandLogoURL: "https://example.com/logo.png",
    garmentImageURL: "https://example.com/garment.jpg",
    garmentName: "Premium T-Shirt",
    uploadAnimationURL: "https://cdn.example.com/upload-demo.gif",
    slideInDirection: "right",
    preferredGender: "male",
    privacyPolicyURL: "https://example.com/privacy",
    theme: {
        primary: "oklch(0.4127 0.0935 257.5)",
        primaryForeground: "oklch(0.98 0 0)",
    },
    additionalParams: {
        customParam: "value"
    },
    session: {
        clientSessionId: "your-client-session-id",
    },
};

const widget = new Body2FitSDK(config);

Required Configuration

Optional Configuration

Features

The features option enables optional widget capabilities. Pass an array of supported feature flags:

const widget = new Body2FitSDK({
  // ... other required config
  features: ["shinyAvatar", "avatarLighting:studio", "weightInterval5"],
});

Supported flags

Unknown flags are ignored. Contact Bodygram if you need a feature that isn't listed here.

Privacy policy

The widget links to a privacy policy covering the body measurement flow. By default this points to Bodygram's Body2Fit privacy policy.

Use privacyPolicyURL to link to your own policy instead — for example when your storefront's privacy policy already covers the body measurement flow:

const widget = new Body2FitSDK({
  // ... other required config
  privacyPolicyURL: "https://example.com/privacy",
});

The URL is used as-is, so pass a fully qualified URL including the https:// scheme. Omit the option — or pass an empty string — to keep the Bodygram default.

Theme

The theme option lets you override the widget's appearance by setting CSS custom properties. The widget uses the same CSS variable system as Tailwind CSS theme variables — any variable Tailwind exposes (e.g. --primary, --background, --radius, --font-sans) can be set through this option.

How it works

Each key in the theme object is converted from camelCase to kebab-case and applied as a CSS custom property on the widget root. For example:

Values are passed through unchanged, so you can use any valid CSS color format (oklch(), hsl(), rgb(), hex, etc.) or any value supported by the underlying CSS variable.

Example

const widget = new Body2FitSDK({
  // ... other required config
  theme: {
    primary: "oklch(0.4127 0.0935 257.5)",
    primaryForeground: "oklch(0.98 0 0)",
    background: "oklch(1 0 0)",
    radius: "0.5rem",
  },
});

Dark theme

The theme object accepts a nested dark key for dark-mode overrides, but the widget does not yet apply these reliably across all flows. For now, we recommend providing only light-theme values at the top level of theme and omitting the dark key.

Enabled flows

By default, the result page's More methods drawer offers every measurement method. Use enabledFlows to choose which ones are available:

// Only offer photo upload and full-body scan
const widget = new Body2FitSDK({
  // ... other required config
  enabledFlows: ["upload", "full-body"],
});

• Omitting enabledFlows, or passing an empty array [], enables every flow. Existing integrations don't need to change.
• "stats" is always enabled. It can't be removed and doesn't need to be listed.
• Methods always appear in the order Photo Upload, Selfie Scan, Full Body Scan, whatever order you list them in. Duplicates are ignored.
• If no methods are left (for example enabledFlows: ["stats"]), the button that opens this drawer is hidden.

Combining with priorityFlow

When enabledFlows is set, priorityFlow must be "stats" or one of the enabled flows. Otherwise the SDK constructor throws.

// Start in the upload flow and only offer upload
new Body2FitSDK({ ...config, priorityFlow: "upload", enabledFlows: ["upload"] });

// Invalid: "selfie" is not enabled, so the constructor throws
new Body2FitSDK({ ...config, priorityFlow: "selfie", enabledFlows: ["upload"] });
// Error: Body2Fit: `priorityFlow` "selfie" must be one of `enabledFlows`: stats, upload

Upload animation

The photo-upload welcome screen shows an animation demonstrating how to take the photos. Use uploadAnimationURL to replace it with your own image:

const widget = new Body2FitSDK({
  // ... other required config
  uploadAnimationURL: "https://cdn.example.com/upload-demo.gif",
});

If the URL fails to load (for example a 404, a blocked hotlink, or a link that isn't a direct image), the default Bodygram animation is shown instead.

Image guidelines

• Aspect ratio 551:381 (about 3:2 landscape), matching the default animation. The image is displayed in a fixed box; other ratios are scaled to fit without cropping, leaving empty space around the image.
• Format: GIF or animated WebP recommended. Keep the file size reasonable, since it loads inside the widget.
• URL: must be a direct, publicly accessible https image URL, not a page link (such as a Giphy or Google Drive page).

Configuration Validation

The SDK validates your configuration and throws descriptive errors for missing or invalid required fields:

try {
    const widget = new Body2FitSDK({
        clientKey: "demo-key",
        // Missing required fields
    });
} catch (error) {
    console.error("Configuration error:", error.message);
    // Error: Body2Fit: brandId is required
}

Common validation errors: