Snelste pad
SPREEAI voor ontwikkelaars
Bouw de paskamer
op elk scherm.
Verbind uw catalogus. Geef vorm aan de klantreis. Breng Always On naar uw winkel met het integratietraject dat bij uw team past.
Kies jouw pad
Begin waar je
Commerce Stack leeft voort.
Gebruik Shopify voor een beheerde configuratie, of integreer met onze SDK's en API's. Kies de functies die uw bedrijf nodig heeft en behoud de klantreis van uw merk.
Aangepast web
Web SDK
Beheer de plaatsing, styling, evenementen, afmetingen en het gedrag bij het toevoegen aan winkelwagentje.JavaScript + TypeScript DocumentenNative mobiel
iOS SDK
Breng de SPREEAI-ervaring in een bestaand iOS-winkeltraject.Open de iOS-gids DocumentenNative mobiel
Android-SDK
Integreer het uitproberen in een Android-productervaring met native bedieningselementen.Open de Android-gids PartnertoegangAangepaste systemen
Openbare API's
Gebruik de goedgekeurde API-referentie voor server-side en catalogusworkflows.Open API-referentieMarktplaats
Amazon-partnernetwerk
Binnenkort beschikbaar op het Amazon Partner Network en andere platforms, met meer manieren om SPREEAI in uw handelsstack te integreren.Updates verschijnen hier eerst.Snelstartgids voor de Web SDK
Uw eerste integratie.
Authenticeer één keer en geef vervolgens een proefversie of maatvoering waar dan ook op de pagina weer. Gebruik testreferenties die zijn uitgegeven tijdens de onboarding en plaats nooit een klantgeheim in de browsercode.
npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0import { 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,
});
}// Pass events inside renderTryOnButton's options.
await sdk?.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
events: {
onTryOnButtonClick: (event) => {
console.info(event.name);
},
onAddToCartClicked: (event) => {
// Connect event.garments to your storefront's cart.
},
},
});Het integratiemodel
Vier systemen.
Eén klantmoment.
Product-ID's, varianten, afbeeldingen en merchandisingcontext.
Kledingstukken doorlopen verwerkings-, beoordelings- en gereedheidsfasen.
Uw webwinkel vraagt de ervaring aan voor een in aanmerking komend product.
Pas het aan, zoek de juiste maat, maak de outfit compleet en ga terug naar de kassa.
Een gericht pad om te lanceren
Bereid je voor. Verbinden.
Ga met vertrouwen live.
Drie mijlpalen, met een praktische checklist voor elk.
- 01 · Bereid je voor
Een helder uitgangspunt.
Stem de reis, toegang en catalogus op elkaar af.
Controlelijst voor voorbereiding
- Kies één kanaal, catalogusgroep en succesmaatstaf.
- Bevestig partnertoegang, inloggegevens en staging-machtigingen.
- Zorg voor schone, SKU-uitgelijnde kledingafbeeldingen.
- 02 · Verbinden
Zorg ervoor dat het een inheems gevoel geeft.
Bouw enscenering in. Test de hele reis.
Integratiechecklist
- Render voor in aanmerking komende producten en koppel varianten en winkelwagengedrag.
- Match de beleving met het merk.
- Controleer mobiele, desktop-, toegankelijkheids-, prestatie- en foutstatussen.
- 03 · Lancering
Leer van echt gebruik.
Schakel kant-en-klare producten in en meet.
Controlelijst starten
- Bevestig de gereedheid van het product en publiceer de geënsceneerde ervaring.
- Monitor adoptie, afronding en conversie.
- Gebruik de resultaten om de volgende categorie of het volgende traject te bepalen.
Basislijn activa
Goede input zorgt voor een beter resultaat.
- JPEG of PNG
- Minimaal 2.000 × 2.000 px
- Vooraanzicht vereist
- Achteraanzicht aanbevolen
- Neutrale, gelijkmatige verlichting
- SKU of stijl-ID in bestandsnaam
Referentie voor ontwikkelaars
Vind de volgende
Nuttig antwoord.
Begin hier
Aan de slag
Zorg dat je begrijpt welke toegangsrechten er zijn, welke platforms worden ondersteund en welke eerste beslissingen je team moet nemen.
Officiële referentie Beheerde integratieShopify onboarding
Installeer de app, accepteer overeenkomsten, synchroniseer kledingstukken, pas de knop aan en ga live.
Officiële referentie Web SDKAPI-oppervlak
Bekijk initialisatie, weergaveopties, grootte, aanpassing en getypte interfaces.
Officiële referentie Partner-APIOpenbare API-referentie
Ontdek de goedgekeurde serverinterface die beschikbaar is voor geverifieerde partners.
Swagger-referentie KwaliteitKledingstukken
Bereid productafbeeldingen en metagegevens voor die soepel door de opname en beoordeling bewegen.
SPREEAI handleiding ProductieQA en lancering
Gebruik de gedeelde checklist voor browsers, prestaties, toegankelijkheid en implementatie.
SPREEAI handleiding SteunProbleemoplossing
Los de meest voorkomende problemen met authenticatie, geschiktheid, weergave en prestaties op.
SPREEAI handleiding DocumentatieImplementatiehandleidingen
Blader door openbare quickstarts, assetstandaarden, lanceringchecklists en begeleiding bij probleemoplossing.
Documentatie openenGeen overeenkomende ontwikkelaarsbronnen. Probeer 'Shopify', 'SDK', 'activa' of 'QA'.
Gebouwd voor productie
De details die bescherming bieden
de klantervaring.
Beveiliging
Bewaar geheimen op de server, gebruik alleen uitgegeven omgevingen en wissel inloggegevens via de partnerworkflow.
Privacy
Vraag klantafbeeldingen aan met duidelijke toestemming en stem de gegevensverwerking af op uw goedgekeurde integratieplan.
Prestaties
Laad de ervaring waar deze nodig is, test echte apparaten en volg regressies op productpagina's.
Toegankelijkheid
Behoud toetsenbordtoegang, focusvolgorde, toegankelijke namen en een bruikbaar pad wanneer de ervaring niet beschikbaar is.
Veelgestelde vragen over ontwikkelaars
Vragen vooraf
de eerste commit.
Welke integratie moeten we kiezen?
Gebruik de Shopify-app voor het snelste beheerde pad, de web-SDK voor aangepaste of headless webimplementatie, de native SDK's voor app-ervaringen en de goedgekeurde API-referentie voor serverworkflows die tijdens de onboarding zijn overeengekomen.
Waar komen de referenties vandaan?
SPREEAI verstrekt de partner-ID en goedgekeurde inloggegevens tijdens het onboardingproces. De browser-SDK gebruikt een client-ID en een partner-ID. Voeg nooit een clientgeheim toe aan front-endcode.
Heeft de Shopify-app API-sleutels nodig?
De huidige onboardingprocedure voor de Shopify app verbindt de winkel na de vereiste overeenkomsten en abonnementsstap; bij de beheerde app is het niet nodig om sleutels naar het instelscherm te kopiëren.
Waarom verschijnt de knop 'Passen' niet?
Bevestig dat het kledingstuk de verwerking heeft voltooid, geschikt is voor uitproberen, is toegewezen aan het actieve product of de actieve variant en dat het app-blok of de SDK-container aanwezig is op de productsjabloon.
Welke klantenevenementen zijn beschikbaar?
De gedocumenteerde SDK-callbacks dekken klikken op de 'Probeer'-knop en interacties met het toevoegen aan de winkelwagen. Koppel ze aan uw analyseomgeving zonder klantafbeeldingen of onnodige persoonlijke gegevens mee te sturen.
Zijn serverwebhooks beschikbaar?
Server-push webhooks maken geen deel uit van de momenteel gepubliceerde SDK-documentatie. Bespreek eventuele vereisten voor server-side events met Partner Engineering voordat u hierop vertrouwt.
Waar kunnen ontwikkelaars terecht voor hulp?
Gebruik de technische ondersteuningsroute die tijdens de onboarding wordt aangeboden of stuur een e-mail. support@spreeai.com. Vermeld de omgeving, product-ID, browser of apparaat, tijdstempel en een beknopt reproductiepad. Stuur nooit geheimen.
Wanneer zal de ondersteuning voor het Amazon Partner Network beschikbaar zijn?
De integratie met het Amazon Partner Network is in ontwikkeling. Deze is bewust gemarkeerd als 'Binnenkort beschikbaar' totdat de onboarding- en productie-interface gereed zijn voor externe ontwikkelaars.
Klaar om te bouwen?