Démarrage rapide du SDK Web

Avant de commencer

• A clientId délivré par SPREEAI pour votre environnement approuvé.
• Un vêtement dont l'ingestion est terminée, appartient à votre compte et est disponible pour l'essayage.
• Une page produit que vous pouvez modifier et un conteneur avec un identifiant HTML unique.

1. Installer

npm install @spreeai/web-sdk@3.0.0

La feuille de style fait partie du package et doit être incluse dans votre bundle.

2. Ajouter un conteneur

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

3. Initialiser et rendre

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() peut revenir null. Vérifiez le résultat avant le rendu et initialisez une fois par page plutôt que pour chaque bouton.

4. Vérifiez le résultat

1. Chargez la page produit. Un vêtement valide et disponible donne lieu à un bouton d'essai.
2. Ouvrez la cabine d'essayage et confirmez le vêtement et la couleur souhaités.
3. Fermez-le et rouvrez-le. Vérifiez l'expérience sur un téléphone et un ordinateur de bureau.
4. Essayez un vêtement indisponible dans votre environnement de test. Confirmez que votre produit normal et le chemin de paiement restent utilisables.

Où aller ensuite