Integrasi Web SDK

Menggunakan @spreeai/web-sdk untuk toko online kustom atau headless.

Contoh-contoh ini menargetkan publikasi. v3.0.0 paket. Hubungi init() sekali dan menjaga hasil yang dapat dinullkan. Mitra diselesaikan dari clientIdjangan lewat partnerId ke v3 init()Integrasi v2 yang sudah ada harus mengikuti panduan peningkatan resmi sebelum mengubah versi.

Memasang

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

Sertakan stylesheet SDK yang didokumentasikan untuk versi SDK yang terpasang.

Inisialisasi dan render

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() pengembalian null Saat otentikasi gagal. Lindungi semua panggilan render.

Perekat

Versi 3.0.0 menampilkan informasi ukuran di dalam pengalaman mencoba pakaian, bukan secara terpisah. sdk.renderSizingButton() Metode. Untuk pakaian dengan data ukuran yang telah disetujui, aktifkan alur tersebut pada tombol coba pakai:

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

Aktifkan pengaturan ukuran hanya setelah data pakaian dan konfigurasi mitra siap.

Acara

SDK publik mendokumentasikan callback sisi klien untuk tombol Coba-Pakai dan tindakan tambah ke keranjang. Hubungkan callback ke lapisan analitik dan keranjang yang sudah ada di toko online. Jangan menyertakan gambar pelanggan, kredensial, atau data pribadi yang tidak perlu dalam payload analitik.

Panduan produksi

Inisialisasi sekali per halaman.
Hanya tampilkan gambar untuk pakaian yang memenuhi syarat.
Meneruskan pengidentifikasi katalog yang stabil.
Jauhkan rahasia klien dari kode browser.
Menguji perubahan varian dan transisi rute dalam aplikasi satu halaman.
Pertahankan fokus keyboard dan label yang mudah diakses untuk titik masuk.
Validasi status pemuatan, kegagalan, dan ketidaktersediaan.
Pantau kinerja halaman produk sebelum dan sesudah mengaktifkan integrasi.