Entwickler · Fabrixa Studio

Ihre Kunden gestalten eigene Produkte — unter Ihrer Marke.

Fabrixa Studio ist ein White-Label Konfigurator zum Einbetten in Ihre Produktseite 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 per Referenz 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 einem Bettbezug, 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 unter einem cart_item_key gespeichert, den Sie liefern – ein eindeutiger Wert pro Warenkorbzeile auf Ihrer Seite.

Vorschaubild auf Anfrage

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

Keine Dateiverarbeitung

Sie müssen nie Druckdateien anfassen. Verweisen Sie in der Bestellung auf den cart_item_key und Fabrixa fügt das gespeicherte Design 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.

Wenn die customizationFinished Wenn das Ereignis ausgelöst wird, fügen Sie die Zeile Ihrem Warenkorb hinzu, wobei als Schlüssel derselbe Wert verwendet wird cart_item_key die Sie an den iframe übergeben haben. Dieser Schlüssel verknüpft die Zeile mit dem gespeicherten Entwurf.

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 – setzen Sie es einfach als src eines <img>ein. 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.

Beim Checkout senden Sie die Bestellung per POST an /v2/integration/orders aus Ihrem Backend. Für eine von einem Kunden in Studio entworfene Zeile senden Sie wie gewohnt sku und quantity plus dasselbe cart_item_key das du an den iframe übergeben hast. Dieser Schlüssel ist das gespeicherte Design, also nein sources benötigt. Fabrixa übernimmt die Anpassung 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 einen cart_item_key (in Studio erstellt) oder eine Datei mit dem Namen sources (Ihre eigenen Vorlagen: 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 Ihren Application Key, der in der Einbettung bewusst sichtbar ist – er begrenzt lediglich den Editor auf Ihren Kanal und rendert Vorschauen dafür. Zum Erstellen von Bestellungen ist zusätzlich der Application Access Token erforderlich, und der bleibt 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.

FAQ

Fabrixa Studio, antwortete

Wozu dient Fabrixa Studio?

Fabrixa Studio ist ein White-Label-Produktkonfigurator, den Händler als Iframe in ihre Produktseite einbinden. Kunden erstellen oder laden ihre eigenen Designs hoch und können diese live auf dem Produkt in einer Vorschau anzeigen – und zwar unter dem Branding des Händlers statt unter dem von Fabrixa. Die Bestellung wird dann anhand der gespeicherten Individualisierung aufgegeben, sodass keine Druckdatei hochgeladen oder gespeichert werden muss.

Wie binde ich Fabrixa Studio auf meiner Produktseite ein?

Fügen Sie einen iframe hinzu, der auf studio.fabrixa.com verweist, und übergeben Sie drei Werte in der URL: „application_key“, um die Einbettung auf Ihren Vertriebskanal zu beschränken, „sku“ für die Produktvariante und „cart_item_key“, einen eindeutigen Wert, den Sie pro Warenkorbzeile generieren und anhand dessen Studio die Anpassungen speichert. Alles andere, einschließlich des Brandings des Editors, wird innerhalb von Studio abgewickelt.

Benachrichtigt Fabrixa Studio meinen Online-Shop, wenn ein Kunde ein Design fertiggestellt hat?

Das Studio sendet mit `postMessage` zwei Nachrichten an das übergeordnete Fenster: „customizationFinished“, das ausgelöst wird, wenn der Kunde auf „In den Warenkorb“ klickt, und „closeButtonClicked“, das ausgelöst wird, wenn er auf „Zurück“ klickt. Ihre Seite sollte „event.origin“ überprüfen, bevor sie auf eine der beiden Nachrichten reagiert, und dann den Artikel unter demselben „cart_item_key“, der an den Iframe übergeben wurde, zum Warenkorb hinzufügen.

Wie verknüpfe ich einen Studio-Entwurf mit einem Auftrag?

Senden Sie denselben `cart_item_key`, den Sie an den Studio-Iframe übergeben haben, zusammen mit der Artikelnummer (SKU) und der Menge als Zeile der Bestellung, wenn Sie einen POST-Request an `/v2/integration/orders` senden. Dieser Schlüssel entspricht dem gespeicherten Design, sodass für diese Zeile keine Quellen-Datei erforderlich ist – jede Bestellzeile enthält entweder einen „cart_item_key“ oder eine Quellen-Datei, niemals beides.

Ist es unbedenklich, den in Fabrixa Studio verwendeten Application Key im Browser offenzulegen?

Ja – der Application Key ist in der Studio-Einbettung bewusst sichtbar – er beschränkt den Editor und die Vorschau auf Ihren Vertriebskanal und kann keine Bestellungen aufgeben, Abrechnungsdaten einsehen oder auf die Daten eines anderen Kanals zugreifen. Für die Erstellung von Bestellungen ist zudem ein separates Application Access Token erforderlich, das sich in Ihrem Backend befindet und als Bearer-Token gesendet wird.

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