Utvecklare · Fabrixa Studio

Kunderna designar sina egna produkter — under eget varumärke.

Q: Är det säkert att visa applikationsnyckeln som används i Fabrixa Studio i webbläsaren?

Ja – applikationsnyckeln visas som standard i Studio-inbäddningen – den begränsar endast redigeraren och förhandsgranskningsbilden till din försäljningskanal och kan inte lägga order, läsa faktureringsinformation eller komma åt data från en annan kanal. För att skapa order krävs dessutom en separat applikationsåtkomsttoken, som förvaras i din backend och skickas som en Bearer-token.

Fabrixa Studio är ett white-label anpassningsverktyg som du bäddar in på din produktsida som en iframe. Dina kunder skapar eller laddar upp sina egna motiv och förhandsgranskar dem direkt på produkten – redigeringsverktyget bär ditt varumärke, inte vårt, så de ser aldrig Fabrixa. När de är klara lägger du beställningen utifrån den sparade anpassningen – inga tryckfiler behöver laddas upp eller lagras.

Integrationsguide → Öppna API-referensen

White-label · Shopify, WooCommerce och anpassade lösningar · Förhandsgranskning i realtid · Beställning efter referensnummer

Fabrixa Studio · Live-demo

Prova redigeraren direkt här.

Det här är precis den redigerare som du ska bädda in – öppna den, lägg in bildmaterial och utforma en riktig produkt från vår katalog. Inget behöver installeras och inget konto krävs.

Det är samma redigerare som dina kunder använder för att utforma sina sidor via Shopify- och WooCommerce-modulerna eller API. Den här sidan är en live-demo – beställningen sker på plattformen när du registrera.

Se redigeraren

Ditt varumärke. Din kunds design. En och samma yta.

Studio integrerat i en butiksfront – ett designbibliotek, verktyg för text, former, bilder och lager samt en förhandsgranskning i realtid av mönsterupprepningen på produkten. Tjänsten drivs som white label, vilket innebär att dina kunder ser just din butik och aldrig Fabrixa.

yourshop.com/anpassa

Fabrixa Studio-redigeraren integrerad i en webbutik – designbibliotek, text-, form-, bild- och lagerverktyg samt en förhandsgranskning i realtid av mönsterupprepningen på ett påslakan, som white label-produkt under återförsäljarens varumärke

Vad Studio gör

Ett anpassningsverktyg för white label, integrerat i din kassa.

Med Studio kan dina kunder anpassa produkterna i realtid – skapa en design eller ladda upp en egen – och se hur den ser ut på produkten innan de köper den, allt under ditt varumärke.

White label, under ditt varumärke

Redigeringsverktyget bär ditt varumärke, inte vårt – dina kunder kan anpassa och förhandsgranska produkter i realtid utan att någonsin se Fabrixa.

Skapa eller ladda upp motiv

De skapar en design i Studio eller laddar upp sin egen bild och placerar den sedan på produkten i redigeraren.

Produktvisualisering i realtid

Studio visar hur designen ser ut på den faktiska produkten, så att kunderna kan se vad de kommer att få innan de lägger den i varukorgen.

Sparat per artikel i varukorgen

Varje anpassning sparas i samband med en cart_item_key som du tillhandahåller – ett unikt värde per rad i varukorgen från din sida.

Förhandsgranska bild på begäran

Hämta en renderad förhandsgranskningsbild för valfri cart_item_key för att visa i varukorgen, i beställningssammanfattningen eller var som helst i din webbutik.

Ingen filhantering

Du behöver aldrig röra tryckfilerna. Använd istället cart_item_key vid beställningen, och Fabrixa lägger automatiskt till den sparade designen.

Steg 1 — Bädda in

En iframe på din produktsida.

Säljer du via Shopify eller WooCommerce? Studio är inbyggt i dessa butiksmoduler – aktivera det, ingen kod krävs. För anpassade butiksgränssnitt och plattformar kan du bädda in det själv: Studio hämtas från studio.fabrixa.com och kompletterades med en iframe. Ange tre värden i URL:en – allt annat sköts inuti redigeraren, som visar innehållet som en white-label-lösning med ditt varumärke.

application_key — din applikationsnyckel, som begränsar inbäddningen till din försäljningskanal
sku — produktvarianten SKU, hämtad från integrationen API
cart_item_key — ett unikt värde som du anger för varje rad i varukorgen; Studio sparar anpassningen utifrån detta värde

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

Steg 2 – Lyssna

Studio svarar med postMessage.

Studio skickar två meddelanden till det överordnade fönstret. customizationFinished aktiveras när kunden klickar på Lägg i varukorgen; closeButtonClicked aktiveras när kunden klickar på Tillbaka. Lyssna efter dem på det överordnade fönstret och kontrollera alltid event.origin.

När customizationFinished när händelsen utlöses, lägg till raden i din varukorg med samma nyckel cart_item_key som du skickade vidare till iframe. Den nyckeln kopplar raden till den sparade designen.

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

Steg 3 – Förhandsgranskning

Visa den färdiga designen var som helst.

