Vývojári · Fabrixa Studio

Dajte svojim zákazníkom možnosť navrhnúť si vlastné výrobky – pod vašou značkou.

Fabrixa Studio je white-label nástroj na prispôsobenie, ktorý vložíte na stránku svojho produktu ako iframe. Vaši zákazníci vytvárajú alebo nahrajú svoje vlastné návrhy a môžu si ich v reálnom čase prezrieť priamo na produkte – editor nesie vaše firemné označenie, nie naše, takže nikdy neuvidia názov Fabrixa. Keď sú hotoví, zadáte objednávku na základe uloženého prispôsobenia – bez potreby nahrávania alebo ukladania grafických súborov.

Príručka k integrácii → Otvorte referenčný dokument API

White-label · Shopify, WooCommerce a riešenia na mieru · Náhľad v reálnom čase · Objednávka podľa referenčného čísla

Fabrixa Studio · Živá ukážka

Vyskúšajte si editor priamo tu.

Toto je presne ten editor, ktorý by ste mali vložiť – otvorte ho, vložte obrázok a navrhnite skutočný produkt z nášho katalógu. Nie je potrebné nič inštalovať, ani si zakladať účet.

Ide o ten istý editor, v ktorom vaši zákazníci vytvárajú svoje návrhy prostredníctvom modulov Shopify a WooCommerce alebo API. Táto stránka slúži na živé vyskúšanie – objednávka sa uskutoční priamo na platforme, akonáhle zaregistrovať sa.

Pozrite si editor

Vaša značka. Návrh vášho zákazníka. Jedno plátno.

Studio integrované do predajného priestoru — knižnica dizajnov, textové, tvarové, obrazové a vrstvové nástroje, ako aj náhľad opakovaného vzoru v reálnom čase na produkte. Funguje v režime „white-label“, takže vaši zákazníci vidia váš obchod, nikdy nie Fabrixa.

yourshop.com/customise

Editor Fabrixa Studio integrovaný do internetového obchodu – knižnica vzorov, text, tvary, nástroje na prácu s obrázkami a vrstvami, ako aj živý náhľad opakovania vzoru na prikrývke, produkt pod vlastnou značkou predajcu

Čo robí Studio

Nástroj na prispôsobenie pod vlastnou značkou, integrovaný do vášho procesu platby.

Studio umožňuje vašim zákazníkom personalizovať produkty v reálnom čase – vytvoriť si vlastný dizajn alebo nahrať svoj vlastný – a vidieť ho na produkte ešte pred nákupom, a to všetko pod vašou značkou.

White-label, pod vašou značkou

Editor nesie vašu značku, nie našu – vaši zákazníci si môžu produkty prispôsobovať a prezerať si ich v reálnom čase, pričom sa nikdy nedozvedia o Fabrixa.

Vytvorte alebo nahrajte návrhy

Vytvoria návrh priamo v aplikácii Studio alebo nahrajú vlastnú grafiku a následne ju v editore umiestnia na výrobok.

Vizualizácia produktu v reálnom čase

Štúdio vizualizuje návrh priamo na skutočnom výrobku, takže zákazníci vidia, čo dostanú, ešte predtým, ako si ho pridajú do košíka.

Ušetrené na jednu položku v košíku

Každá úprava sa ukladá v súvislosti s cart_item_key poskytujete — jednu jedinečnú hodnotu na každý riadok v košíku na vašej strane.

Náhľad obrázku na požiadanie

Načítajte vykreslený náhľadový obrázok pre ľubovoľný cart_item_key zobraziť v košíku, v prehľade objednávky alebo kdekoľvek vo vašom obchode.

Žiadna práca so súbormi

Nikdy sa nedotýkajte súborov s grafickými prvkami. Odkazujte na cart_item_key pri objednávke a Fabrixa automaticky pripojí uložený návrh.

Krok 1 — Vloženie

Jeden iframe na vašej stránke s produktom.

