Utviklere · Fabrixa Studio

Kundene designer sine egne produkter — under eget merke.

Fabrixa Studio er et white-label tilpasningsverktøy som du legger inn på produktsiden din som en iframe. Kundene dine lager eller laster opp sine egne design og får en forhåndsvisning av dem direkte på produktet – redigeringsverktøyet bærer din merkevareprofil, ikke vår, så de ser aldri Fabrixa. Når de er ferdige, legger du inn bestillingen ved å henvise til den lagrede tilpasningen – uten å måtte laste opp eller lagre trykkfiler.

Integreringsveiledning → Åpne API-referansen

White-label · Shopify, WooCommerce og tilpassede løsninger · Forhåndsvisning i sanntid · Bestill etter referansenummer

Fabrixa Studio · Live-demo

Prøv redigeringsverktøyet her.

Dette er akkurat den redigeringsfunksjonen du kan legge inn – åpne den, legg inn illustrasjoner og utform et ekte produkt fra katalogen vår. Du trenger ikke å installere noe, og det kreves ingen konto.

Det er den samme redigeringsfunksjonen som kundene dine bruker til å designe gjennom Shopify- og WooCommerce-modulene eller API. Denne siden er en live-demo – bestillingen skjer på plattformen så snart du registrer deg.

Se redigeringsverktøyet

Din merkevareprofil. Kundens design. Ett lerret.

Studio integrert i en nettbutikk — et designbibliotek, verktøy for tekst, former, bilder og lag, samt en forhåndsvisning av mønstergjentakelse i sanntid på produktet. Det kjører som white-label, slik at kundene dine ser nettbutikken din, aldri Fabrixa.

yourshop.com/tilpass

Fabrixa Studio-redigeringsverktøyet som er integrert i nettbutikken – designbibliotek, tekst-, form-, bilde- og lagverktøy, samt en forhåndsvisning i sanntid av mønstergjentakelse på et dynetrekk, white-label under forhandlerens merkevare

Hva Studio gjør

Et verktøy for tilpasning av white-label-produkter, integrert i kassen.

Med Studio kan kundene dine tilpasse produktene i sanntid – lage et design eller laste opp sitt eget – og se hvordan det ser ut på produktet før de kjøper det, alt under din merkevareprofil.

White-label, under ditt eget merke

Redigeringsverktøyet bærer din merkevare, ikke vår – kundene dine kan tilpasse og forhåndsvise produkter i sanntid uten noen gang å se Fabrixa.

Lag eller last opp design

De lager et design i Studio eller laster opp sitt eget bildemateriale, og plasserer det deretter på produktet i redigeringsverktøyet.

Produktvisualisering i sanntid

Studio viser designet på selve produktet, slik at kundene kan se hva de vil motta før de legger det i handlekurven.

Lagret per vare i handlekurven

Hver tilpasning lagres knyttet til en cart_item_key Du leverer – én unik verdi per linje i handlekurven fra din side.

Forhåndsvisning av bilde på forespørsel

Hent et rendert forhåndsvisningsbilde for hvilken som helst cart_item_key for å vise i handlekurven, i bestillingsoversikten eller hvor som helst i nettbutikken din.

Ingen filhåndtering

Du trenger aldri å røre trykkfilene. Bruk cart_item_key ved bestillingen, og Fabrixa legger automatisk ved det lagrede designet.

Trinn 1 — Innbygging

Én iframe på produktsiden din.

Selger du på Shopify eller WooCommerce? Studio er integrert i disse butikkmodulene – bare slå det på, uten behov for koding. For tilpassede nettbutikker og plattformer kan du integrere det selv: Studio leveres fra studio.fabrixa.com og la til med en iframe. Oppgi tre verdier i URL-en – alt annet håndteres inne i redigeringsverktøyet, som viser innholdet som «white-label» under din egen merkevareprofil.

application_key — applikasjonsnøkkelen din, som begrenser innbyggingen til salgskanalen din
sku — produktvarianten SKU, hentet fra integrasjonen API
cart_item_key — en unik verdi du oppgir for hver linje i handlekurven; Studio lagrer tilpasningen knyttet til denne

produktside.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>

Trinn 2 — Lytt

Studio svarer tilbake med postMessage.

Studio sender to meldinger til overordnet vindu. customizationFinished aktiveres når kunden klikker Legg i handlekurven; closeButtonClicked avfyres når de klikker Tilbake. Lytt etter dem på det overordnede vinduet og sjekk alltid event.origin.

Når customizationFinished hvis hendelsen utløses, legg linjen til handlekurven med samme nøkkel cart_item_key du sendte inn i iframe-en. Denne nøkkelen knytter linjen til det lagrede designet.

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

Trinn 3 — Forhåndsvisning

Vis det ferdige designet hvor som helst.

Når en tilpasning er lagret, henter du et gjengitt bilde av den fra forhåndsvisningsendepunktet – du trenger bare å angi det som src av en <img>. Perfekt for handlekurven, bestillingsoversikten eller en bekreftelsesside.

Forhåndsvisningen er basert på det samme cart_item_key, med applikasjonsnøkkelen din i spørringsstrengen.

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

