Integração do SDK Web

Usar @spreeai/web-sdk para uma loja virtual personalizada ou sem interface gráfica.

Esses exemplos têm como alvo o publicado v3.0.0 pacote. Ligue init() uma vez e proteja seu resultado anulável. O parceiro é resolvido a partir de clientId; Não passe partnerId para v3 init()As integrações existentes da versão 2 devem seguir o guia de atualização oficial antes de mudar de versão.

Instalar

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

Inclua a folha de estilo do SDK documentada para a versão do SDK instalada.

Inicializar e 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() retornos null Quando a autenticação falhar. Proteja todas as chamadas de renderização.

Tamanhos

A versão 3.0.0 expõe o dimensionamento dentro da experiência de experimentação, em vez de uma seção separada. sdk.renderSizingButton() Método. Para uma peça de roupa com dados de tamanho aprovados, habilite esse fluxo no botão de experimentar:

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

Ative a definição de tamanhos somente depois que os dados da peça de roupa e a configuração do parceiro estiverem prontos.

Eventos

O SDK público documenta os callbacks do lado do cliente para o botão "Experimentar" e as ações de adicionar ao carrinho. Conecte os callbacks às camadas de análise e carrinho existentes da loja virtual. Não inclua imagens de clientes, credenciais ou dados pessoais desnecessários nos payloads de análise.

Guia de produção

Inicialize uma vez por página.
Renderização disponível apenas para peças de vestuário elegíveis.
Passe identificadores de catálogo estáveis.
Mantenha os segredos do cliente fora do código do navegador.
Teste alterações de variantes e transições de rotas em aplicativos de página única.
Mantenha o foco do teclado e um rótulo acessível para o ponto de entrada.
Validar os estados de carregamento, falha e indisponibilidade.
Monitore o desempenho da página do produto antes e depois de ativar a integração.