Guia rápido do SDK Web

Antes de começar

• A clientId emitido por SPREEAI para seu ambiente aprovado.
• Uma peça de roupa que tenha sido processada, pertence à sua conta e está disponível para experimentação.
• Uma página de produto que você pode editar e um contêiner com um ID HTML exclusivo.

1. Instale

npm install @spreeai/web-sdk@3.0.0

A folha de estilo faz parte do pacote e deve ser incluída no seu pacote.

2. Adicione um contêiner

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

3. Inicialize e renderize

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() pode retornar null. Verifique o resultado antes da renderização e inicialize uma vez por página, em vez de cada botão.

4. Confira o resultado

1. Carregue a página do produto. Uma peça de roupa válida e disponível resulta em um botão de teste.
2. Abra o provador e confirme a peça e a cor pretendida.
3. Feche e reabra-o. Verifique a experiência em um telefone e um desktop.
4. Experimente uma peça de roupa indisponível em seu ambiente de teste. Confirme se seu produto normal e o caminho de checkout permanecem utilizáveis.

Para onde ir a seguir