Construire avec
SPREEAI.
Un cheminement pratique, du choix de l'intégration au lancement testé. Commencez par un parcours d'achat, utilisez un accès de test fourni et évitez d'inclure les identifiants dans le code du navigateur.
Choisissez le chemin d'intégration
Shopify App
Utilisez l'application gérée lorsque la boutique fonctionne sous Shopify et ne nécessite pas de serveur personnalisé. Le processus d'intégration actuel connecte la boutique après la signature des accords et l'abonnement ; il n'est pas nécessaire de copier les clés API dans l'écran de configuration.
- Installez l'application officielle SPREEAI et suivez la procédure de consentement géré.
- Synchronisez un groupe de catalogue initial et examinez l'état de préparation des produits.
- Personnalisez l'emplacement et le style dans un thème dupliqué.
- Valider les produits éligibles, les variantes, le comportement mobile et l'ajout au panier.
- Publier uniquement après approbation de la marque et du service d'assurance qualité.
Démarrage rapide du SDK Web
Utiliser @spreeai/web-sdk pour la personnalisation du placement, du style, des événements, du dimensionnement et du comportement du panier.
npm install @spreeai/web-sdk@3.0.0
import { 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,
});
}Initialisez une seule fois, effectuez le rendu uniquement pour un produit éligible et connectez les rappels client documentés à vos analyses existantes. Confirmez l'interface actuelle dans le Référence officielle de l'API du SDK Web
accès API
Utilisez la documentation Swagger publique uniquement pour les flux de travail côté serveur approuvés lors de l'intégration. Conservez les secrets sur votre serveur, séparez les accès de test et de production et limitez les identifiants à l'environnement minimal requis.
Les points de terminaison REST directs, les webhooks ou les comportements d'authentification qui ne figurent pas dans la documentation publique approuvée doivent être considérés comme indisponibles jusqu'à ce que l'équipe d'ingénierie partenaire les confirme.
Référence des actifs textiles
- JPEG ou PNG ; 2 000 × 2 000 px minimum, environ 4K de préférence.
- Un vêtement par image, centré, avec des contours nets et un éclairage neutre et uniforme.
- Vue de face requise ; vue arrière recommandée lorsque cette option est activée.
- Référence SKU stable, identifiant de style ou de vêtement inclus dans le nom de fichier et la fiche catalogue.
- Aucune main, cintre, accessoire de stylisme, filigrane ou vêtement sans rapport avec le sujet ne doit masquer l'article.
- La correspondance des variantes a été vérifiée avant l'activation de l'expérience.
Assurance qualité et lancement
- Testez l'intégralité du parcours client sur les navigateurs mobiles et de bureau actuels.
- Vérifier la correspondance des produits et des variantes, la disponibilité des vêtements et le comportement du panier.
- Vérifiez l'accessibilité au clavier, l'ordre de focus, les noms accessibles et le comportement de repli.
- Mesurer les performances de la page produit avant et après l'activation de SPREEAI.
- États de chargement, vide, indisponible, délai d'attente dépassé et nouvelle tentative.
- Confirmer la formulation du consentement et le traitement approuvé des images des clients.
- Obtenir l'approbation des services d'ingénierie, commerciaux, d'assurance qualité et de la marque avant la production.
Dépannage
Le bouton n'apparaît pas.
Vérifiez l'initialisation du SDK, l'identifiant client, l'ID de l'élément hôte, l'éligibilité du produit, la disponibilité du vêtement et le mappage des variantes. Ensuite, consultez la console du navigateur et les erreurs réseau sans partager les jetons.
Le mauvais produit ou la mauvaise variante apparaît
Comparez les identifiants des produits et des variantes affichés en magasin avec les enregistrements envoyés à SPREEAI. Vérifiez que la requête rendue change lorsque le client modifie les variantes.
L'expérience est lente ou indisponible.
Testez un produit fonctionnel, vérifiez l'environnement actif, examinez les requêtes bloquées et comparez-le à une session de navigation normale. Enregistrez l'horodatage et la séquence reproductible pour le support technique.
Obtenez de l'aide des développeurs
E-mail support@spreeai.com Veuillez inclure l'environnement, l'identifiant du produit ou du vêtement, le navigateur ou l'appareil utilisé, l'horodatage approximatif, le comportement attendu et les étapes de reproduction. Ne commettez aucune erreur ni donnée client.