Integrare SDK web

Utilizare @spreeai/web-sdk pentru o vitrină web personalizată sau fără ecran.

Aceste exemple vizează publicațiile versiunea 3.0.0 pachet. Sunați init() o dată și păstrează rezultatul său care poate fi acceptat ca valoare nulla. Partenerul este rezolvat din clientId; Nu treceţi partnerId la versiunea 3 init()Integrările existente v2 trebuie să urmeze ghidul oficial de actualizare înainte de a schimba versiunile.

Instala

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

Includeți foaia de stil SDK documentată pentru versiunea SDK instalată.

Inițializare și randare

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() returnează null când autentificarea eșuează. Protejați toate apelurile de randare.

Dimensionare

v3.0.0 expune dimensionarea în cadrul experienței de probă, mai degrabă decât separat. sdk.renderSizingButton() metodă. Pentru o piesă de îmbrăcăminte cu date de mărime aprobate, activați acel flux pe butonul de probare:

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

Activați dimensionarea numai după ce datele despre îmbrăcăminte și configurația partenerului sunt gata.

Evenimente

SDK-ul public documentează apelurile inverse la nivel de client pentru butonul „Încercare” și acțiunile de adăugare în coș. Conectați apelurile inverse la straturile de analiză și coș existente ale vitrinei. Nu plasați imagini ale clienților, acreditări sau date personale inutile în sarcinile analitice.

Îndrumări de producție

Inițializați o dată pe pagină.
Redați doar pentru articolele de îmbrăcăminte eligibile.
Transmiteți identificatori stabili de catalog.
Nu includeți secretele clientului în codul browserului.
Testați modificările variantelor și tranzițiile de rută în aplicațiile cu o singură pagină.
Păstrați focalizarea tastaturii și o etichetă accesibilă pentru punctul de intrare.
Validați stările de încărcare, de eșec și de indisponibilitate.
Monitorizați performanța paginii de produs înainte și după activarea integrării.