Chemin le plus rapide
SPREEAI pour les développeurs
Aménagez la cabine d'essayage
sur tous les écrans.
Connectez votre catalogue. Façonnez le parcours client. Intégrez Always On à votre boutique en ligne grâce à la solution d'intégration adaptée à votre équipe.
Choisissez votre voie
Commencez là où votre
La pile commerciale est en vie.
Utilisez Shopify pour une configuration gérée ou intégrez-la à nos SDK et API. Choisissez les fonctionnalités dont votre entreprise a besoin et préservez l'expérience d'achat de votre marque.
Site web personnalisé
SDK Web
Contrôlez le placement, le style, les événements, la taille et le comportement d'ajout au panier.JavaScript + TypeScript Docsmobile natif
Kit de développement logiciel iOS
Intégrez l'expérience SPREEAI dans un parcours d'achat iOS existant.Guide iOS ouvert Docsmobile natif
Kit de développement logiciel Android
Intégrez l'essayage virtuel dans l'expérience produit Android grâce aux commandes natives.Guide Android ouvert Accès partenaireSystèmes personnalisés
API publiques
Utilisez la documentation API approuvée pour les flux de travail côté serveur et de catalogue.Référence de l'API ouverteMarché
Réseau de partenaires Amazon
Bientôt disponible sur le réseau de partenaires Amazon et d'autres plateformes, avec davantage de façons d'intégrer SPREEAI à votre pile commerciale.Les mises à jour apparaîtront ici en premier.Démarrage rapide du SDK Web
Votre première intégration.
Authentifiez-vous une seule fois, puis affichez l'essayage virtuel ou le guide des tailles n'importe où sur la page. Utilisez les identifiants de test fournis lors de l'inscription et ne placez jamais de clé secrète client dans le code du navigateur.
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.
},
},
});Le modèle d'intégration
Quatre systèmes.
Un moment client.
Identifiants produits, variantes, images et contexte de merchandising.
Les vêtements passent par les étapes de traitement, de vérification et de préparation.
Votre boutique en ligne demande l'expérience pour un produit éligible.
Essayez, trouvez la taille, complétez votre look et retournez à la caisse.
Un chemin ciblé vers le lancement
Préparez-vous. Connectez-vous.
Vivez pleinement votre vie en toute confiance.
Trois étapes clés, avec une liste de contrôle pratique pour chacune.
- 01 · Préparer
Un point de départ clair.
Harmoniser le parcours, l'accès et le catalogue.
Liste de vérification de la préparation
- Choisissez un canal, un groupe de catalogues et une mesure de succès.
- Confirmer l'accès des partenaires, leurs identifiants et les autorisations de mise en production.
- Fournir des images de vêtements nettes et conformes aux références.
- 02 · Connect
Faites en sorte que ça ait un aspect naturel.
Intégrez un environnement de test. Testez l'intégralité du parcours.
Liste de contrôle d'intégration
- Afficher les produits éligibles et lier les variantes et le comportement du panier.
- Faire correspondre l'expérience à la marque.
- Vérifier l'état des appareils mobiles, des ordinateurs de bureau, de l'accessibilité, des performances et des pannes.
- 03 · Lancement
Tirer les leçons de l'utilisation réelle.
Activer les produits prêts et mesurer.
Liste de contrôle de lancement
- Confirmer la maturité du produit et publier l'expérience de test.
- Suivre l'adoption, l'achèvement et la conversion.
- Utilisez les résultats pour orienter la catégorie ou le parcours suivant.
Référence des actifs
De bons éléments donnent de meilleurs résultats.
- JPEG ou PNG
- 2 000 × 2 000 px minimum
- Vue de face requise
- Vue arrière recommandée
- Éclairage neutre et uniforme
- Référence ou identifiant de style dans le nom de fichier
Référence du développeur
Trouvez le suivant
Réponse utile.
Commencez ici
Commencer
Comprendre les accès, les plateformes prises en charge et les premières décisions que votre équipe doit prendre.
Référence officielle Intégration géréeShopify intégration
Installez l'application, acceptez les conditions, synchronisez les vêtements, personnalisez le bouton et lancez-vous !
Référence officielle SDK WebSurface de l'API
Examiner l'initialisation, les options de rendu, le dimensionnement, la personnalisation et les interfaces typées.
Référence officielle API partenaireRéférence de l'API publique
Explorez l'interface serveur approuvée et disponible pour les partenaires authentifiés.
Référence à Swagger QualitéActifs liés aux vêtements
Préparer les images et les métadonnées des produits pour qu'elles circulent sans problème lors de l'ingestion et de la vérification.
Guide SPREEAI ProductionAssurance qualité et lancement
Utilisez la liste de vérification partagée pour le navigateur, les performances, l'accessibilité et la mise en production.
Guide SPREEAI SoutienDépannage
Résoudre les problèmes les plus courants d'authentification, d'éligibilité, d'affichage et de performance.
Guide SPREEAI DocumentationGuides de mise en œuvre
Consultez les guides de démarrage rapide publics, les normes relatives aux actifs, les listes de contrôle de lancement et les conseils de dépannage.
Documentation ouverteAucune ressource de développement correspondante. Essayez « Shopify », « SDK », « assets » ou « QA ».
Conception pour la production
Les détails qui protègent
l'expérience client.
Sécurité
Conservez les secrets côté serveur, utilisez uniquement les environnements autorisés et faites tourner les identifiants via le flux de travail du partenaire.
Confidentialité
Demandez les images des clients avec leur consentement explicite et alignez le traitement des données sur votre plan d'intégration approuvé.
Performance
Intégrez l'expérience utilisateur là où elle est nécessaire, testez-la sur de vrais appareils et surveillez les régressions des pages produits.
Accessibilité
Préserver l'accès au clavier, l'ordre de focus, les noms accessibles et un chemin d'accès utilisable lorsque l'expérience n'est pas disponible.
FAQ pour les développeurs
Questions avant
le premier commit.
Quelle intégration devrions-nous choisir ?
Utilisez l'application Shopify pour le chemin géré le plus rapide, le SDK Web pour le placement Web personnalisé ou sans interface graphique, les SDK natifs pour les expériences d'application et la référence API approuvée pour les flux de travail côté serveur convenus lors de l'intégration.
D'où viennent les diplômes ?
SPREEAI attribue l'identifiant partenaire et les informations d'identification approuvées lors de l'intégration. Le SDK du navigateur utilise un identifiant client et un identifiant partenaire. N'intégrez jamais de secret client dans le code frontal.
L'application Shopify nécessite-t-elle des clés API ?
Le flux d'intégration actuel de l'application Shopify connecte le magasin après l'étape des accords et de l'abonnement requis ; l'application gérée ne nécessite pas de copier les clés dans l'écran de configuration.
Pourquoi le bouton « Essayer » n’apparaît-il pas ?
Vérifiez que le traitement du vêtement est terminé, que l'essayage est activé, qu'il correspond au produit ou à la variante active et que le bloc d'application ou le conteneur SDK est présent sur le modèle de produit.
Quels événements clients sont disponibles ?
Les fonctions de rappel du SDK documentées couvrent les clics sur le bouton « Essayer » et les interactions « Ajouter au panier ». Connectez-les à votre système d'analyse sans inclure d'images client ni de données personnelles inutiles.
Les webhooks serveur sont-ils disponibles ?
Les webhooks push serveur ne font pas partie de la documentation SDK actuellement publiée. Veuillez définir le périmètre de toute exigence relative aux événements côté serveur avec l'équipe d'ingénierie partenaire avant de vous y fier.
Où les développeurs peuvent-ils trouver de l'aide ?
Utilisez le parcours d'assistance technique fourni lors de votre intégration ou envoyez un e-mail. support@spreeai.comVeuillez inclure l'environnement, l'identifiant du produit, le navigateur ou l'appareil, l'horodatage et un chemin de reproduction concis ; ne transmettez jamais de données confidentielles.
Quand le support du réseau de partenaires Amazon sera-t-il disponible ?
L'intégration du réseau de partenaires Amazon est en cours de développement. Elle est intentionnellement marquée comme « Bientôt disponible » jusqu'à ce que l'interface d'intégration et de production soit prête pour les développeurs externes.
Prêt à construire ?