Web SDK quickstart

Before you start

• A clientId issued by SPREEAI for your approved environment.
• A garment that has completed ingestion, belongs to your account and is available for try-on.
• A product page you can edit and a container with a unique HTML ID.

1. Install

npm install @spreeai/web-sdk@3.0.0

The stylesheet is part of the package and must be included in your bundle.

2. Add a container

<div id="spreeai-try-on"></div>

3. Initialize and render

import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

// Add <div id="spreeai-try-on"></div> to your product page.
const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
  });
} else {
  // Keep the normal product and purchase journey available.
  console.warn("SPREEAI could not initialize.");
}

init() can return null. Check the result before rendering, and initialize once per page rather than for each button.

4. Check the result

1. Load the product page. A valid, available garment renders a try-on button.
2. Open the fitting room and confirm the intended garment and color.
3. Close and reopen it. Check the experience on a phone and a desktop.
4. Try an unavailable garment in your test environment. Confirm your normal product and checkout path remains usable.

Where to go next