Embed the Bodygram camera scanner, configure scan options, and handle captured photos.

Overview

Scanflow is the built-in scanning UI provided by the Headless SDK. When invoked, it embeds a guided camera interface into your page that walks the user through capturing two photos — a front-facing shot and a side-facing shot — which Bodygram uses to estimate body measurements.

The full scanflow consists of two screens:

Introduction — an optional screen shown before the camera opens. Use it to welcome users, set expectations, or explain how to position for an accurate scan.
Scan — the camera interface where the user positions themselves and captures each photo.

Both screens are configurable. You can skip the introduction, swap modal styles, or drive the flow programmatically to match your product's UX.

Implementation

Call sdk.scan() to launch the scanflow. It returns a promise that resolves with the captured front and side photos once the user completes the scan.

const { front, side } = await sdk.scan({
  silhouette: 'female',
  welcomeModal: 'how-to-scan',
  screensToInclude: ['how-to-scan', 'scan'],
  isMirrored: true,
  hasHeader: true,
  hasActionsArea: true,
  isDebuggerEnabled: false,
  camera: { facingMode: 'user' },
});

Configuration

All fields are optional.

Option	Type	Description
`camera`	`MediaTrackConstraints`	Constraints passed to `getUserMedia`. Use to select front/rear camera, set resolution, etc. To request the back camera, pass `{ facingMode: 'environment' }` — note that availability depends on the browser and device.
`silhouette`	`"male"` \| `"female"`	Overlay silhouette shown in the scanner to guide user positioning.
`isDebuggerEnabled`	`boolean`	Enables the on-screen debug panel. Useful during development. Defaults to `false`.
`screensToInclude`	`ScreenID[]`	List of screens to include in the flow. Valid values: `"scan"`, `"how-to-scan"`, `"all"`.
`welcomeModal`	`'tap-to-start'` \| `'how-to-scan'` \| `false`	Controls the intro modal shown before the scanner opens. `'how-to-scan'` shows positioning instructions before the camera opens. `false` skips the modal entirely. `'tap-to-start'` shows a minimal tap prompt — use this on iOS when `screensToInclude` is set to `["scan"]` only: without a prior screen, no user gesture has been registered, and iOS will block audio playback. This is not an issue on Android. Defaults to `'how-to-scan'`.
`isMirrored`	`boolean`	Mirrors the camera preview horizontally. Defaults to `true` for front-facing cameras.
`hasHeader`	`boolean`	Shows or hides the header bar on the scan screen only. Defaults to `false`.
`hasActionsArea`	`boolean`	Shows or hides the bottom actions area on the scan screen only. Defaults to `false`.

Camera width and height constraints depend on the device's camera capabilities. Not all devices support the same resolution ranges.

hasHeader and hasActionsArea apply to the scan screen only. The introduction screen (e.g. how-to-scan) always renders its own header and actions area. Configurable introduction screen layout is planned for a future release.

Error handling

sdk.scan() returns a promise that can reject in two cases:

Code	When
`SCAN_CLOSED_BY_USER`	The user closed the scanner before completing the scan.
`SCAN_FAILED`	The scan could not be completed due to an unexpected error.

try {
  const { front, side } = await sdk.scan(config);
} catch (err) {
  if (err.code === 'SCAN_CLOSED_BY_USER') {
    // user dismissed the scanner
  } else if (err.code === 'SCAN_FAILED') {
    // something went wrong during the scan
  }
}

Try it

Configure the options below and launch the scanner with your client key.

Interactive Demo

locale

Scanner

silhouette (gender)

welcomeModal

screensToInclude

Camera

camera.facingMode

camera.width

ideal

exact

min

max

Values are pixels. Focus a field to see what it does.

camera.height

ideal

exact

min

max

Values are pixels. Focus a field to see what it does.

camera.deviceId

Display

isMirrored

hasHeader

hasActionsArea

isDebuggerEnabled

CODE

const sdk = new BodygramSDK({
  clientKey: 'YOUR_CLIENT_KEY',
  locale: 'en',
});

const { front, side } = await sdk.scan({
  welcomeModal: 'how-to-scan',
  screensToInclude: ['scan', 'how-to-scan'],
  camera: {
    facingMode: 'user',
  },
  isMirrored: true,
  hasHeader: false,
  hasActionsArea: false,
  isDebuggerEnabled: false,
});

API reference

Detailed signatures, parameters, and response shapes for everything used on this page live in the Headless SDK API reference.

Methods

scan(config?) — open the scanner UI and resolve with the captured front and side photos as base64 strings.

Initialization

new BodygramSDK({ clientKey, locale, ... }) — construct the SDK before calling scan().

Scanflow Playground