Web SDK-integratie

Gebruik @spreeai/web-sdk voor een op maat gemaakte of headless webwinkel.

Deze voorbeelden hebben betrekking op de gepubliceerde v3.0.0 pakket. Bel init() eenmaal en bescherm het niet-vernietigende resultaat. De partner wordt opgelost vanuit clientId; ga niet voorbij partnerId naar v3 init(). Bestaande v2-integraties moeten de officiële upgradehandleiding volgen voordat ze van versie veranderen.

Installeren

npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0

Voeg het SDK-stylesheet toe dat is gedocumenteerd voor de geïnstalleerde SDK-versie.

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 the product page first.
const sdk = await init({ clientId: "your-client-id" });

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "your-garment-id" }],
    enableAddToCart: true,
  });
}

init() retourneert null Als de authenticatie mislukt, beveilig dan alle render-aanroepen.

Maatvoering

In versie 3.0.0 is de maatvoering geïntegreerd in het pasproces zelf, in plaats van in een apart venster. sdk.renderSizingButton() methode. Voor een kledingstuk met goedgekeurde maatgegevens, activeer je die workflow via de pasknop:

await sdk?.renderTryOnButton({
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "your-garment-id" }],
  enableSizingRecommendation: true,
});

Schakel maatvoering pas in nadat de kledinggegevens en partnerconfiguratie gereed zijn.

Evenementen

De openbare SDK documenteert client-side callbacks voor de 'Probeer'-knop en de 'Toevoegen aan winkelwagen'-acties. Koppel de callbacks aan de bestaande analyse- en winkelwagenlagen van de webwinkel. Plaats geen klantafbeeldingen, inloggegevens of onnodige persoonlijke gegevens in de analysepayloads.

Productie begeleiding

Initialiseer één keer per pagina.
Render alleen voor in aanmerking komende kledingstukken.
Geef stabiele catalogus-ID's door.
Houd klantgeheimen buiten de browsercode.
Test variantwijzigingen en routeovergangen in single-page applicaties.
Behoud de toetsenbordfocus en een toegankelijk label voor het toegangspunt.
Valideer de laad-, fout- en niet-beschikbare statussen.
Controleer de prestaties van productpagina's voor en na het inschakelen van de integratie.