JavaScript Virtual Try-On SDK

Open Credentials in Settings. Copy your publishable key (dress_pk_…) and secret key (dress_sk_…). Keep the secret key on your server only - never in browser code.

On the same page, enter and save your storefront URL - the public site where try-on runs (e.g. https://your-store.com). DressApp uses this to allow your domain for SDK calls.

Add the keys to your backend environment (secrets manager or .env):

DRESSAPP_API_BASE_URL=https://api.dressapp.me
DRESSAPP_MERCHANT_SECRET=dress_sk_live_…

# Optional: expose publishable key to the browser
DRESSAPP_PUBLISHABLE_KEY=dress_pk_live_…
NEXT_PUBLIC_DRESSAPP_PUBLISHABLE_KEY=dress_pk_live_…
NEXT_PUBLIC_DRESSAPP_API_BASE_URL=https://api.dressapp.me

Restart your server after updating env vars so session and product routes pick up the new values.

Add one route on your server, for example GET /api/dressapp-session. It calls DressApp with your secret key and returns the access_token to your frontend.

Authorization: Bearer dress_sk_live_…

{
  "external_user_ref": "<stable shopper id>"
}

// Response: { "access_token": "…" }

Use your logged-in customer ID, or a persistent anonymous cookie ID for guests.

When products are created or updated, call POST /partner/v1/products with the same secret key. Save the returned product_id next to that SKU.

{
  "external_id": "SKU-001",
  "title": "Blue dress",
  "url": "https://yoursite.com/p/blue-dress",
  "image_urls": ["https://yoursite.com/img/1.jpg"],
  "sizes": ["XS", "S", "M", "L"],
  "colors": [{"label": "Navy"}, {"label": "Black"}]
}

On every product page, always pass externalProductId, fallbackSizesJson, and fallbackColorsJson to the dock - even when you already have a DressApp productId. The SDK calls GET /partner/v1/embed/resolve-product to map your SKU to a catalog row and backfill sizes/colors. Any PDP URL structure works - passing the product explicitly is what marks the page as a product page.

<PartnerStudioDock
  publishableKey="dress_pk_live_…"
  apiBase="https://api.dressapp.me"
  getAccessToken={…}
  productId={dressAppProductId}
  externalProductId="SKU-001"
  storeProductUrl={window.location.href}
  fallbackSizesJson='["XS","S","M","L"]'
  fallbackColorsJson='[{"label":"Navy"},{"label":"Black"}]'
  mountPdpTryonButton
/>

Give the inline button a mount point on your product template - one of three options:

• A placeholder slot right above your Add to cart button:
• <div data-dressapp-pdp-tryon-block></div>
• (most reliable).
• Mark your buy button with
• data-dressapp-pdp-anchor
• - the button injects above it.
• Pass
• pdpAnchorSelector="#add-to-cart"
• (React prop, mount option, or
• data-pdp-anchor-selector
• attr).

<div class="product-actions">
  <div data-dressapp-pdp-tryon-block></div>
  <button id="add-to-cart">Add to cart</button>
</div>

The button runs the full flow on-page: size pills, Front/Back picker, model creation modal for first-time shoppers, inline progress cards, and a result modal.

After you fetch the shopper token from your backend:

import { DressApp } from "@dressapp/web-sdk";

await DressApp.enable({
  publishableKey: "dress_pk_live_…",
  apiBase: "https://api.dressapp.me",
  accessToken: shopperJwt,
});

Register your cart once so the try-on result modal shows Add tried size to cart. Throw an error containing "out of stock" to surface the out-of-stock state.

DressApp.setAddToCartHandler(async ({ productPageUrl, sizeLabel, colorLabel }) => {
  await myCart.add({ url: productPageUrl, size: sizeLabel, color: colorLabel });
}, { cartUrl: "/cart" });

On single-page apps, rebind the product on route changes instead of reloading:

DressApp.setProduct({
  externalProductId: "SKU-002",
  storeProductUrl: location.href,
  fallbackSizesJson: '["S","M","L"]',
  fallbackColorsJson: '[{"label":"White"}]',
});

DressApp.setProduct({}); // clear when leaving product pages

No redirect needed. When a shopper without a body model presses Try it onon the PDP, a theme-matched modal opens on the page (photos → details → model ready). The floating dock's My Model tab offers the same wizard when enabled.

On the PDP: press Try it on, pick a size and Front/Back angle, and the try-on runs inline with a progress card and a result modal. Headless alternative for custom UIs:

await DressApp.requestTryOn(productId, { async: true })

// Poll until complete:
DressApp.getTryOnJob(jobId)