Ontwikkelaars · Fabrixa Studio

Je klanten ontwerpen hun eigen producten — onder je eigen merk.

Fabrixa Studio is een white-label aanpassingsmodule die je in je productpagina insluit als een iframe. Je klanten maken of uploaden hun eigen ontwerpen en bekijken deze direct live op het product — de editor draagt je huisstijl, niet die van ons, dus ze zien nooit Fabrixa. Als ze klaar zijn, plaats je de bestelling op basis van de opgeslagen aanpassing — je hoeft geen ontwerpbestanden te uploaden of op te slaan.

Integratiegids → Open de API-referentie

White-label · Shopify, WooCommerce en maatwerk · Live voorbeeld · Bestellen op referentienummer

Fabrixa Studio · Live-demo

Probeer de editor hier meteen uit.

Dit is precies de editor die je zou insluiten — open hem, voeg afbeeldingen toe en ontwerp een echt product uit onze catalogus. Je hoeft niets te installeren en je hebt geen account nodig.

Het is dezelfde editor waarmee je klanten hun ontwerpen maken via de Shopify- en WooCommerce-modules of via API. Deze pagina is een live-demo — het bestellen gebeurt op het platform zodra je registreren.

Ga naar de editor

Jouw huisstijl. Het ontwerp van je klant. Eén canvas.

Studio geïntegreerd in een webwinkel — een ontwerpprogramma met tekst-, vorm-, afbeeldings- en laagtools, en een live voorbeeld van het herhalingspatroon op het product. Het werkt als white-label, dus je klanten zien jouw winkel, nooit Fabrixa.

yourshop.com/aanpassen

De Fabrixa Studio-editor die in een webwinkel is geïntegreerd — een ontwerpplatform met tekst-, vorm-, afbeeldings- en laagtools, en een live voorbeeld van de patroonherhaling op een dekbed, als white-label onder het merk van de verkoper

Wat Studio doet

Een white-label-configuratietool, geïntegreerd in je afrekenproces.

Met Studio kunnen je klanten producten in realtime personaliseren — een ontwerp maken of hun eigen ontwerp uploaden — en het resultaat op het product bekijken voordat ze het kopen, en dat alles onder je merknaam.

White-label, onder je merknaam

De editor draagt je huisstijl, niet die van ons — je klanten kunnen producten in realtime personaliseren en een voorbeeld bekijken zonder ooit Fabrixa te zien.

Ontwerpen maken of uploaden

Ze ontwerpen iets in Studio of uploaden hun eigen ontwerp, en plaatsen dit vervolgens in de editor op het product.

Live productvisualisatie

Studio toont het ontwerp op het daadwerkelijke product, zodat klanten kunnen zien wat ze zullen ontvangen voordat ze het aan hun winkelmandje toevoegen.

Opgeslagen per artikel in het winkelmandje

Elke aanpassing wordt gekoppeld aan een cart_item_key je levert — één unieke waarde per regel in het winkelwagentje aan je kant.

Afbeelding op verzoek bekijken

Haal een gerenderde voorbeeldafbeelding op voor elke cart_item_key om weer te geven in het winkelmandje, het besteloverzicht of op een andere plek in je webwinkel.

Geen bestandsverwerking

Raak de afbeeldingsbestanden nooit aan. Verwijs naar de cart_item_key bij de bestelling en Fabrixa voegt het opgeslagen ontwerp automatisch toe.

Stap 1 — Insluiten

Eén iframe op je productpagina.

Verkoop je via Shopify of WooCommerce? Studio is al in die winkelmodules ingebouwd — zet het gewoon aan, je hebt geen code nodig. Voor aangepaste webwinkels en platforms kun je het zelf integreren: Studio wordt aangeboden via studio.fabrixa.com en aangevuld met een iframe. Geef drie waarden door via de URL — de rest wordt binnen de editor afgehandeld, die de white-label-versie onder je eigen huisstijl weergeeft.

