Integración del SDK web

Usar @spreeai/web-sdk para una tienda web personalizada o sin interfaz gráfica.

Estos ejemplos se dirigen a la publicación v3.0.0 paquete. Llamar init() una vez y protege su resultado anulable. El socio se resuelve desde clientId; No pasar partnerId a v3 init()Las integraciones v2 existentes deben seguir la guía de actualización oficial antes de cambiar de versión.

Instalar

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

Incluya la hoja de estilo del SDK documentada para la versión del SDK instalada.

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 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() devoluciones null Cuando falla la autenticación. Proteger todas las llamadas de renderizado.

Apresto

La versión 3.0.0 muestra la información de tallas dentro de la experiencia de prueba, en lugar de una sección aparte. sdk.renderSizingButton() método. Para una prenda con datos de tallas aprobados, habilite ese flujo en el botón de prueba:

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

Habilite la función de tallaje solo después de que los datos de la prenda y la configuración del socio estén listos.

Eventos

El SDK público documenta las funciones de devolución de llamada del lado del cliente para el botón "Probar" y la acción "Agregar al carrito". Conecte estas funciones a las capas de análisis y carrito existentes de la tienda en línea. No incluya imágenes, credenciales ni datos personales innecesarios de los clientes en las cargas útiles de análisis.

Orientación de producción

Inicializar una vez por página.
Renderizar únicamente para prendas elegibles.
Pasar identificadores de catálogo estables.
Mantén los secretos del cliente fuera del código del navegador.
Pruebe los cambios de variantes y las transiciones de ruta en aplicaciones de una sola página.
Conservar el foco del teclado y una etiqueta accesible para el punto de entrada.
Validar los estados de carga, fallo y no disponibilidad.
Supervise el rendimiento de la página del producto antes y después de habilitar la integración.