← 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. Get keys

    DressApp ops creates a merchant via POST /partner/v1/admin/merchants. You receive a secret key (dress_sk_…) and publishable key (dress_pk_…). Store the secret in your secrets manager.

  2. Allow your domain

    Add your storefront origin to the merchant's allowed_origins, or ask DressApp to add it to PARTNER_CORS_ORIGINS on the API.

  3. 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.

  4. 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"]
}

  5. Frontend: install the SDK

    npm
    npm install @dressapp/web-sdk

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

  6. 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://YOUR_DRESSAPP_API",
  accessToken: shopperJwt,
});

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

  8. 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.

  9. Ship it

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