Loading the SDK
Load the Bodygram Headless SDK in Vanilla HTML, React, Next.js, and Vue applications.
Script URLs
The SDK ships in two build formats. Choose the one that fits your setup.
UMD build
Defines BodygramSDK on window (browser) or globalThis (Node). Load it with a <script> tag — no imports needed.
| Channel | URL |
|---|---|
| Prod (stable) | https://headless.body2fit.bodygram.com/sdk.umd.js |
| Beta (latest) | https://headless.stg.body2fit.bodygram.cc/sdk.umd.js |
ES build
A standard ES module. Import it with <script type="module"> or a bundler.
| Channel | URL |
|---|---|
| Prod (stable) | https://headless.body2fit.bodygram.com/sdk.es.js |
| Beta (latest) | https://headless.stg.body2fit.bodygram.cc/sdk.es.js |
<script type="module">
import BodygramSDK from 'https://headless.body2fit.bodygram.com/sdk.es.js';
const sdk = new BodygramSDK({ clientKey: 'YOUR_CLIENT_KEY' });
</script>Vanilla HTML
Add the UMD script to your page before your app script, typically in <head>:
<!-- 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>BodygramSDK is then available globally:
<script>
const sdk = new BodygramSDK({ clientKey: 'YOUR_CLIENT_KEY' });
</script>React
Add the script to your public/index.html:
<script src="https://headless.body2fit.bodygram.com/sdk.umd.js"></script>Once loaded, BodygramSDK is available on window throughout your app:
declare global {
interface Window { BodygramSDK: any; }
}
export function SizeFinder() {
async function handleFindSize() {
const sdk = new window.BodygramSDK({
clientKey: 'YOUR_CLIENT_KEY', // ← replace with your client key
locale: 'en',
});
const { front, side } = await sdk.scan();
// continue with estimation and size recommendation...
}
return <button onClick={handleFindSize}>Find my size</button>;
}If you need to load the script dynamically — for example, only on certain pages — you can do so with useEffect:
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://headless.body2fit.bodygram.com/sdk.umd.js';
script.async = true;
document.head.appendChild(script);
return () => { document.head.removeChild(script); };
}, []);Next.js
Add the script to your _document.js or layout.js:
<script src="https://headless.body2fit.bodygram.com/sdk.umd.js"></script>Or use the Next.js Script component inside a page or layout:
import Script from 'next/script';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<>
<Script src="https://headless.body2fit.bodygram.com/sdk.umd.js" />
{children}
</>
);
}For more on loading third-party scripts in Next.js, see the Next.js Script documentation.
When using the SDK in a component, add the 'use client' directive since the SDK is browser-only:
'use client';
declare global {
interface Window { BodygramSDK: any; }
}
export function SizeFinder() {
async function handleFindSize() {
const sdk = new window.BodygramSDK({
clientKey: 'YOUR_CLIENT_KEY', // ← replace with your client key
locale: 'en',
});
const { front, side } = await sdk.scan();
// continue with estimation and size recommendation...
}
return <button onClick={handleFindSize}>Find my size</button>;
}Vue
Add the script to your public/index.html:
<script src="https://headless.body2fit.bodygram.com/sdk.umd.js"></script>Or load it dynamically in your component:
<template>
<button @click="handleFindSize" :disabled="!ready">
Find my size
</button>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
const sdk = ref<any>(null);
const ready = ref(false);
let scriptEl: HTMLScriptElement | null = null;
onMounted(() => {
scriptEl = document.createElement('script');
scriptEl.src = 'https://headless.body2fit.bodygram.com/sdk.umd.js';
scriptEl.async = true;
scriptEl.onload = () => {
sdk.value = new (window as any).BodygramSDK({
clientKey: 'YOUR_CLIENT_KEY', // ← replace with your client key
locale: 'en',
});
ready.value = true;
};
document.head.appendChild(scriptEl);
});
onUnmounted(() => {
if (scriptEl) document.head.removeChild(scriptEl);
});
async function handleFindSize() {
if (!sdk.value) return;
const { front, side } = await sdk.value.scan();
// continue with estimation and size recommendation...
}
</script>