Guía de inicio rápido del SDK web

Antes de empezar

• A clientId emitido por SPREEAI para su entorno aprobado.
• Una prenda que ha finalizado la ingestión, pertenece a tu cuenta y está disponible para probársela.
• Una página de producto que puede editar y un contenedor con una ID HTML única.

1. Instalar

npm install @spreeai/web-sdk@3.0.0

La hoja de estilo es parte del paquete y debe incluirse en su paquete.

2. Agrega un contenedor

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

3. Inicializar y renderizar

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() puede regresar null. Verifique el resultado antes de renderizar e inicialícelo una vez por página en lugar de para cada botón.

4. Comprueba el resultado

1. Cargue la página del producto. Una prenda válida y disponible genera un botón de prueba.
2. Abra el probador y confirme la prenda y el color deseados.
3. Ciérrelo y vuelva a abrirlo. Comprueba la experiencia en un teléfono y una computadora de escritorio.
4. Pruebe una prenda que no esté disponible en su entorno de prueba. Confirme que su producto normal y la ruta de pago siguen siendo utilizables.

Adónde ir a continuación