Predávate cez Shopify alebo WooCommerce? Aplikácia Studio je integrovaná priamo do týchto modulov e-shopov – stačí ju zapnúť, bez nutnosti programovania. V prípade vlastných webových stránok a platforiem si ju môžete vložiť sami: Aplikácia Studio je dostupná na adrese studio.fabrixa.com a doplnil o iframe. V URL adrese zadajte tri hodnoty – o všetko ostatné sa postará editor, ktorý zobrazí riešenie typu „white-label“ s vašou značkou.

application_key — váš aplikačný kľúč, ktorý obmedzuje vkladanie na váš predajný kanál
sku — varianta výrobku SKU, získaná z integrácie API
cart_item_key — jedinečná hodnota, ktorú zadáte pre každý riadok v košíku; Studio uloží prispôsobenie na základe tejto hodnoty

stránka-produktu.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>

Krok 2 — Počúvajte

Studio odpovedá pomocou postMessage.

Studio odošle dve správy do nadradeného okna. customizationFinished spustí sa, keď zákazník klikne Pridať do košíka; closeButtonClicked spustí sa, keď na to kliknú Späť. Dávajte na ne pozor v nadradenom a vždy si to overte event.origin.

Keď sa customizationFinished ak sa spustí udalosť, pridajte riadok do košíka s rovnakým kľúčom cart_item_key ktorý ste zadali do rámca iframe. Tento kľúč prepojí riadok s uloženým návrhom.

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

Krok 3 — Náhľad

Hotový návrh môžete ukázať kdekoľvek.

Po uložení prispôsobenia načítate jeho vykreslený obrázok z koncového bodu náhľadu – stačí ho nastaviť ako src z <img>. Ideálne pre nákupný košík, prehľad objednávky alebo stránku s potvrdením.

Náhľad je označený rovnakým cart_item_key, pričom v reťazci dopytu uvediete svoj aplikačný kľúč.

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

Krok 4 — Objednávka

Objednávku zadajte na základe referenčného čísla.

Pri platbe, POST príkaz na /v2/integration/orders z vášho backendu. V prípade línie, ktorú si zákazník navrhol v programe Studio, pošlite bežný sku a quantity plus to isté cart_item_key ktorý ste odovzdali do iframe. Tento kľúč predstavuje uložený dizajn, takže nie sources Je potrebný súbor. Fabrixa načíta prispôsobenie a prenesie ho do produkčného prostredia.

cart_item_key je referenčný údaj programu Studio – používajte ho iba pre riadky, ktoré si zákazník prispôsobil v programe Studio. Každý riadok obsahuje buď cart_item_key (vytvorený v programe Studio) alebo súbor s názvom sources (vaša vlastná grafika: PDF, TIFF, JPG alebo PNG), nikdy oboje. Všetko ostatné v objednávke je rovnaké.

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

Kľúče a bezpečnosť

Aplikačný kľúč v prehliadači, prístupový token vo vašom backende.

Studio a koncový bod náhľadu používajú vaše Application Key, čo je v rámci vloženého prvku zámerne viditeľné — jeho pôsobnosť sa obmedzuje len na editor a zobrazuje náhľady pre váš kanál. Na vytvorenie objednávok je potrebné Application Access Token rovnako tak, a to zostáva vo vašom backende.

V prehliadači

Štúdio a ukážka

application_key v adrese URL rámca iframe služby Studio
Application-Key na URL náhľadového obrázku
Zobrazuje náhľady editoru a uložených návrhov pre váš kanál
Nie je možné zadávať objednávky, prehliadať faktúry ani prehliadať údaje iného kanála

Iba backend

Vytvorenie objednávky

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Vytvárajte a sledujte objednávky prostredníctvom POST /v2/integration/orders
Uchovávajte prístupový token na strane servera – nikdy ho neposielajte v klientskom kóde

Prístup

Funkcia Studio je aktivovaná pre každý účet.

