Développeurs · Fabrixa Studio

Vos clients dessinent leurs produits — sous votre marque.

Fabrixa Studio est un en white-label configurateur que vous intégrez à la page de votre produit sous la forme d’un iframe. Vos clients créent ou importent leurs propres motifs et peuvent les prévisualiser en temps réel sur le produit — l'éditeur arbore votre image de marque, et non la nôtre, de sorte qu'ils ne voient jamais apparaître « Fabrixa ». Une fois qu'ils ont terminé, vous passez la commande en vous référant à la personnalisation enregistrée — aucun fichier d'impression à importer ni à stocker.

Guide d'intégration → Ouvrir la référence API

White-label · Shopify, WooCommerce et solutions sur mesure · Aperçu en direct · Commande par référence

Fabrixa Studio · Démonstration en direct

Essayez l'éditeur ici même.

C'est exactement l'éditeur que vous allez intégrer : ouvrez-le, ajoutez-y votre visuel et créez un véritable produit à partir de notre catalogue. Aucune installation requise, aucun compte nécessaire.

Il s'agit du même éditeur que celui que vos clients utilisent pour créer leurs designs via les modules Shopify et WooCommerce ou via l'API. Cette page est une démo en direct : la commande s'effectue sur la plateforme une fois que vous s'inscrire.

Consultez l'éditeur

Votre image de marque. Le design de votre client. Une seule et même toile.

Studio intégré à une vitrine en ligne : une bibliothèque de designs, des outils de texte, de formes, d'images et de calques, ainsi qu'un aperçu en temps réel de la répétition du motif sur le produit. Il fonctionne en white-label : vos clients voient donc votre boutique, et jamais celle de Fabrixa.

yourshop.com/personnaliser

L'éditeur Fabrixa Studio intégré à une boutique en ligne : bibliothèque de designs, outils de texte, de formes, d'images et de calques, ainsi qu'un aperçu en temps réel de la répétition du motif sur une couette, en white-label sous la marque du commerçant

Ce que fait Studio

Un outil de personnalisation white-label, intégré à votre processus de paiement.

Studio permet à vos clients de personnaliser des produits en temps réel — en créant un motif ou en téléchargeant le leur — et de visualiser le résultat sur le produit avant de l'acheter, le tout sous votre image de marque.

White-label, sous votre marque

L'éditeur arbore votre image de marque, et non la nôtre : vos clients personnalisent et visualisent les produits en temps réel sans jamais voir apparaître Fabrixa.

Créer ou importer des motifs

Ils créent un motif dans Studio ou importent leur propre illustration, puis la positionnent sur le produit dans l'éditeur.

Visualisation en temps réel des produits

Studio affiche un aperçu du motif sur le produit réel, ce qui permet aux clients de voir ce qu'ils recevront avant de l'ajouter à leur panier.

Enregistrée par article du panier

Chaque personnalisation est enregistrée en association avec un cart_item_key vous fournissez — une valeur unique par ligne du panier de votre côté.

Image d'aperçu à la demande

Récupérer une image d'aperçu générée pour n'importe quel cart_item_key à afficher dans le panier, dans le récapitulatif de la commande ou n'importe où dans votre boutique.

Pas de gestion de fichiers

Vous ne manipulez jamais de fichiers d'impression. Utilisez plutôt le cart_item_key lors de la commande, Fabrixa ajoute automatiquement le design enregistré.

Étape 1 — Intégrer

Un iframe sur votre page produit.

Vous vendez sur Shopify ou WooCommerce ? Studio est intégré à ces modules de boutique : il suffit de l'activer, sans avoir à écrire une seule ligne de code. Pour les vitrines et plateformes personnalisées, intégrez-le vous-même : Studio est hébergé sur studio.fabrixa.com et ajouté via un iframe. Transmettez trois valeurs via l'URL — tout le reste est géré au sein de l'éditeur, qui affiche le contenu en white-label sous votre identité visuelle.

application_key — votre Application Key, qui limite l'intégration à votre canal de vente
sku — le SKU de la variante de produit, récupéré via l'API d'intégration
cart_item_key — une valeur unique que vous générez pour chaque ligne du panier ; Studio enregistre la personnalisation associée à cette ligne

page-produit.html

<!-- Embed Fabrixa Studio on your product page -->
<iframe id="fabrixa-studio"
  src="https://studio.fabrixa.com?application_key=APPLICATION_KEY&sku=COF099191&cart_item_key=CART_ITEM_KEY"
  name="FabrixaStudio"
  scrolling="no" frameborder="1"
  width="100%" height="100%" allowfullscreen>
</iframe>

Étape 2 — Écouter

Studio répond via postMessage.

