Gå til hovedinnholdet
Kontakt
Fabrixa Studio-redigeringsverktøyet — et white-label-verktøy for produkttilpasning som er integrert i nettbutikken
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 grafikkfiler.

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 registrere seg.

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, med hvit etikett under forhandlerens merkevareFabrixa 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, med hvit etikett 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.

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

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

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

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

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

06
Ingen filhåndtering

Du må aldri endre på kunstverkfilene. 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å foreldreenheten og sjekk alltid event.origin.

Den customizationFinished, legg varen til handlekurven din med samme cart_item_key du sendte inn i iframe-en — det er lenken 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 ordren om å /v2/integration/orders fra backenden din. For en linje som en kunde har designet i Studio, send sku, den quantity og det samme cart_item_key den du sendte inn i iframe-en — den nøkkelen er det lagrede designet, så nei sources Filen 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 (designet i Studio) eller a sources fil (ditt eget design — 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 forhåndsvisningsendepunktet 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 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 applikasjonsnøkkelen 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å ta kontakt med vårt team for nærmere detaljer.

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