Pasar raya
SPREEAI untuk pembangun
Bina bilik persalinan
ke dalam setiap skrin.
Mulakan dengan Shopify, SDK Web atau integrasi API yang diluluskan. Hab ini membawa pasukan anda daripada keputusan pertama kepada pelancaran yang diuji.
- 04
- laluan integrasi
- v2.1
- Web SDK semasa
- 01
- senarai semak pelancaran
Pilih laluan anda
Mula di mana anda
timbunan perdagangan wujud.
Pilih laluan pantas yang sesuai dengan storefront anda. Anda boleh beralih daripada apl terurus kepada integrasi SDK atau API tersuai apabila pengalaman itu berkembang.
Siaran langsungAkan datang
Laluan terpantas
Aplikasi Shopify
Pasang, segerakkan pakaian, sesuaikan dan lancarkan tanpa backend tersuai.Terbaik untuk storefront Shopify ↗ v2.1.0Web tersuai
SDK Web
Kawal kedudukan, gaya, acara, saiz dan kelakuan tambah ke troli.JavaScript + TypeScript ↗ DokumenPeranti mudah alih asli
SDK iOS
Bawa pengalaman SPREEAI ke dalam perjalanan beli-belah iOS sedia ada.Buka panduan iOS ↗ DokumenPeranti mudah alih asli
SDK Android
Gabungkan percubaan maya ke dalam pengalaman produk Android dengan kawalan asli.Buka panduan Android ↗ Akses rakan kongsiSistem tersuai
API Awam
Gunakan rujukan API yang diluluskan untuk aliran kerja sebelah pelayan dan katalog.Rujukan API Buka ↗Permulaan pantas SDK Web
Dari pemasangan hingga
butang berfungsi.
Sahkan sekali, kemudian paparkan percubaan atau penentuan saiz di mana-mana sahaja di halaman. Gunakan kelayakan ujian yang dikeluarkan semasa pendaftaran dan jangan sekali-kali meletakkan rahsia pelanggan dalam kod pelayar.
npm install @spreeai/web-sdk
# atau
yarn add @spreeai/web-sdkimport { init } from "@spreeai/web-sdk";
const sdk = await init({
clientId: "your-client-id",
partnerId: "your-partner-id",
});
if (sdk) {
await sdk.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
enableAddToCart: true,
});
}events: {
onTryOnButtonClick: (event) => {
analytics.track("try_on_started", event);
},
onAddToCartClicked: async (event) => {
// Sambungkan ke alur kerja troli sedia ada anda.
},
}Model integrasi
Empat sistem.
Satu detik pelanggan.
ID produk, varian, imej dan konteks perdagangan.
Pakaian bergerak melalui status pemprosesan, semakan, dan kesediaan.
Kedai anda meminta pengalaman untuk produk yang layak.
Cuba, cari saiz, lengkapkan gaya dan kembali ke pembayaran.
Laluan pengeluaran
Ambil integrasi tersebut
melepasi garisan penamat.
Pelancaran yang bersih adalah lebih daripada sekadar butang yang berfungsi. Gunakan urutan ini untuk menyelaraskan akses, aset, tingkah laku, kualiti dan pengukuran.
- 01Pemilik · Produk + perdagangan
Tentukan skop perjalanan pertama
Pilih satu saluran, kumpulan katalog, detik pelanggan dan ukuran kejayaan.
- 02Pemilik · Kejuruteraan
Sediakan akses
Sahkan ID rakan kongsi, kelayakan pelanggan yang diluluskan, kebenaran storefront dan persekitaran staging.
- 03Pemilik · Pasukan katalog
Hantar aset yang bersih
Sediakan satu pakaian bagi setiap imej, pandangan hadapan diperlukan, resolusi tinggi, pencahayaan bersih dan nama fail sejajar SKU.
- 04Pemilik · Bahagian hadapan
Integrasikan ke dalam pementasan
Hanya paparkan pada produk yang layak, sambungkan varian dan tingkah laku troli, dan sesuaikan titik masuk dengan jenama.
- 05Pemilik · Jaminan Kualiti + jenama
Jalankan QA pelancaran
Uji peranti mudah alih dan desktop, liputan pelayar, kebolehaksesan, prestasi, kesetiaan visual dan keadaan kegagalan.
- 06Pemilik · Perdagangan + analitis
Dayakan dan ukur
Hidupkan produk Sedia, terbitkan pengalaman berperingkat dan pantau penerimaan, penyiapan dan penukaran.
Garis asas aset
Input yang baik menghasilkan keputusan yang lebih baik.
- JPEG or PNG
- 2,000 × 2,000 px minimum
- Front view required
- Back view recommended
- Neutral, even lighting
- SKU or style ID in filename
Developer reference
Find the next
useful answer.
Start here
Getting Started
Understand access, supported platforms and the first decisions your team needs to make.
Official reference ↗ Managed integrationShopify onboarding
Install the app, accept agreements, sync garments, customize the button and go live.
Official reference ↗ SDK WebAPI surface
Review initialization, render options, sizing, customization and typed interfaces.
Official reference ↗ Partner APIPublic API reference
Explore the approved server-side interface available to authenticated partners.
Swagger reference ↗ QualityGarment assets
Prepare product imagery and metadata that move cleanly through ingestion and review.
SPREEAI guide ↗ ProductionQA & launch
Use the shared browser, performance, accessibility and go-live checklist.
SPREEAI guide ↗ SupportTroubleshooting
Resolve the most common authentication, eligibility, rendering and performance issues.
SPREEAI guide ↗ DocumentationImplementation guides
Browse public quickstarts, asset standards, launch checklists and troubleshooting guidance.
Open documentation ↗No matching developer resources. Try “Shopify,” “SDK,” “assets,” or “QA.”
Build for production
The details that protect
the customer experience.
Security
Keep secrets server-side, use only issued environments and rotate credentials through the partner workflow.
Privacy
Request customer imagery with clear consent and align data handling with your approved integration plan.
Performance
Load the experience where it is needed, test real devices and monitor product-page regressions.
Accessibility
Preserve keyboard access, focus order, accessible names and a usable path when the experience is unavailable.
Developer FAQ
Questions before
the first commit.
Which integration should we choose?
Use the Shopify App for the fastest managed path, the Web SDK for custom or headless web placement, the native SDKs for app experiences, and the approved API reference for server-side workflows agreed during onboarding.
Where do credentials come from?
SPREEAI issues the partner ID and approved credentials during onboarding. The browser SDK uses a client ID and partner ID. Never embed a client secret in front-end code.
Does the Shopify App require API keys?
The current Shopify App onboarding flow connects the store after the required agreements and subscription step; the managed app does not require copying keys into the setup screen.
Why does the Try-On button not appear?
Confirm the garment has completed processing, is enabled for Try-On, maps to the active product or variant, and that the app block or SDK container is present on the product template.
Which client events are available?
The documented SDK callbacks cover Try-On button clicks and add-to-cart interactions. Connect them to your analytics layer without including customer imagery or unnecessary personal data.
Are server webhooks available?
Server-push webhooks are not part of the currently published SDK documentation. Scope any server-side event requirement with Partner Engineering before relying on it.
Where do developers get help?
Use the technical support path provided during onboarding or email support@spreeai.com. Include the environment, product ID, browser or device, timestamp and a concise reproduction path—never send secrets.
When will Amazon Partner Network support be available?
The Amazon Partner Network integration is in development. It is intentionally marked Coming Soon until the onboarding and production interface are ready for external developers.
Ready to build?