När en anpassning har sparats hämtar du en renderad bild av den från förhandsgranskningsändpunkten – ställ bara in den som src av en <img>. Perfekt för varukorgen, ordersammanfattningen eller en bekräftelsessida.

Förhandsvisningen är baserad på samma cart_item_key, med din applikationsnyckel i frågesträngen.

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

Steg 4 – Beställning

Lägg ordern med referensnummer.

Vid utcheckningen, POST beställningen till /v2/integration/orders från din backend. För en linje som en kund har designat i Studio skickar du det vanliga sku och quantity plus detsamma cart_item_key som du skickade vidare till iframen. Den nyckeln är den sparade designen, så nej sources behövs. Fabrixa hämtar anpassningen och tar den i produktion.

cart_item_key är Studio-referensen – använd den endast för rader som en kund har anpassat i Studio. Varje rad innehåller antingen en cart_item_key (skapad i Studio) eller en fil med namnet sources (dina egna bildfiler: PDF, TIFF, JPG eller PNG), aldrig båda. Allt annat i beställningen är identiskt.

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

Nycklar och säkerhet

Applikationsnyckel i webbläsaren, åtkomsttoken i din backend.

Studio och förhandsgranskningens endpoint använder din Application Key, vilket enligt designen syns i den inbäddade visningen – den är begränsad till redigeraren och visar endast förhandsgranskningar för din kanal. För att skapa beställningar krävs Application Access Token också, och det finns kvar i din backend.

I webbläsaren

Studio & förhandsvisning

application_key i URL:en till Studio-iframe
Application-Key i URL:en till förhandsgranskningsbilden
Visar redigeraren och förhandsgranskningar av sparade designer för din kanal
Det går inte att lägga beställningar, se fakturor eller läsa data från en annan kanal

Endast backend

Skapa beställning

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Skapa och följ upp beställningar via POST /v2/integration/orders
Förvara åtkomsttoken på serversidan – skicka aldrig med det i klientkoden

Åtkomst

Studio aktiveras per konto.

Skapa en försäljningskanal i din kontrollpanel för att generera den Application Key som inbäddningen autentiseras med, och bygg sedan upp och testa mot den kanalen innan den tar emot riktiga beställningar. I API-referensen finns en live-demo där du kan öppna Studio med din egen SKU och nyckel – prissättningen varierar beroende på volymnivå, så prata med vårt team för mer information.

Vanliga frågor

Fabrixa Studio svarade

Vad används Fabrixa Studio till?

Fabrixa Studio är en anpassningsplattform för white-label-produkter som återförsäljare bäddar in på sin produktsida som en iframe. Kunderna skapar eller laddar upp sina egna mönster och kan förhandsgranska dem direkt på produkten, med återförsäljarens varumärke istället för Fabrixas. Beställningen görs sedan utifrån den sparade anpassningen, så det behövs inte laddas upp eller lagras någon bildfil.

Hur bäddar jag in Fabrixa Studio på min produktsida?

Lägg till en iframe som pekar på studio.fabrixa.com och ange tre värden i URL:en: application_key för att begränsa inbäddningen till din försäljningskanal, sku för produktvarianten och cart_item_key, ett unikt värde som du genererar för varje varurad och som Studio använder för att spara anpassningarna. Allt annat, inklusive redigerarens varumärkesprofil, hanteras inuti Studio.

Meddelar Fabrixa Studio min webbutik när en kund har slutfört en design?

Studio skickar två meddelanden till överordnat fönster med postMessage: ”customizationFinished”, som utlöses när kunden klickar på ”Lägg i varukorgen”, och ”closeButtonClicked”, som utlöses när kunden klickar på ”Tillbaka”. Din sida bör kontrollera event.origin innan den agerar på något av meddelandena, och sedan lägga till raden i varukorgen med samma cart_item_key som skickades in till iframe.

Hur kopplar jag en Studio-design till en beställning?

Skicka samma `cart_item_key` som du skickade till Studio-iframe som en rad i beställningen, tillsammans med SKU och antal, när du skickar en POST-begäran till /v2/integration/orders. Den nyckeln är den sparade designen, så det behövs ingen källfil för den raden – varje orderrad innehåller antingen en cart_item_key eller en källfil, aldrig båda.

Är det säkert att visa applikationsnyckeln som används i Fabrixa Studio i webbläsaren?

Ja – applikationsnyckeln syns i Studio-inbäddningen enligt designen – den begränsar endast redigeraren och förhandsgranskningsbilden till din försäljningskanal och kan inte lägga order, läsa faktureringsinformation eller få åtkomst till data från en annan kanal. För att skapa order krävs dessutom en separat applikationsåtkomsttoken, som förvaras i ditt backend-system och skickas som en Bearer-token.

Är du redo att integrera?

Lägg till Studio i din webbutik.

Skapa en försäljningskanal för att generera dina nycklar och integrera Studio redan idag. Behöver du hjälp med att koppla ihop händelserna eller orderflödet? Kontakta en lösningsingenjör – du får svar inom en arbetsdag.

Kontakta en lösningsingenjör Läs integrationsguiden