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 housse de 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 que 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.

Lorsque le customizationFinished lorsque l'événement se déclenche, ajoutez la ligne à votre panier en utilisant la même clé cart_item_key que vous avez transmise à l'iframe. Cette clé associe la ligne au 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 la commande habituelle sku et quantity plus la même chose cart_item_key que vous avez transmise à l'iframe. Cette clé correspond au thème 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 un fichier nommé sources (votre propre illustration : PDF, TIFF, JPG ou PNG), jamais les deux à la fois. 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.

FAQ

Fabrixa Studio a répondu

À quoi sert Fabrixa Studio ?

Fabrixa Studio est un outil de personnalisation de produits en white-label que les commerçants intègrent à leur page produit sous forme d'iframe. Les clients créent ou importent leurs propres motifs et peuvent les prévisualiser en temps réel sur le produit, sous la marque du commerçant plutôt que sous celle de Fabrixa. La commande est ensuite passée en référence à la personnalisation enregistrée ; il n’est donc pas nécessaire de télécharger ni de stocker de fichier d'impression.

Comment puis-je intégrer Fabrixa Studio à la page de mon produit ?

Ajoutez un iframe pointant vers studio.fabrixa.com et transmettez trois valeurs dans l'URL : application_key pour limiter l'intégration à votre canal de vente, sku pour la variante du produit, et cart_item_key, une valeur unique que vous générez pour chaque ligne du panier et à laquelle Studio associe la personnalisation. Tout le reste, y compris l’habillage de l’éditeur, est géré au sein de Studio.

Est-ce que Fabrixa Studio envoie une notification à ma boutique en ligne lorsqu'un client termine la création d'un motif ?

Studio envoie deux messages à la fenêtre parente via postMessage : « customizationFinished », qui se déclenche lorsque le client clique sur « Ajouter au panier », et « closeButtonClicked », qui se déclenche lorsqu'il clique sur « Retour ». Votre page doit vérifier la valeur de `event.origin` avant de traiter l’un ou l’autre de ces messages, puis ajouter la ligne au panier en utilisant la même clé `cart_item_key` que celle transmise à l’iframe.

Comment associer un modèle Studio à une commande ?

Envoyez la même clé « cart_item_key » que celle que vous avez transmise à l'iframe Studio en tant que ligne de la commande, accompagnée de la référence (SKU) et de la quantité, lorsque vous effectuez une requête POST vers /v2/integration/orders. Cette clé correspond au design enregistré ; aucun fichier sources n’est donc nécessaire pour cette ligne — chaque ligne de commande contient soit une clé « cart_item_key », soit un fichier sources, mais jamais les deux.

Peut-on sans risque afficher dans le navigateur la clé d'application utilisée dans Fabrixa Studio ?

Oui — la clé d'application est visible dans l'intégration Studio par défaut — elle limite l'éditeur et l'aperçu de l'image à votre canal de vente et ne permet pas de passer des commandes, de consulter les informations de facturation ni d'accéder aux données d'un autre canal. La création de commandes nécessite également un jeton d'accès à l'application distinct, qui reste sur votre backend et est envoyé sous forme de jeton « Bearer ».

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