Entwickler · Fabrixa Studio

Ihre Kunden gestalten eigene Produkte — unter Ihrer Marke.

Fabrixa Studio ist ein White-Label Konfigurator, den Sie als iframe. Ihre Kunden erstellen oder laden ihre eigenen Designs hoch und können diese live auf dem Produkt in der Vorschau anzeigen – der Editor trägt Ihr Branding, nicht unseres, sodass sie Fabrixa nie zu Gesicht bekommen. Wenn sie fertig sind, geben Sie die Bestellung anhand der gespeicherten Individualisierung auf – es müssen keine Druckdateien hochgeladen oder gespeichert werden.

Integrationsleitfaden → Öffnen Sie die API-Referenz

White-Label · Shopify, WooCommerce und maßgeschneiderte Lösungen · Live-Vorschau · Bestellung per Referenz

Fabrixa Studio · Live-Demo

Probieren Sie den Editor gleich hier aus.

Das ist genau der Editor, den Sie einbinden würden – öffnen Sie ihn, fügen Sie Ihr Bildmaterial ein und gestalten Sie ein echtes Produkt aus unserem Katalog. Keine Installation erforderlich, kein Konto nötig.

Es handelt sich um denselben Editor, mit dem Ihre Kunden über die Shopify- und WooCommerce-Module oder API ihre Designs erstellen. Diese Seite dient als Live-Testumgebung – die Bestellung erfolgt auf der Plattform, sobald Sie registrieren.

Zum Editor

Ihr Markenimage. Das Design Ihrer Kunden. Eine Arbeitsfläche.

In einen Online-Shop integriertes Studio – eine Designbibliothek, Text-, Form-, Bild- und Ebenen-Werkzeuge sowie eine Live-Vorschau der Musterwiederholung auf dem Produkt. Es läuft als White-Label-Lösung, sodass Ihre Kunden Ihren Shop sehen und niemals Fabrixa.

yourshop.com/customise

Der in einen Online-Shop integrierte Fabrixa Studio-Editor – Designbibliothek, Text-, Form-, Bild- und Ebenen-Werkzeuge sowie eine Live-Vorschau der Musterwiederholung auf einer Bettdecke, als White-Label-Produkt unter der Marke des Händlers

Was Studio macht

Ein White-Label-Konfigurator, der in Ihren Bestellvorgang integriert ist.

Mit Studio können Ihre Kunden Produkte in Echtzeit individuell gestalten – ein Design entwerfen oder ein eigenes hochladen – und es vor dem Kauf auf dem Produkt ansehen, und das alles unter Ihrem Branding.

White-Label, unter Ihrer Marke

Der Editor trägt Ihr Branding, nicht unseres – Ihre Kunden können Produkte in Echtzeit individuell gestalten und in der Vorschau ansehen, ohne jemals Fabrixa zu sehen.

Designs erstellen oder hochladen

Ihre Kunden bauen ein Design in Studio oder laden ihr eigenes Motiv hoch und platzieren diese anschließend im Editor auf dem Produkt.

Live-Produktvisualisierung

Studio zeigt das Design auf dem tatsächlichen Produkt an, sodass Kunden sehen können, was sie erhalten werden, bevor sie es in den Warenkorb legen.

Pro Warenkorb-Artikel gespeichert

Jede Anpassung wird einem cart_item_key Sie liefern — einen eindeutigen Wert pro Warenkorbzeile auf Ihrer Seite.

Vorschaubild auf Anfrage

Rufen Sie ein gerendertes Vorschaubild für ein beliebiges cart_item_key um sie im Warenkorb, in der Bestellübersicht oder an einer beliebigen Stelle in Ihrem Shop anzuzeigen.

Keine Dateiverarbeitung

Sie dürfen niemals die Druckdateien bearbeiten. Verweisen Sie auf die cart_item_key auf der Bestellung, und Fabrixa fügt den gespeicherten Entwurf automatisch hinzu.

Schritt 1 – Einbetten

Ein Iframe auf Ihrer Produktseite.

Verkaufen Sie über Shopify oder WooCommerce? Studio ist in diese Shop-Module integriert – einfach aktivieren, ganz ohne Programmierkenntnisse. Bei individuellen Shop-Auftritten und Plattformen können Sie es selbst einbinden: Studio wird bereitgestellt von studio.fabrixa.com und ergänzt durch ein iframe. Übergeben Sie drei Werte in der URL – alles Weitere wird im Editor abgewickelt, der das White-Label-Design unter Ihrem Branding darstellt.

