Intégration du SDK Web

Utiliser @spreeai/web-sdk pour une boutique en ligne personnalisée ou sans interface graphique.

Ces exemples ciblent les publications v3.0.0 forfait. Appelez init() une fois et protéger son résultat annulable. Le partenaire est résolu à partir de clientId; Ne pas passer partnerId à v3 init()Les intégrations v2 existantes doivent suivre le guide de mise à niveau officiel avant de changer de version.

Installer

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

Incluez la feuille de style du SDK documentée pour la version du SDK installée.

Initialiser et afficher

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() retours null En cas d'échec de l'authentification, protégez tous les appels de rendu.

Tailles

La version 3.0.0 intègre le dimensionnement directement dans l'outil d'essayage, au lieu de le proposer dans une section séparée. sdk.renderSizingButton() Méthode. Pour un vêtement dont les données de taille sont approuvées, activez cette fonction via le bouton d'essayage :

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

N'activez le dimensionnement qu'une fois les données du vêtement et la configuration du partenaire prêtes.

Événements

Le kit de développement logiciel (SDK) public décrit les fonctions de rappel côté client pour le bouton « Essayer » et l’ajout au panier. Connectez ces fonctions aux modules d’analyse et de panier existants de votre boutique en ligne. N’incluez pas d’images, d’identifiants ou de données personnelles non essentielles dans les requêtes d’analyse.

Conseils de production

Initialiser une fois par page.
Rendu uniquement pour les vêtements éligibles.
Transmettre les identifiants de catalogue stables.
Ne laissez pas les secrets du client hors du code du navigateur.
Tester les changements de variantes et les transitions de route dans les applications monopages.
Conserver le focus clavier et une étiquette accessible pour le point d'entrée.
Valider les états de chargement, d'échec et d'indisponibilité.
Surveillez les performances de la page produit avant et après l'activation de l'intégration.