Vytvorte si v riadiacom paneli predajný kanál, aby ste vygenerovali aplikačný kľúč, pomocou ktorého sa vstavaná aplikácia autentizuje, a následne vytvorte a otestujte aplikáciu na tomto kanáli, než začne prijímať skutočné objednávky. V referenčnom materiáli k API nájdete živú ukážku, kde si môžete otvoriť Studio s vaším vlastným SKU a kľúčom — ceny sa líšia podľa objemovej úrovne, preto sa obráťte na náš tím, aby vám poskytol konkrétne informácie.

Často kladené otázky

Fabrixa Studio, odpovedalo

Na čo slúži Fabrixa Studio?

Fabrixa Studio je nástroj na prispôsobovanie produktov typu „white-label“, ktorý si predajcovia vkladajú na svoju stránku s produktmi vo forme iframe. Zákazníci vytvárajú alebo nahrajú svoje vlastné návrhy a môžu si ich v reálnom čase prezrieť priamo na produkte, a to pod značkou predajcu, nie pod značkou Fabrixa. Objednávka sa potom zadá na základe odkazu na uloženú personalizáciu, takže nie je potrebné nahrať ani ukladať žiadny grafický súbor.

Ako môžem na stránku svojho produktu vložiť Fabrixa Studio?

Pridajte iframe smerujúci na stránku studio.fabrixa.com a v adrese URL zadajte tri hodnoty: application_key na obmedzenie vloženia na váš predajný kanál, sku pre variantu produktu a cart_item_key, čo je jedinečná hodnota, ktorú generujete pre každú položku v košíku a na základe ktorej Studio ukladá prispôsobenia. Všetko ostatné, vrátane brandingového dizajnu editora, sa spravuje priamo v Studio.

Upozorní Fabrixa Studio môj internetový obchod, keď zákazník dokončí návrh?

Studio odošle do nadradeného okna pomocou postMessage dve správy: „customizationFinished“, ktorá sa spustí, keď zákazník klikne na tlačidlo „Pridať do košíka“, a „closeButtonClicked“, ktorá sa spustí, keď klikne na tlačidlo „Späť“. Vaša stránka by mala pred spracovaním ktorejkoľvek z týchto správ overiť hodnotu event.origin a následne pridať riadok do košíka s kľúčom cart_item_key, ktorý bol odovzdaný do iframe.

Ako môžem prepojiť návrh zo Studia s objednávkou?

Pri odosielaní požiadavky typu POST na adresu /v2/integration/orders zadajte ten istý kľúč cart_item_key, ktorý ste odovzdali do rámca iframe v aplikácii Studio, ako riadok v objednávke spolu s kódom SKU a množstvom. Tento kľúč predstavuje uložený návrh, takže pre tento riadok nie je potrebný žiadny súbor sources – každý riadok objednávky obsahuje buď cart_item_key, alebo súbor sources, nikdy však oboje.

Je bezpečné zverejniť aplikačný kľúč používaný v programe Fabrixa Studio v prehliadači?

Áno – aplikačný kľúč je v rámci Studio Embed viditeľný už zo svojej podstaty – obmedzuje prístup iba na editor a náhľad obrázku vo vašom predajnom kanáli a nemôže vytvárať objednávky, čítať fakturačné údaje ani pristupovať k údajom iného kanála. Na vytváranie objednávok je potrebný aj samostatný prístupový token aplikácie, ktorý zostáva vo vašom backende a odosiela sa ako token typu „Bearer“.

Ste pripravení na integráciu?

Pridajte Studio do svojho internetového obchodu.

Vytvorte si predajný kanál, v ktorom si budete generovať kľúče, a integrujte Studio ešte dnes. Potrebujete pomoc s nastavením udalostí alebo toku objednávok? Obráťte sa na inžiniera pre riešenia – odpoveď dostanete do jedného pracovného dňa.

Obráťte sa na inžiniera pre riešenia Prečítajte si príručku k integrácii