OnFitt SDK & API Reference

#Quick start

Paste one <script> tag on your product page. The SDK auto-detects your product image and injects a “Try it on” button beneath it.

<script
  src="https://www.getonfitt.com/api/sdk"
  data-api-key="YOUR_API_KEY">
</script>

<link rel="preconnect" href="https://getonfitt.com">

#Product image detection

The SDK resolves the clothing item to send to the AI in this order of priority:

1. Explicit URL list: data-clothing-urls
2. Gallery selector: data-product-images (CSS selector for <img> tags)
3. og:image meta tag: automatic, no configuration needed

Multi-image gallery (AI picks the best angle for best results):

<script
  src="https://www.getonfitt.com/api/sdk"
  data-api-key="sk_live_..."
  data-product-images=".product-gallery img">
</script>

Explicit URL list (JSON array):

data-clothing-urls='["https://yourstore.com/jacket-front.jpg","https://yourstore.com/jacket-side.jpg"]'

#CTA button

Customize the injected button with data-* attributes or via the Dashboard's Customize panel. Script-tag attributes always take precedence over dashboard settings.

Themes

Four built-in themes, or go fully custom with your own hex.

Button attributes

<script
  src="https://www.getonfitt.com/api/sdk"
  data-api-key="sk_live_..."
  data-theme="custom"
  data-color="#e11d48"
  data-text-color="#ffffff"
  data-radius="8"
  data-button-label="See it on me">
</script>

#Modal theming

The try-on modal inherits your brand colours. Every attribute below can also be set permanently through the Dashboard without touching code.

Dark modal example:

<script
  src="https://www.getonfitt.com/api/sdk"
  data-api-key="sk_live_..."
  data-theme="dark"
  data-accent-color="#f59e0b"
  data-modal-bg="#18181b"
  data-modal-title-color="#ffffff"
  data-close-icon-color="#71717a"
  data-divider-color="#27272a"
  data-powered-by-color="#52525b">
</script>

#Share

After a successful try-on, a Share your look button appears. On mobile it triggers the native share sheet; on desktop it shows a copy-link popover. Configure what gets shared:

#Dashboard-driven config

Every attribute above can be set once in the Dashboard's Customize panel and applied globally. No code changes needed. The SDK fetches your saved config on init and caches it for 1 hour.

#API key security

Your API key is embedded in client-side HTML and is visible to anyone who views your page source. To prevent unauthorised use, configure a domain allowlist in the Dashboard's Security panel.

#JavaScript API

Once the SDK script is loaded, window.OnFitt exposes two methods.

OnFitt.open(cfg)

Opens the try-on modal programmatically. Useful for custom button placements or testing.

// Open the modal with a specific product image
window.OnFitt.open({
  apiKey: "sk_live_...",
  _clothingUrls: ["https://yourstore.com/jacket.jpg"],
  accentColor: "#e11d48",
  modalBg: "#18181b",
  modalTitleColor: "#ffffff",
});

OnFitt.init(cfg)

Runs the full init flow (usage check, then remote config fetch, then button injection). Use this when loading the SDK dynamically.

const s = document.createElement("script");
s.src = "https://www.getonfitt.com/api/sdk";
s.onload = () => window.OnFitt.init({
  apiKey: "sk_live_...",
  clothingUrls: ["https://yourstore.com/jacket.jpg"],
});
document.head.appendChild(s);

#REST API reference

Full OpenAPI spec. Authenticate with your API key as Authorization: Bearer sk_live_....