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",
    features: ["shinyAvatar", "avatarLighting:studio", "weightInterval5"],
    brandLogoURL: "https://example.com/logo.png",
    garmentImageURL: "https://example.com/garment.jpg",
    garmentName: "Premium T-Shirt",
    slideInDirection: "right",
    preferredGender: "male",
    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

Property	Type	Values	Description
`clientKey`	`string`	—	Your unique client key provided by Body2Fit.
`countryCode`	`string`	`"US"`, `"JP"`	The country code for your target market.
`languageCode`	`string`	`"en"`, `"ja"`	The language code for the widget interface.
`brandId`	`string`	—	Your unique brand identifier.
`garmentSKU`	`string`	—	The SKU of the specific garment for size recommendations.
`preferredMeasurementSystem`	`string`	`"metric"`, `"imperial"`	The measurement system to use for the widget.

Optional Configuration

Property	Type	Default	Values	Description
`priorityFlow`	`string`	`"stats"`	`"stats"`, `"upload"`, `"selfie"`, `"full-body"`	Determines the priority flow for the widget experience.
`features`	`string[]`	`[]`	—	Array of feature flags to enable specific functionality. See Features for the supported flags.
`brandLogoURL`	`string`	—	Valid URL	URL to your brand logo image.
`garmentImageURL`	`string`	—	Valid URL	URL to the garment product image.
`garmentName`	`string`	—	—	Display name for the garment.
`slideInDirection`	`string`	`"right"`	`"left"`, `"right"`, `"top"`, `"bottom"`	Direction from which the widget slides in.
`preferredGender`	`string`	`"male"`	`"male"`, `"female"`	Default gender preference for the widget.
`theme`	`object`	`{}`	—	Custom theme configuration for styling. See Theme for the full structure.
`additionalParams`	`object`	`{}`	—	Custom key-value pairs for integration-specific data.
`session.clientSessionId`	`string`	—	—	A unique identifier to correlate size recommendations with purchase decisions. Generate a unique ID per user session and pass it here to enable order tracking. See Order Confirmation.

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

Flag	Description
`shinyAvatar`	Renders the avatar with a shiny, reflective surface.
`avatarLighting:studio`	Applies studio-style lighting to the avatar (removes shadows on the avatar).
`weightInterval5`	Adds 5 kg intervals to the weight slider.

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

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:

`theme` key	CSS variable applied
`primary`	`--primary`
`primaryForeground`	`--primary-foreground`
`background`	`--background`
`radius`	`--radius`

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

Dark theme is not fully supported yet. We are actively working on it. If you need dark theme support urgently, please contact Bodygram.

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.

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:

Error	Cause
`clientKey is required`	`clientKey` was not provided.
`brandId is required`	`brandId` was not provided.
`garmentSKU is required`	`garmentSKU` was not provided.
`countryCode is required`	`countryCode` was not provided or is invalid.
`languageCode is required`	`languageCode` was not provided or is invalid.
`measurementSystem is required`	`preferredMeasurementSystem` was not provided or is invalid.

On this page