application_key — je applicatiesleutel, waarmee de integratie wordt beperkt tot jouw verkoopkanaal
sku — de productvariant SKU, afkomstig uit de integratie API
cart_item_key — een unieke waarde die je per regel in het winkelmandje genereert; Studio slaat de aanpassing op basis daarvan op

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>

Stap 2 — Luister

Studio reageert via postMessage.

Studio stuurt twee berichten naar het bovenliggende venster. customizationFinished wordt geactiveerd wanneer de klant klikt In winkelwagen plaatsen; closeButtonClicked wordt geactiveerd wanneer ze erop klikken Terug. Let erop of ze op de parent staan en controleer dit altijd event.origin.

Op customizationFinished, voeg de regel toe aan je winkelwagen met dezelfde sleutel cart_item_key die je in het iframe hebt geplaatst — dat is de link naar het opgeslagen ontwerp.

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

Stap 3 — Voorbeeld bekijken

Laat het voltooide ontwerp overal zien.

Zodra een aanpassing is opgeslagen, haal je een weergegeven afbeelding ervan op via het preview-endpoint — stel deze gewoon in als de src van een <img>. Ideaal voor het winkelwagentje, het besteloverzicht of een bevestigingspagina.

De preview is gebaseerd op hetzelfde cart_item_key, met je applicatiesleutel in de queryreeks.

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

Stap 4 — Bestellen

Plaats de bestelling op basis van het referentienummer.

Bij het afrekenen, POST de opdracht om /v2/integration/orders vanuit je backend. Voor een lijn die een klant in Studio heeft ontworpen, stuur je de sku, de quantity en hetzelfde cart_item_key die je naar het iframe hebt doorgegeven — die sleutel is het opgeslagen ontwerp, dus nee sources Er is een bestand nodig. Fabrixa haalt de aanpassingen op en zet deze in productie.

cart_item_key dit is de Studio-referentie — gebruik deze alleen voor lijnen die een klant in Studio heeft aangepast. Elke rij bevat ofwel een cart_item_key (ontworpen in Studio) of a sources bestand (je eigen ontwerp — PDF, TIFF, JPG of PNG), nooit beide. De rest van de bestelling is identiek.

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

Sleutels en beveiliging

Applicatiesleutel in de browser, toegangstoken op je backend.

Studio en het preview-endpoint maken gebruik van je Application Key, wat in de ingebedde weergave bewust zichtbaar is — het is alleen van toepassing op de editor en geeft voorbeelden weer voor je kanaal. Voor het aanmaken van bestellingen is de Application Access Token ook, en dat blijft op je backend staan.

In de browser

Studio & voorvertoning

application_key in de URL van het Studio-iframe
Application-Key in de URL van de voorbeeldafbeelding
Geeft de editor en voorbeelden van opgeslagen ontwerpen voor je kanaal weer
Het is niet mogelijk om bestellingen te plaatsen, facturen in te zien of de gegevens van een ander kanaal te bekijken

Alleen backend

Aanmaken van een bestelling

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Bestellingen aanmaken en volgen via POST /v2/integration/orders
Bewaar het toegangstoken aan de serverzijde — verstuur het nooit via de clientcode

Toegang

Studio is per account ingeschakeld.

Maak een verkoopkanaal aan in je dashboard om de applicatiesleutel te genereren waarmee de embed zich authenticeert, en bouw en test vervolgens op basis van dat kanaal voordat er daadwerkelijke bestellingen worden verwerkt. In de API-referentie vind je een live demo waarin je Studio kunt openen met je eigen SKU en sleutel — de prijzen variëren per volumetrap, dus neem contact op met ons team voor meer informatie.

Klaar om te integreren?

Voeg Studio toe aan je webshop.

Maak vandaag nog een verkoopkanaal aan om je sleutels te genereren en Studio te integreren. Heb je hulp nodig bij het inrichten van de gebeurtenissen of de bestelstroom? Neem dan contact op met een solutions engineer — je krijgt binnen één werkdag antwoord.

Neem contact op met een solutions engineer Lees de integratiegids