Web SDK-Integration

Verwenden @spreeai/web-sdk für einen individuell gestalteten oder Headless-Webshop.

Diese Beispiele zielen auf die veröffentlichten Inhalte ab. Version 3.0.0 Paket. Anruf init() einmal und sichert sein annullierbares Ergebnis. Der Partner wird aufgelöst von clientId; nicht passieren partnerId bis Version 3 init(). Bestehende v2-Integrationen sollten vor einem Versionswechsel dem offiziellen Upgrade-Leitfaden folgen.

Installieren

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

Fügen Sie das für die installierte SDK-Version dokumentierte SDK-Stylesheet hinzu.

Initialisieren und rendern

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() Rückgaben null Wenn die Authentifizierung fehlschlägt, werden alle Renderaufrufe abgesichert.

Größenangaben

Version 3.0.0 ermöglicht die Größenanpassung direkt während der Anprobe, anstatt in einem separaten Menü. sdk.renderSizingButton() Methode. Aktivieren Sie bei einem Kleidungsstück mit genehmigten Größenangaben diesen Ablauf über die Anprobe-Schaltfläche:

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

Aktivieren Sie die Größenanpassung erst, nachdem die Kleidungsstückdaten und die Partnerkonfiguration bereit sind.

Veranstaltungen

Das öffentliche SDK dokumentiert clientseitige Rückruffunktionen für die Schaltflächen „Anprobieren“ und „In den Warenkorb“. Verbinden Sie diese Rückruffunktionen mit den bestehenden Analyse- und Warenkorbfunktionen Ihres Shops. Speichern Sie keine Kundenbilder, Zugangsdaten oder unnötige personenbezogene Daten in den Analysedaten.

Produktionsanleitung

Einmal pro Seite initialisieren.
Rendern Sie nur für geeignete Kleidungsstücke.
Übergeben Sie stabile Katalogkennungen.
Halten Sie Client-Geheimnisse aus dem Browsercode fern.
Testen von Variantenänderungen und Routenübergängen in Single-Page-Anwendungen.
Behalten Sie den Tastaturfokus und eine zugängliche Beschriftung für den Einstiegspunkt bei.
Lade-, Fehler- und Nichtverfügbarkeitszustände prüfen.
Überwachen Sie die Leistung der Produktseite vor und nach der Aktivierung der Integration.