Pamilihan
SPREEAI para sa mga developer
Buuin ang fitting room
sa bawat screen.
Magsimula sa Shopify, sa Web SDK, o sa isang aprubadong API integration. Ang hub na ito ang magdadala sa iyong team mula sa unang desisyon hanggang sa isang nasubukang launch.
- 04
- mga landas ng integrasyon
- v2.1
- kasalukuyang Web SDK
- 01
- checklist sa paglulunsad
Piliin ang iyong landas
Magsimula kung saan ang iyong
Buhay ang commerce stack.
Piliin ang pinakamabilis na landas na akma sa iyong storefront. Maaari kang lumipat mula sa isang managed app patungo sa custom SDK o API integration habang lumalaki ang karanasan.
MabuhayMalapit na
Pinakamabilis na daan
Shopify App
I-install, i-sync ang mga damit, i-customize at ilunsad nang walang custom backend.Pinakamainam para sa mga Shopify storefront ↗ v2.1.0Custom na web
Web SDK
Kontrolin ang pagkakalagay, estilo, mga kaganapan, laki, at kilos ng add-to-cart.JavaScript + TypeScript ↗ Mga DokumentoKatutubong mobile
iOS SDK
Dalhin ang karanasan ng SPREEAI sa isang umiiral nang paglalakbay sa pamimili sa iOS.Buksan ang gabay sa iOS ↗ Mga DokumentoKatutubong mobile
Android SDK
Isama ang try-on sa isang karanasan ng produkto sa Android na may mga katutubong kontrol.Buksan ang gabay sa Android ↗ Access ng kasosyoMga custom na sistema
Mga Pampublikong API
Gamitin ang aprubadong API reference para sa mga workflow sa server-side at catalogue.Buksan ang sanggunian ng API ↗Mabilisang Gabay sa Web SDK
Mula sa pag-install hanggang
gumaganang pindutan.
Mag-authenticate minsan, pagkatapos ay i-render ang try-on o sizing kahit saan sa pahina. Gamitin ang mga test credential na ibinigay sa panahon ng onboarding at huwag na huwag ilagay ang client secret sa code ng browser.
npm install @spreeai/web-sdk
# o
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) => {
// Kumonekta sa iyong kasalukuyang workflow ng cart.
},
}Ang modelo ng integrasyon
Apat na sistema.
Isang sandali ng customer.
Mga ID ng produkto, variant, mga imahe at konteksto ng merchandising.
Ang mga damit ay dumadaan sa mga yestado ng pagproseso, pagsusuri, at pagiging handa.
Humihiling ang iyong storefront ng karanasan para sa isang kuwalipikadong produkto.
Subukan, maghanap ng sukat, kumpletuhin ang hitsura at bumalik sa pag-check out.
Landas ng produksyon
Kunin ang integrasyon
sa kabila ng finish line.
Ang isang malinis na paglulunsad ay higit pa sa isang gumaganang pindutan. Gamitin ang pagkakasunud-sunod na ito upang i-align ang access, mga asset, pag-uugali, kalidad at pagsukat.
- 01May-ari · Produkto + komersyo
Tukuyin ang saklaw ng unang paglalakbay
Pumili ng isang channel, grupo ng katalogo, sandali ng customer, at sukatan ng tagumpay.
- 02May-ari · Inhenyeriya
Maghanda ng access
Kumpirmahin ang partner ID, mga aprubadong kredensyal ng kliyente, mga pahintulot sa storefront, at ang staging environment.
- 03May-ari · Koponan ng Katalogo
Isumite ang mga malinis na asset
Magbigay ng isang damit sa bawat larawan, kinakailangan ang harapang view, mataas na resolusyon, malinis na pag-iilaw, at mga pangalan ng file na naka-align sa SKU.
- 04May-ari · Front-end
Isama sa staging
Ipakita lamang sa mga kuwalipikadong produkto, ikonekta ang mga baryante at gawi ng cart, at iugnay ang entry point sa tatak.
- 05May-ari · QA + tatak
Patakbuhin ang launch QA
Subukan ang mobile at desktop, saklaw ng browser, accessibility, performance, visual fidelity, at mga failure state.
- 06May-ari · Komersyo + analitika
I-enable at sukatin
I-on ang mga handang produkto, i-publish ang nakahandang karanasan (staged experience) at subaybayan ang paggamit (adoption), pagtatapos (completion), at conversion.
Basehang yaman
Ang magandang input ay nagbubunga ng mas magandang resulta.
- JPEG o 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 ↗ Web SDKAPI 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?