Snelstartgids voor de Web SDK

Voordat je begint

• A clientId uitgegeven door SPREEAI voor uw goedgekeurde omgeving.
• Een kledingstuk dat is ingenomen, hoort bij uw account en kan worden gepast.
• Een productpagina die u kunt bewerken en een container met een unieke HTML-ID.

1. Installeren

npm install @spreeai/web-sdk@3.0.0

De stylesheet maakt deel uit van het pakket en moet in uw bundel worden opgenomen.

2. Voeg een container toe

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

3. Initialiseren en renderen

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() kan terugkeren null. Controleer het resultaat voordat het wordt weergegeven, en initialiseer één keer per pagina in plaats van voor elke knop.

4. Controleer het resultaat

1. Laad de productpagina. Een geldig, beschikbaar kledingstuk levert een pasknoop op.
2. Open de paskamer en bevestig het beoogde kledingstuk en de kleur.
3. Sluit het en open het opnieuw. Bekijk de ervaring op een telefoon en een desktop.
4. Probeer een kledingstuk dat niet beschikbaar is in uw testomgeving. Bevestig dat uw normale product en afrekenpad bruikbaar blijven.

Waar moet je heen?