Schnellster Weg
SPREEAI für Entwickler
Baue die Umkleidekabine
auf jedem Bildschirm.
Verbinden Sie Ihren Katalog. Gestalten Sie die Customer Journey. Bringen Sie Always On in Ihre Storefront mit dem Integrationspfad, der zu Ihrem Team passt.
Wählen Sie Ihren Weg
Beginnen Sie dort, wo Sie
Der Commerce-Stack lebt.
Nutzen Sie Shopify für eine verwaltete Einrichtung oder integrieren Sie unsere SDKs und APIs. Wählen Sie die Funktionen, die Ihr Unternehmen benötigt, und gestalten Sie das Einkaufserlebnis Ihrer Marke optimal.
Benutzerdefiniertes Web
Web SDK
Steuern Sie Platzierung, Stil, Ereignisse, Größe und Verhalten beim Hinzufügen zum Warenkorb.JavaScript + TypeScript DokumenteNatives Handy
iOS SDK
Bringen Sie das SPREEAI-Erlebnis in eine bestehende iOS-Einkaufsreise ein.Öffnen Sie den iOS-Leitfaden DokumenteNatives Handy
Android SDK
Integrieren Sie die Anprobe mit nativen Steuerelementen in ein Android-Produkterlebnis.Öffnen Sie den Android-Leitfaden PartnerzugangKundenspezifische Systeme
Öffentliche APIs
Verwenden Sie die genehmigte API-Referenz für serverseitige und Katalog-Workflows.Öffnen Sie die API-ReferenzMarktplatz
Amazon-Partnernetzwerk
Bald im Amazon Partner Network und auf anderen Plattformen erhältlich, mit mehr Möglichkeiten, SPREEAI in Ihren Commerce-Stack zu integrieren.Aktualisierungen werden hier zuerst angezeigt.Web SDK Schnellstart
Ihre erste Integration.
Einmal authentifizieren, dann Anprobe oder Größenbestimmung an einer beliebigen Stelle auf der Seite durchführen. Verwenden Sie die beim Onboarding ausgegebenen Testanmeldeinformationen und fügen Sie niemals ein Client-Geheimnis in den Browsercode ein.
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.
},
},
});Das Integrationsmodell
Vier Systeme.
Ein Kundenmoment.
Produkt-IDs, Varianten, Bilder und Merchandising-Kontext.
Kleidungsstücke durchlaufen Verarbeitungs-, Überprüfungs- und Bereitschaftszustände.
Ihr Shop fordert die entsprechende Benutzererfahrung für ein berechtigtes Produkt an.
Probieren Sie es an, finden Sie die richtige Größe, vervollständigen Sie den Look und gehen Sie zurück zur Kasse.
Ein fokussierter Weg zum Start
Bereiten Sie sich vor. Verbinden.
Gehen Sie mit Zuversicht live.
Drei Meilensteine, mit einer praktischen Checkliste für jeden einzelnen.
- 01 · Vorbereiten
Ein klarer Ausgangspunkt.
Passen Sie Reise, Zugang und Katalog an.
Checkliste zur Vorbereitung
- Wählen Sie einen Kanal, eine Kataloggruppe und eine Erfolgskennzahl.
- Bestätigen Sie den Partnerzugriff, die Anmeldeinformationen und die Staging-Berechtigungen.
- Stellen Sie klare, auf die Artikelnummer abgestimmte Bilder von Kleidungsstücken bereit.
- 02 · Verbinden
Sorgen Sie dafür, dass es sich heimisch anfühlt.
Integriertes Staging. Testen Sie die gesamte Reise.
Checkliste zur Integration
- Rendern Sie nach geeigneten Produkten und verbinden Sie Varianten und Warenkorbverhalten.
- Passen Sie das Erlebnis an die Marke an.
- Überprüfen Sie den Mobil-, Desktop-, Zugänglichkeits-, Leistungs- und Fehlerstatus.
- 03 · Start
Lernen Sie aus der realen Anwendung.
Fertige Produkte aktivieren und messen.
Checkliste starten
- Bestätigen Sie die Produktbereitschaft und veröffentlichen Sie das inszenierte Erlebnis.
- Überwachen Sie die Einführung, Fertigstellung und Konvertierung.
- Die Ergebnisse dienen als Grundlage für die nächste Kategorie oder den nächsten Handlungsablauf.
Vermögensbasislinie
Guter Input führt zu einem besseren Ergebnis.
- JPEG oder PNG
- Mindestens 2.000 × 2.000 Pixel
- Vorderansicht erforderlich
- Rückansicht empfohlen
- Neutrale, gleichmäßige Beleuchtung
- SKU oder Stil-ID im Dateinamen
Entwicklerreferenz
Finden Sie den nächsten
hilfreiche Antwort.
Hier beginnen
Erste Schritte
Machen Sie sich mit den Zugriffsrechten, den unterstützten Plattformen und den ersten Entscheidungen vertraut, die Ihr Team treffen muss.
Offizielle Referenz Verwaltete IntegrationShopify Onboarding
Installieren Sie die App, akzeptieren Sie Vereinbarungen, synchronisieren Sie Kleidungsstücke, passen Sie die Schaltfläche an und gehen Sie live.
Offizielle Referenz Web SDKAPI-Oberfläche
Überprüfen Sie die Initialisierung, Renderoptionen, Größenanpassung, Anpassung und typisierte Schnittstellen.
Offizielle Referenz Partner-APIÖffentliche API-Referenz
Entdecken Sie die zugelassene serverseitige Schnittstelle, die authentifizierten Partnern zur Verfügung steht.
Swagger-Referenz QualitätKleidungsstücke
Bereiten Sie Produktbilder und Metadaten vor, die sauber durch die Aufnahme und Überprüfung übertragen werden.
SPREEAI-Leitfaden ProduktionQualitätssicherung und Einführung
Nutzen Sie die Checkliste für gemeinsamen Browser, Leistung, Barrierefreiheit und Go-Live.
SPREEAI-Leitfaden UnterstützungFehlerbehebung
Lösen Sie die häufigsten Authentifizierungs-, Berechtigungs-, Rendering- und Leistungsprobleme.
SPREEAI-Leitfaden DokumentationImplementierungsleitfäden
Durchsuchen Sie öffentliche Schnellstarts, Asset-Standards, Start-Checklisten und Anleitungen zur Fehlerbehebung.
Dokumentation öffnenKeine passenden Entwicklerressourcen. Versuchen Sie es mit „Shopify“, „SDK“, „Assets“ oder „QA“.
Für die Produktion bauen
Die Details, die schützen
das Kundenerlebnis.
Sicherheit
Bewahren Sie Geheimnisse serverseitig auf, verwenden Sie nur ausgegebene Umgebungen und rotieren Sie Anmeldeinformationen über den Partner-Workflow.
Privatsphäre
Fordern Sie Kundenbilder mit eindeutiger Einwilligung an und stimmen Sie die Datenverarbeitung mit Ihrem genehmigten Integrationsplan ab.
Leistung
Laden Sie das Erlebnis dorthin, wo es benötigt wird, testen Sie echte Geräte und überwachen Sie Regressionen auf der Produktseite.
Barrierefreiheit
Behalten Sie den Tastaturzugriff, die Fokusreihenfolge, zugängliche Namen und einen nutzbaren Pfad bei, wenn das Erlebnis nicht verfügbar ist.
Entwickler-FAQ
Fragen vorher
der erste Commit.
Welche Integration sollten wir wählen?
Nutzen Sie die Shopify App für den schnellsten verwalteten Pfad, das Web SDK für benutzerdefinierte oder Headless-Webplatzierungen, die nativen SDKs für App-Erlebnisse und die genehmigte API-Referenz für serverseitige Workflows, die während des Onboardings vereinbart wurden.
Woher stammen die Zugangsdaten?
SPREEAI stellt die Partner-ID und die genehmigten Zugangsdaten während des Onboardings bereit. Das Browser-SDK verwendet eine Client-ID und eine Partner-ID. Binden Sie niemals ein Client-Geheimnis in den Frontend-Code ein.
Benötigt die Shopify-App API-Schlüssel?
Der aktuelle Onboarding-Prozess der Shopify App verbindet den Store nach den erforderlichen Vereinbarungen und dem Abonnementschritt; die verwaltete App erfordert kein Kopieren von Schlüsseln in den Einrichtungsbildschirm.
Warum wird der Anprobe-Button nicht angezeigt?
Bestätigen Sie, dass das Kleidungsstück die Verarbeitung abgeschlossen hat, für die Anprobe aktiviert ist, dem aktiven Produkt oder der aktiven Variante zugeordnet ist und dass der App-Block oder SDK-Container in der Produktvorlage vorhanden ist.
Welche Client-Events sind verfügbar?
Die dokumentierten SDK-Callbacks erfassen Klicks auf den Anprobe-Button und Interaktionen mit dem Warenkorb. Verbinden Sie diese mit Ihrer Analyseschicht, ohne Kundenbilder oder unnötige personenbezogene Daten einzubeziehen.
Sind Server-Webhooks verfügbar?
Server-Push-Webhooks sind nicht Teil der aktuell veröffentlichten SDK-Dokumentation. Klären Sie alle Anforderungen an serverseitige Ereignisse mit dem Partner-Engineering-Team, bevor Sie diese verwenden.
Wo erhalten Entwickler Hilfe?
Nutzen Sie den technischen Supportkanal, der Ihnen während des Onboardings bereitgestellt wurde, oder schreiben Sie eine E-Mail. support@spreeai.com. Geben Sie die Umgebung, die Produkt-ID, den Browser oder das Gerät, den Zeitstempel und einen prägnanten Reproduktionspfad an – senden Sie niemals Geheimnisse.
Wann wird der Support des Amazon Partner Networks verfügbar sein?
Die Integration des Amazon Partnernetzwerks befindet sich in der Entwicklung. Sie ist absichtlich als „Demnächst verfügbar“ gekennzeichnet, bis die Onboarding- und Produktionsschnittstelle für externe Entwickler bereit ist.
Bereit zum Bauen?