application_key — Ihr Application Key, der die Einbettung auf Ihren Vertriebskanal beschränkt
sku — die SKU der Produktvariante, abgerufen aus der Integration API
cart_item_key — ein eindeutiger Wert, den Sie pro Warenkorbzeile generieren; Studio speichert die entsprechenden Anpassungen

product-page.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>

Schritt 2 – Empfangen

Studio antwortet mit „postMessage“.

Studio sendet zwei Meldungen an das übergeordnete Fenster. customizationFinished wird ausgelöst, wenn der Kunde darauf klickt In den Warenkorb; closeButtonClicked feuert, wenn sie darauf klicken Zurück. Hören Sie im Parent-Window darauf und prüfen Sie immer event.origin.

Am customizationFinished, fügen Sie die Zeile Ihrem Warenkorb hinzu, wobei als Schlüssel derselbe Wert verwendet wird cart_item_key den Sie an das iframe übergeben haben – das ist der Link zum gespeicherten Design.

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();
  }
});

Schritt 3 – Vorschau

Zeigen Sie das fertige Design überall.

Sobald eine Anpassung gespeichert wurde, rufen Sie ein gerendertes Bild davon über den Preview-Endpoint ab – legen Sie es einfach als src eines <img>. Ideal für den Warenkorb, die Bestellübersicht oder eine Bestätigungsseite.

Die Vorschau basiert auf demselben cart_item_key, wobei Ihr Application Key im Abfrage-String enthalten ist.

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">

Schritt 4 – Bestellung

Geben Sie die Bestellung per Referenz auf.

An der Kasse, POST die Anweisung, /v2/integration/orders aus Ihrem Backend. Für eine von einem Kunden in Studio entworfene Zeile senden Sie die sku, das quantity und dasselbe cart_item_key den Sie an das iframe übergeben haben – dieser Schlüssel ist das gespeicherte Design, also nein sources Die Datei wird benötigt. Fabrixa übernimmt die Anpassungen und überführt sie in die Produktion.

cart_item_key ist die Studio-Referenz – verwenden Sie sie nur für Zeilen, die ein Kunde in Studio angepasst hat. Jede Zeile enthält entweder eine cart_item_key (entworfen in Studio) oder a sources Datei (Ihr eigenes Bildmaterial – PDF, TIFF, JPG oder PNG), niemals beides. Alle anderen Angaben in der Bestellung sind identisch.

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": { "...": "..." }
}

Schlüssel & Sicherheit

Application Key im Browser, Access Token in Ihrem Backend.

Studio und der Preview-Endpoint verwenden Ihre Application Key, was in der Einbettung bewusst sichtbar ist – es beschränkt sich ausschließlich auf den Editor und zeigt Vorschauen für Ihren Kanal an. Zum Erstellen von Bestellungen ist die Application Access Token ebenfalls, und das verbleibt in Ihrem Backend.

Im Browser

Studio & Vorschau

application_key in der URL des Studio-iframe
Application-Key in der URL des Vorschaubildes
Zeigt den Editor und die Vorschau der gespeicherten Designs für Ihren Kanal an
Kann keine Bestellungen aufgeben, Abrechnungen einzusehen oder die Daten eines anderen Kanals abzurufen

Nur Backend

Bestellungen erstellen

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Bestellungen erstellen und nachverfolgen über POST /v2/integration/orders
Bewahren Sie den Access Token serverseitig auf – geben Sie ihn niemals im Client-Code weiter

Zugang

Studio wird pro Konto aktiviert.

Erstellen Sie in Ihrem Dashboard einen Vertriebskanal, um den Application Key zu generieren, mit dem die Einbettung authentifiziert wird, und erstellen und testen Sie die Anwendung anschließend anhand dieses Kanals, bevor echte Bestellungen entgegengenommen werden. In der API-Referenz finden Sie eine Live-Demo, in der Sie Studio mit Ihrem eigenen SKU und Schlüssel öffnen können – die Preise variieren je nach Volumenstufe, wenden Sie sich daher für Einzelheiten bitte an unser Team.

Sind Sie bereit für die Integration?

Binden Sie Studio in Ihren Shop ein.

Richten Sie noch heute einen Vertriebskanal ein, um Ihre Schlüssel zu generieren und Studio einzubinden. Benötigen Sie Unterstützung bei der Anbindung der Ereignisse oder des Bestellablaufs? Wenden Sie sich an einen Solutions Engineer – Sie erhalten innerhalb eines Werktags eine Antwort.

Kontaktieren Sie einen Solutions Engineer Lesen Sie den Integrationsleitfaden