Headless SDK
Build a custom scanning and size-estimation UI with the Body2Fit Headless SDK — two integration paths, one SDK.
What is the Headless SDK?
The Headless SDK embeds Bodygram's estimation engine into your website without prescribing a UI. You own the interface; the SDK handles the iframe scanner, event communication, validation, and API calls.
It supports two distinct workflows depending on which Bodygram product you are integrating.
Choose your path
Path 1 — Body2Fit: size recommendations
Who this is for: Brands that have onboarded with Bodygram, uploaded their garments, and received a client key. The goal is to give shoppers a size recommendation for a specific garment.
- No server required — the
clientKeyis safe to use in frontend code. - The SDK collects user measurements — using two photos together with stats, or stats alone — and returns a size recommendation.
Path 2 — Bodygram Scanner Platform: body measurements
Who this is for: Developers who want raw body measurements (chest, waist, hips, inseam, etc.) from two photos. You may have discovered Bodygram through the Platform, or you need measurement data beyond size labels.
- Requires a server. Your API key is a secret and must never be exposed in client-side code.
- Your server generates a short-lived scan token and passes it to the browser.
- The client initializes the SDK with that token, runs the scan, and receives body measurements.
Shared reference
Both paths use the same SDK loader, iframe scanner, drawing utilities, and validation. These pages apply to either integration:
- Loading the SDK — script URLs and bootstrap snippets for Vanilla HTML, React, Next.js, and Vue
- Scanflow — embed the scanner iframe, handle photo capture events
- DrawUtils — render Bodygram avatars and overlays into your DOM without writing three.js
- API Reference — all exported classes, functions, and types