SDK JavaScript intégrable. Les clients finaux personnalisent leurs propres illustrations - téléchargez des images, ajoutez du texte, positionnez, recadrez - sur votre page produit, dans votre image de marque, ajouter du texte, positionner, recadrer - sur la page de votre produit, avec votre image de marque. Lorsqu'ils enregistrent, le SDK renvoie une URL de maquette prête à être imprimée que vous insérez directement dans le point de terminaison de la commande. de la commande. Pas d'iframe, pas de redirection, pas de marque Fabrixa visible par le client final.
EMBEDDED JS - THEMABLE - EVENT HOOKS - FRAMEWORK-AGNOSTIC
Le SDK rend un canevas de personnalisation à l'intérieur de tout élément DOM que vous lui donnez. Les clients finaux peuvent télécharger des fichiers graphiques, ajouter des couches de texte, positionner et recadrer, prévisualiser par rapport au produit choisi. Lors de l'enregistrement, le SDK télécharge la maquette composée vers le stockage de Fabrixa et renvoie l'URL de la maquette. Fabrixa et renvoie l'URL de la maquette par l'intermédiaire d'un rappel - prêt à être intégré dans la commande API. dans la commande API.
Téléchargement par glisser-déposer de PNG, JPG, SVG, AI, PSD. Conversion automatique en format prêt à imprimer. Avertissements sur la résolution si le dessin du client est trop bas pour le produit choisi.
Couches de texte modifiables avec des polices présélectionnées par la marque. Le sélecteur de couleurs est limité à la palette de la marque si vous en spécifiez une. Langues RTL prises en charge.
Prévisualisation en direct de l'œuvre d'art sur le produit choisi (T-shirt, sweat à capuche, coussin, etc.) à l'aide de maquettes de produits. Les clients voient ce qu'ils recevront.
Guides visuels indiquant les zones sûres pour l'impression, les zones de fond perdu, les lignes de pliage sur les produits à plusieurs panneaux tels que les housses de couette. Les clients ne peuvent pas placer de dessins en dehors de la zone imprimable.
Lors de l'enregistrement, le SDK compose le dessin ou modèle, le télécharge vers le stockage Fabrixa et renvoie une URL stable. Transmettez-la en tant que artwork_url dans la demande de commande.
Rappels d'événements JS pour le prêt du canevas, l'ajout de couches, l'enregistrement, l'erreur, etc. Créez vos propres analyses, tests A/B ou flux d'accueil.
Indépendant du cadre de travail. Le SDK est un simple JS - il fonctionne avec React, Vue, Svelte, HTML simple, modèles Rails avec rendu serveur, n'importe où.
<!-- Add to your product page --> <script src="https://sdk.fabrixa.com/editor/v1/sdk.js"> <div id="fbx-editor" style="height:600px"></div> <script> constante éditeur = FabrixaEditor.init({ conteneur: "#fbx-editor", clé_api: "pk_live_yourPublicKeyHere", produit_id: "prod_tee_unisex_aop", // Thème de votre marque thème: { couleur_primaire: "#E95121", famille_de_polices: "Inter, system-ui", rayon_bordure: "4px" }, // Rappels on_save: (artwork) => { // artwork.url est l'URL du document prêt à être imprimé - à intégrer dans la commande API console.log(artwork.url, artwork.thumbnail_url) ; } }) ; </script>
Le clé_api voici le public - sans danger pour le code du navigateur. Elle n'autorise que le canevas de l'éditeur ; les commandes réelles nécessitent votre clé secrète sur votre backend.
L'habillage est déterminé par l'opinion - couleur primaire, famille de polices, rayon des bordures, plus quelques tons de surface. L'éditeur n'expose pas volontairement toutes les variables CSS ; la cohérence entre les sites des clients est plus importante qu'un habillage complet.
thème: { // Couleurs de la marque couleur_primaire: "#E95121", // CTA, états actifs couleur_de_fond: "#FFFFFF", // arrière-plan de la toile couleur_de_surface: "#F4F4F4", // panneaux, liste des couches texte_primaire: "#18202D", texte_secondaire: "#5C6573", // Typographie famille_de_polices: "Inter, system-ui, sans-serif", font_family_mono: "JetBrains Mono, monospace", // Forme rayon_bordure: "4px", style_bouton: "solide", // "solid" | "outline" // Comportement show_powered_by: faux, // cacher le pied de page "Powered by Fabrixa". enable_text_layers: vrai, activer le téléchargement d'images: vrai, Taille_du_canal_max: { largeur: 4096, hauteur: 4096 } }
Chaque changement d'état significatif de l'éditeur émet un événement JS. Abonnez-vous au moment de l'initialisation ou attachez-vous plus tard via editor.on().
constante éditeur = FabrixaEditor.init({ /* ... */ }); // L'éditeur est monté et rendu éditeur.sur("prêt", () => analytics.piste("editor_open")); // Ajout d'un calque (image, texte) éditeur.sur("layer.added", (layer) => { analyse.piste("editor_layer_added", { type : layer.type }) ; }) ; // Le client appuie sur le bouton d'enregistrement éditeur.sur("sauver", (artwork) => { // Transmettre à votre backend pour créer la commande réelle rechercher("/api/commandes", { méthode : "POST", corps : JSON.filtrer({ artwork_url : artwork.url, product_id : "prod_tee_unisex_aop", size : selectedSize }) }) ; }) ; // Erreurs (fichier trop petit, échec du téléchargement, etc.) éditeur.sur("erreur", (err) => { // err.code est une chaîne de caractères stable - basculez dessus console.error(err.code, err.message) ; }) ;
Le SDK utilise un public qui peut être intégrée en toute sécurité dans le code du client. Il peut rendre la toile, accepter les téléchargements et produire une URL d'œuvre d'art prête à imprimer - mais il ne peut pas passer de commande, demander la facturation d'un compte ou lire les œuvres d'autres clients. d'autres clients. Le passage de commande se fait dans votre backend avec votre secret clé.
L'accès au SDK de l'éditeur est activé par compte. Une fois que vous avez passé votre premier ordre de production, vous pouvez demander l'accès au SDK à partir du tableau de bord ou par téléphone. de production, vous pouvez demander l'accès au SDK à partir du tableau de bord ou en en contactant un ingénieur en solutions. Nous fournissons des clés publiques et secrètes, ainsi qu'un un environnement sandbox pour développer l'intégration avant qu'elle ne touche des commandes réelles. commandes réelles.
Les prix varient selon le niveau de volume du SDK. Contactez le service commercial pour plus d'informations.
Parlez à un ingénieur en solutions pour fournir les clés SDK, mettre en place votre environnement sandbox, et passer en revue toutes les exigences en matière de canevas personnalisé. Le délai d'accès au SDK est généralement de 24h après un bref examen.
English English 
Nederlands
Français
Deutsch
Italiano
Português
Español
Українська
