← All integrations

SDK

For any website you control. DressApp ships a browser SDK that wraps sessions, model studio, and try-on calls.

Packages

DressApp ships a browser SDK that wraps sessions, model studio, and try-on calls.

  • @dressapp/web-sdk
  • - lightweight JS (
  • DressApp.enable()
  • , try-on buttons, model studio redirect).
  • @dressapp/react-widget
  • - React components (floating studio dock, inline PDP widget). Built on the web SDK.

Setup steps

  1. Credentials & storefront URL

    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):

    Server environment
    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.

  2. Backend: shopper session

    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.

    POST /partner/v1/sessions
    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.

  3. Backend: product sync

    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.

    POST /partner/v1/products
    {
  "external_id": "SKU-001",
  "title": "Blue dress",
  "url": "https://yoursite.com/p/blue-dress",
  "image_urls": ["https://yoursite.com/img/1.jpg"]
}

  4. Frontend: install the SDK

    npm
    npm install @dressapp/web-sdk

# Or for React:
npm install @dressapp/react-widget

  5. Frontend: enable DressApp

    After you fetch the shopper token from your backend:

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

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

  6. First visit: create a model

    Check await DressApp.hasModel(). If false, show a "Create my model" button:

    Open model studio
    DressApp.openModelStudio({ returnUrl: window.location.href })

    The shopper finishes photos on DressApp, then clicks Continue to store to come back.

  7. Try-on

    When hasModel() is true:

    Request try-on
    await DressApp.requestTryOn(productId, { async: true })

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

    Or register webhooks on your server (optional) instead of polling.

  8. Ship it

    Test the full path on HTTPS: session → model → return → try-on on a real product.