Trinn 4 — Bestilling

Legg inn bestillingen ved å oppgi referansenummeret.

Ved kassen, POST bestillingen til /v2/integration/orders fra backenden din. For en linje som en kunde har designet i Studio, sender du det vanlige sku og quantity pluss det samme cart_item_key du sendte inn i iframe-en. Den nøkkelen er det lagrede designet, så nei sources er nødvendig. Fabrixa henter tilpasningene og setter dem i produksjon.

cart_item_key er Studio-referansen – bruk den kun for linjer som en kunde har tilpasset i Studio. Hver rad inneholder enten en cart_item_key (laget i Studio) eller en fil med navnet sources (ditt eget bildemateriale: PDF, TIFF, JPG eller PNG), aldri begge deler. Alt annet i bestillingen er identisk.

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

Nøkler og sikkerhet

Applikasjonsnøkkel i nettleseren, tilgangstoken på backend-systemet.

Studio og endpointet for forhåndsvisning bruker din Application Key, som er synlig i den innebygde visningen etter design – den er kun begrenset til redigeringsverktøyet og viser forhåndsvisninger for kanalen din. For å opprette bestillinger må du ha Application Access Token også, og det forblir i backenden din.

I nettleseren

Studio og forhåndsvisning

application_key i URL-en til Studio-iframe-en
Application-Key på URL-en til forhåndsvisningsbildet
Viser redigeringsvinduet og forhåndsvisninger av lagrede design for kanalen din
Kan ikke legge inn bestillinger, se fakturaer eller se data fra en annen kanal

Kun backend

Opprettelse av ordre

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Opprett og følg opp bestillinger via POST /v2/integration/orders
Oppbevar tilgangstokenet på serversiden – send det aldri med i klientkoden

Tilgang

Studio er aktivert per konto.

Opprett en salgskanal i dashbordet ditt for å generere Application Key-en som innbyggingen bruker til å autentisere seg med, og deretter utvikle og teste mot denne kanalen før den tar imot reelle bestillinger. Det finnes en live-demo i API-referansen der du kan åpne Studio med din egen SKU og nøkkel — prisene varierer etter volumnivå, så snakk med teamet vårt for nærmere detaljer.

Ofte stilte spørsmål

Fabrixa Studio svarte

Hva brukes Fabrixa Studio til?

Fabrixa Studio er et verktøy for tilpasning av produkter som forhandlere kan integrere på produktsiden sin som en iframe. Kundene kan lage eller laste opp egne design og forhåndsvise dem direkte på produktet, med forhandlerens merkevare i stedet for Fabrixas. Bestillingen legges deretter inn med henvisning til den lagrede tilpasningen, slik at det ikke er behov for å laste opp eller lagre noen grafikkfiler.

Hvordan legger jeg inn Fabrixa Studio på produktsiden min?

Legg til en iframe som peker til studio.fabrixa.com, og send tre verdier med i URL-en: application_key for å begrense innbyggingen til din salgskanal, sku for produktvarianten og cart_item_key – en unik verdi du genererer for hver varelinje i handlekurven, som Studio bruker til å lagre tilpasningene mot. Alt annet, inkludert redigeringsverktøyets merkevareprofil, håndteres inne i Studio.

Gir Fabrixa Studio beskjed til nettbutikken min når en kunde er ferdig med et design?

Studio sender to meldinger til overordnet vindu ved hjelp av postMessage: «customizationFinished», som utløses når kunden klikker på «Legg til i handlekurven», og «closeButtonClicked», som utløses når kunden klikker på «Tilbake». Siden din bør sjekke event.origin før den reagerer på noen av meldingene, og deretter legge til varen i handlekurven med samme cart_item_key som ble sendt inn til iframe-rammen.

Hvordan knytter jeg et Studio-design til en bestilling?

Send den samme `cart_item_key`-en som du sendte inn til Studio-iframe-en som en rad i bestillingen, sammen med SKU og antall, når du sender en POST-forespørsel til /v2/integration/orders. Denne nøkkelen er det lagrede designet, så det trengs ingen sources-fil for den raden – hver ordre-rad inneholder enten en cart_item_key eller en sources-fil, aldri begge deler.

Er det trygt å oppgi applikasjonsnøkkelen som brukes i Fabrixa Studio i nettleseren?

Ja – applikasjonsnøkkelen er som standard synlig i Studio-innbyggingen – den begrenser tilgangen til redigeringsverktøyet og forhåndsvisningsbildet til din salgskanal, og kan ikke legge inn bestillinger, lese faktureringsinformasjon eller få tilgang til data fra andre kanaler. For å opprette bestillinger kreves det også et eget applikasjonstilgangstoken, som forblir i din backend og sendes som et «Bearer»-token.

Er du klar til å integrere?

Legg til Studio i nettbutikken din.

Opprett en salgskanal for å generere nøklene dine og integrere Studio allerede i dag. Trenger du hjelp med å konfigurere hendelsene eller ordreprosessen? Ta kontakt med en løsningsingeniør – du får svar innen én virkedag.

Ta kontakt med en løsningsingeniør Les integrasjonsveiledningen