Web SDK Schnellstart

Bevor Sie beginnen

• A clientId ausgestellt von SPREEAI für Ihre zugelassene Umgebung.
• Ein Kleidungsstück, dessen Einnahme abgeschlossen ist, gehört zu Ihrem Konto und steht zum Anprobieren zur Verfügung.
• Eine Produktseite, die Sie bearbeiten können, und ein Container mit einer eindeutigen HTML-ID.

1. Installieren

npm install @spreeai/web-sdk@3.0.0

Das Stylesheet ist Teil des Pakets und muss in Ihrem Bundle enthalten sein.

2. Fügen Sie einen Container hinzu

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

3. 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 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() kann zurückkehren null. Überprüfen Sie das Ergebnis vor dem Rendern und initialisieren Sie es einmal pro Seite und nicht für jede Schaltfläche.

4. Überprüfen Sie das Ergebnis

1. Laden Sie die Produktseite. Ein gültiges, verfügbares Kleidungsstück stellt einen Anprobeknopf dar.
2. Öffnen Sie die Umkleidekabine und bestätigen Sie das gewünschte Kleidungsstück und die Farbe.
3. Schließen Sie es und öffnen Sie es erneut. Überprüfen Sie das Erlebnis auf einem Telefon und einem Desktop.
4. Probieren Sie ein nicht verfügbares Kleidungsstück in Ihrer Testumgebung aus. Bestätigen Sie, dass Ihr normaler Produkt- und Bezahlpfad weiterhin nutzbar ist.

Wohin als nächstes?