Rynek
SPREEAI dla deweloperów
Zbuduj przymierzalnię
w każdy ekran.
Zacznij od Shopify, zestawu Web SDK lub zatwierdzonej integracji API. To centrum przeprowadzi Twój zespół od pierwszej decyzji do przetestowanego wdrożenia.
- 04
- ścieżki integracji
- v2.1
- aktualny Web SDK
- 01
- lista kontrolna startowa
Wybierz swoją ścieżkę
Zacznij tam, gdzie twój
stos handlowy żyje.
Wybierz najszybszą ścieżkę dopasowaną do Twojego sklepu. W miarę rozwoju doświadczenia możesz przejść z aplikacji zarządzanej na niestandardową integrację przez SDK lub API.
Na żywoJuż wkrótce
Najszybsza ścieżka
Aplikacja Shopify
Zainstaluj, zsynchronizuj odzież, dostosuj i uruchom bez niestandardowego backendu.Najlepsze dla sklepów Shopify ↗ v2.1.0Niestandardowa strona internetowa
Web SDK
Kontroluj rozmieszczenie, styl, zdarzenia, rozmiar i zachowanie przycisku dodawania do koszyka.JavaScript + TypeScript ↗ DokumentyNatywna aplikacja mobilna
iOS SDK
Wprowadź doświadczenie SPREEAI do istniejącego procesu zakupowego systemu iOS.Otwórz przewodnik dla systemu iOS ↗ DokumentyNatywna aplikacja mobilna
Android SDK
Zintegruj funkcję przymierzania w czasie rzeczywistym z interfejsem aplikacji systemu Android, wykorzystując natywne elementy sterujące.Otwórz przewodnik systemu Android ↗ Dostęp partnerskiSystemy niestandardowe
Publiczne API
Użyj zatwierdzonej dokumentacji API dla przepływów po stronie serwera oraz katalogu.Dokumentacja interfejsu API ↗Szybki start z Web SDK
Od instalacji do
działający przycisk.
Uwierzytelnij raz, a następnie wyrenderuj przymierzalnię lub dobór rozmiaru w dowolnym miejscu na stronie. Użyj danych testowych wydanych podczas wdrażania i nigdy nie umieszczaj sekretu klienta w kodzie przeglądarki.
npm install @spreeai/web-sdk
# lub
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) => {
// Połącz ze swoim istniejącym przepływem koszyka.
},
}Model integracji
Cztery systemy.
Jeden moment klienta.
Identyfikatory produktów, warianty, grafika i kontekst merchandisingowy.
Odzież przechodzi przez etapy przetwarzania, kontroli i gotowości.
Twój sklep żąda prezentacji dla kwalifikującego się produktu.
Przymierz, znajdź swój rozmiar, uzupełnij stylizację i wróc do kasy.
Ścieżka produkcji
Weź integrację
przez linię mety.
Czysty start to coś więcej niż działający przycisk. Użyj tej sekwencji, aby uporządkować dostęp, zasoby, zachowanie, jakość i pomiary.
- 01Właściciel · Produkt + handel
Określ zakres pierwszej ścieżki
Wybierz jeden kanał, grupę katalogową, moment klienta i miarę sukcesu.
- 02Właściciel · Inżynieria
Przygotuj dostęp
Potwierdź identyfikator partnera, zatwierdzone poświadczenia klienta, uprawnienia sklepu oraz środowisko testowe.
- 03Właściciel · Zespół ds. katalogu
Prześlij czyste zasoby
Podaj jedną część garderoby na obrazek, wymagany widok z przodu, wysoka rozdzielczość, czyste oświetlenie i nazwy plików zgodne z kodem SKU.
- 04Właściciel · Front-end
Zintegruj na środowisku staging
Wyświetlaj tylko na kwalifikujących się produktach, powiąż warianty z zachowaniem koszyka i dopasuj punkt wejścia do marki.
- 05Właściciel · QA + marka
Uruchom testy kontroli jakości wdrażania
Przetestuj wersję mobilną i komputerową, kompatybilność przeglądarek, dostępność, wydajność, wierność wizualną oraz stany błędów.
- 06Właściciel · Handel + analityka
Włącz i zmierz
Włącz gotowe produkty, opublikuj przygotowane doświadczenie i monitoruj wskaźniki adopcji, ukończenia oraz konwersji.
Baza zasobów
Dobre dane wejściowe zapewniają lepszy wynik.
- JPEG czy PNG
- minimum 2000 × 2000 px
- Wymagany widok z przodu
- Zalecany widok od tyłu
- Neutralne, równe oświetlenie
- SKU lub identyfikator stylu w nazwie pliku
Dokumentacja dla programistów
Znajdź następny
użyteczna odpowiedź.
Zacznij tutaj
Rozpoczęcie pracy
Poznaj zasady dostępu, obsługiwane platformy oraz pierwsze decyzje, jakie musi podjąć Twój zespół.
Oficjalne źródło ↗ Zarządzana integracjaWdrażanie w Shopify
Zainstaluj aplikację, zaakceptuj umowy, zsynchronizuj odzież, dostosuj przycisk i uruchom transmisję na żywo.
Oficjalne źródło ↗ Web SDKPowierzchnia API
Sprawdź inicjalizację, opcje renderowania, skalowanie, dostosowywanie oraz interfejsy typowane.
Oficjalne źródło ↗ API partnerskieDokumentacja publicznego API
Zapoznaj się z zatwierdzonym interfejsem po stronie serwera dostępnym dla uwierzytelnionych partnerów.
Dokumentacja Swagger ↗ JakośćZasoby odzieżowe
Przygotuj zdjęcia produktów i metadane, które bez problemu przejdą proces wdrażania i weryfikacji.
Przewodnik SPREEAI ↗ ProdukcjaZapewnienie jakości i wdrożenie
Skorzystaj ze wspólnej listy kontrolnej dotyczącej przeglądarek, wydajności, dostępności i wdrożenia.
Przewodnik SPREEAI ↗ WsparcieRozwiązywanie problemów
Rozwiąż najczęstsze problemy z uwierzytelnianiem, uprawnieniami, renderowaniem i wydajnością.
Przewodnik SPREEAI ↗ DokumentacjaPrzewodniki wdrożeniowe
Przeglądaj publiczne szybkie starty, standardy zasobów, listy kontrolne uruchamiania i wskazówki dotyczące rozwiązywania problemów.
Otwórz dokumentację ↗Brak pasujących zasobów dla deweloperów. Spróbuj wpisać “Shopify”, “SDK”, “assets” lub “QA”.”
Skompiluj na produkcję
Szczegóły, które chronią
doświadczenie klienta.
Bezpieczeństwo
Przechowuj sekrety po stronie serwera, korzystaj wyłącznie z udostępnionych środowisk i rotuj poświadczenia w ramach procedury partnerskiej.
Prywatność
Poproś o zdjęcia klientów, uzyskując wyraźną zgodę, i dostosuj przetwarzanie danych do swojego zatwierdzonego planu integracji.
Wydajność
Załaduj to doświadczenie tam, gdzie jest potrzebne, przetestuj prawdziwe urządzenia i monitoruj regresje strony produktu.
Dostępność
Zachowaj dostęp za pomocą klawiatury, kolejność fokusowania, dostępne nazwy oraz użyteczną ścieżkę, gdy funkcja jest niedostępna.
FAQ dla programistów
Pytania przed
pierwszy 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?