Studio envoie deux messages à la fenêtre parent. customizationFinished se déclenche lorsque le client clique sur Ajouter au panier; closeButtonClicked se déclenche lorsqu'il clique sur Retour. Écoutez-les dans la fenêtre parent et vérifiez toujours event.origin.

Le customizationFinished, ajoutez la ligne à votre panier en utilisant la même clé cart_item_key que vous avez inséré dans l'iframe — c'est le lien vers le design enregistré.

studio-events.js

window.addEventListener("message", (event) => {
  // Always check the origin first
  if (event.origin !== "https://studio.fabrixa.com") return;

  if (event.data === "customizationFinished") {
    // Add to Cart → store the line keyed by your cart_item_key
    addToCart(cartItemKey);
  } else if (event.data === "closeButtonClicked") {
    // Back → close the editor / restore the product page
    closeStudio();
  }
});

Étape 3 — Aperçu

Affichez le design terminé où vous le souhaitez.

Une fois la personnalisation enregistrée, récupérez une image rendue de celle-ci à partir de l'endpoint d'aperçu — il suffit de la définir comme src d’un <img>. Idéal pour le panier, le récapitulatif de la commande ou une page de confirmation.

L'aperçu est basé sur le même cart_item_key, en indiquant votre Application Key dans la chaîne de requête.

cart-preview.html

<!-- Rendered preview of the saved customisation -->
<img
  src="https://api.fabrixa.com/v2/studio/customizations/CART_ITEM_KEY/preview?Application-Key=APPLICATION_KEY"
  alt="Customised product preview"
  style="max-width:100%;height:auto">

Étape 4 — Commande

Passez la commande en indiquant la référence.

Au moment de valider la commande, POST la commande vers /v2/integration/orders depuis votre backend. Pour une ligne créée par un client dans Studio, envoyez le sku, le quantity et pareil cart_item_key que vous avez transmise à l'iframe — cette clé est le design enregistré, donc non sources Le fichier est nécessaire. Fabrixa récupère la personnalisation et la met en production.

cart_item_key Il s'agit de la référence Studio — utilisez-la uniquement pour les lignes personnalisées par un client dans Studio. Chaque ligne contient soit un cart_item_key (conçu dans Studio) ou a sources fichier (votre propre illustration — au format PDF, TIFF, JPG ou PNG), jamais les deux. Tous les autres éléments de la commande sont identiques.

POST /v2/integration/orders

{
  "number": "NL2026063001",
  "purchased_at": "2026-06-30 12:00:00",
  "rows": [
    {
      "sku": "SB796162",
      "quantity": 1,
      "cart_item_key": "0cb76770-de2d-4524-aa48-47b6e5f0d8a5"
    }
  ],
  "customer":         { "first_name": "Maria", "email": "maria@example.com" },
  "shipping_address": { "...": "..." }
}

Clés et sécurité

Application Key dans le navigateur, Access Token sur votre backend.

Studio et l'endpoint de prévisualisation utilisent votre Application Key, qui est visible dans l'intégration à dessein — elle se limite à afficher l'éditeur et les aperçus pour votre canal. La création de commandes nécessite le Application Access Token ainsi, et cela reste sur votre backend.

Dans le navigateur

Studio et aperçu

application_key dans l'URL de l'iframe du Studio
Application-Key sur l'URL de l'image d'aperçu
Affiche l'éditeur et les aperçus des designs enregistrés pour votre canal
Impossible de passer des commandes, de consulter la facturation ou d'accéder aux données d'un autre canal

Backend uniquement

Création d'une commande

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Créer et suivre les commandes via POST /v2/integration/orders
Conservez l'Access Token côté serveur — ne l'intégrez jamais dans le code client

Accès

La fonctionnalité Studio est activée par compte.

Créez un canal de vente dans votre tableau de bord afin de générer l'Application Key utilisée par l'application intégrée pour s'authentifier, puis développez et testez votre application sur ce canal avant qu'il ne commence à traiter de véritables commandes. Une démo en direct est disponible dans la documentation de référence API : vous pouvez y ouvrir Studio avec votre propre SKU et votre clé. Les tarifs varient en fonction du volume, veuillez donc contacter notre équipe pour obtenir des informations détaillées.

Prêt à intégrer cette fonctionnalité ?

Ajoutez Studio à votre boutique en ligne.

Créez dès aujourd’hui un canal de vente pour générer vos clés et intégrer Studio. Vous avez besoin d’aide pour configurer les événements ou le flux de commandes ? Contactez un Solutions Engineer : vous recevrez une réponse dans un délai d’un jour ouvré.

Contacter un Solutions Engineer Lire le guide d'intégration