01
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.
Utvecklare · Fabrixa Studio
Kunderna designar sina egna produkter — under eget varumärke.
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 bildfiler behöver laddas upp eller lagras.
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
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.
02
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.
03
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.
04
Sparat per artikel i varukorgen
Varje anpassning sparas i samband med en cart_item_key Du tillhandahåller – ett unikt värde per rad i varukorgen från din sida.
05
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 ordersammanfattningen eller var som helst i din webbutik.
06
Ingen filhantering
Du får aldrig ändra på bildfilerna. 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äljningskanalsku— produktvarianten SKU, hämtad från integrationen APIcart_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 överordnat fönster. customizationFinished aktiveras när kunden klickar Lägg i varukorgen; closeButtonClicked aktiveras när de klickar Tillbaka. Lyssna efter dem på föräldraenheten och kontrollera alltid event.origin.
Den customizationFinished, lägg till raden i din varukorg med samma nyckel cart_item_key som du skickade till iframen – det är länken 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 ordern om att /v2/integration/orders från din backend. För en linje som en kund har designat i Studio, skicka sku, den quantity och detsamma cart_item_key som du skickade till iframe – den nyckeln är den sparade designen, så nej sources Filen behövs. Fabrixa hämtar anpassningarna och överför dem till produktionsmiljön.
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 (designad i Studio) eller a sources fil (din egen bild – 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örhandsgranskningsändpunkten 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 ditt backend.
I webbläsaren
Studio & förhandsvisning
application_keyi URL:en till Studio-iframeApplication-Keyi URL:en till förhandsgranskningsbilden- Visar redigeraren och förhandsgranskningar av sparade designer för din kanal
- Det går inte att lägga order, se fakturor eller läsa data från en annan kanal
Endast backend
Skapa beställning
Authorization: Bearer APPLICATION_ACCESS_TOKENX-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 applikationsnyckel 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å kontakta vårt team för mer information.
Ä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.
Fabrixa Studio
Din design är klar.
Så här ser den ut direkt från produktionslinjen – registrera dig för att beställa den från ett enda exemplar, levererad som white label under ditt varumärke.