Vývojáři · Fabrixa Studio

Nechte své zákazníky navrhovat si vlastní výrobky – pod vaší značkou.

Fabrixa Studio je white-label nástroj pro přizpůsobení, který vložíte na stránku svého produktu jako iframe. Vaši zákazníci vytvářejí nebo nahrávají své vlastní návrhy a prohlížejí si je v reálném čase přímo na produktu – editor nese vaše firemní logo, nikoli naše, takže se jim nikdy nezobrazí název Fabrixa. Až budou hotovi, zadáte objednávku na základě uloženého přizpůsobení – nemusíte nahrávat ani ukládat žádné grafické soubory.

Průvodce integrací → Otevřete referenční příručku API

White-label · Shopify, WooCommerce a řešení na míru · Náhled v reálném čase · Objednávka podle referenčního čísla

Fabrixa Studio · Živá ukázka

Vyzkoušejte editor přímo zde.

Toto je přesně ten editor, který byste vložili – otevřete ho, vložte obrázek a navrhněte skutečný produkt z našeho katalogu. Není třeba nic instalovat, ani si zakládat účet.

Jedná se o stejný editor, ve kterém vaši zákazníci vytvářejí své stránky prostřednictvím modulů Shopify a WooCommerce nebo API. Tato stránka slouží k vyzkoušení v reálném prostředí – objednávka se provádí přímo na platformě, jakmile zaregistrovat se.

Podívejte se na editor

Vaše značka. Návrh vašeho zákazníka. Jedno plátno.

Studio integrované do internetového obchodu – knihovna designů, nástroje pro práci s textem, tvary, obrázky a vrstvami a živý náhled opakování vzoru na produktu. Funguje v režimu white-label, takže vaši zákazníci vidí váš obchod, nikoli Fabrixa.

yourshop.com/customise

Editor Fabrixa Studio integrovaný do internetového obchodu – knihovna vzorů, text, tvary, nástroje pro práci s obrázky a vrstvami a živý náhled opakování vzoru na peřině, white-label pod značkou prodejce

Čím se Studio zabývá

Nástroj pro přizpůsobení pod vlastní značkou, integrovaný do vašeho platebního procesu.

Studio umožňuje vašim zákazníkům přizpůsobovat si produkty v reálném čase – vytvořit si vlastní design nebo nahrát ten svůj – a prohlédnout si ho na produktu ještě před nákupem, a to vše pod vaší značkou.

White-label, pod vaší značkou

Editor nese vaši značku, nikoli naši – vaši zákazníci si produkty přizpůsobují a prohlížejí v reálném čase, aniž by kdy viděli Fabrixa.

Vytvořte nebo nahrajte návrhy

Vytvoří návrh přímo ve Studiu nebo nahrají vlastní grafiku a poté ji v editoru umístí na produkt.

Živá vizualizace produktu

Studio zobrazuje návrh přímo na skutečném výrobku, takže zákazníci vidí, co dostanou, ještě než si ho přidají do košíku.

Ušetřeno za každou položku v košíku

Každé přizpůsobení je uloženo u cart_item_key poskytujete — jednu jedinečnou hodnotu pro každý řádek v košíku na vaší straně.

Náhled obrázku na vyžádání

Načtěte vykreslený náhledový obrázek pro libovolný cart_item_key zobrazit v košíku, v souhrnu objednávky nebo kdekoli jinde ve vašem obchodě.

Žádná práce se soubory

Nikdy se nedotýkejte souborů s grafickými prvky. Odkazujte na cart_item_key při objednávce a Fabrixa automaticky připojí uložený návrh.

Krok 1 — Vložení

Jeden iframe na stránce produktu.

Prodáváte na Shopify nebo WooCommerce? Studio je do těchto modulů obchodů integrováno – stačí ho zapnout, bez nutnosti programování. V případě vlastních webových stránek a platforem si ho můžete vložit sami: Studio je poskytováno z studio.fabrixa.com a doplnil o iframe. Do adresy URL zadejte tři hodnoty – o vše ostatní se postará editor, který zobrazí řešení typu „white-label“ s vaším firemním brandingem.

application_key — váš aplikační klíč, který omezuje rozsah vložení na váš prodejní kanál
sku — varianta produktu SKU, získaná z integrace API
cart_item_key — jedinečná hodnota, kterou zadáte pro každou položku v košíku; Studio uloží příslušné přizpůsobení

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 — Poslouchejte

Studio odpovídá pomocí funkce postMessage.

Studio odešle dvě zprávy do nadřazeného okna. customizationFinished spustí se, když zákazník klikne Přidat do košíku; closeButtonClicked spustí se, když na to kliknou Zpět. Poslouchejte je na rodičovském kanálu a vždy si to ověřte event.origin.

Když se customizationFinished při spuštění události přidejte řádek do košíku s klíčem, který odpovídá stejnému cart_item_key který jste předali do iframe. Tento klíč propojuje daný řádek s uloženým návrhem.

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áhled

Hotový návrh můžete ukázat kdekoli.

Jakmile je přizpůsobení uloženo, načtěte jeho vykreslený obrázek z koncového bodu náhledu – stačí jej nastavit jako src z <img>. Ideální pro nákupní košík, přehled objednávky nebo stránku s potvrzením.

Náhled je založen na stejném cart_item_key, s vaším aplikačním klíčem v dotazovém řetězci.

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 proveďte na základě referenčního čísla.

Při placení, POST příkaz k /v2/integration/orders z vašeho backendu. U řádku, který si zákazník navrhl ve Studiu, odešlete obvyklý sku a quantity plus to samé cart_item_key který jste předali do iframe. Tento klíč představuje uložený návrh, takže ne sources Je zapotřebí soubor. Fabrixa načte přizpůsobení a převede je do produkčního prostředí.

cart_item_key jedná se o referenci programu Studio – použijte ji pouze pro čáry, které si zákazník přizpůsobil v programu Studio. Každý řádek obsahuje buď cart_item_key (vytvořený v programu Studio) nebo soubor s názvem sources (vaše vlastní grafika: PDF, TIFF, JPG nebo PNG), nikdy obojí. Všechny ostatní údaje v objednávce jsou stejné.

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

Klíče a bezpečnost

Aplikační klíč v prohlížeči, přístupový token na vašem backendu.

Studio a koncový bod pro náhled používají váš Application Key, což je ve vloženém prvku záměrně viditelné – jeho působnost se omezuje pouze na editor a zobrazuje náhledy pro váš kanál. K vytváření objednávek je zapotřebí Application Access Token také, a to zůstává na vašem backendu.

V prohlížeči

Studio a náhled

application_key v adrese URL iframe služby Studio
Application-Key na adrese URL náhledového obrázku
Zobrazuje editor a náhledy uložených návrhů pro váš kanál
Nelze zadávat objednávky, prohlížet faktury ani zobrazovat údaje jiného kanálu

Pouze backend

Vytvoření objednávky

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Vytvářejte a sledujte objednávky prostřednictvím POST /v2/integration/orders
Uchovávejte přístupový token na straně serveru – nikdy jej nezasílejte v klientském kódu

Přístup

Studio je aktivováno pro každý účet.

Vytvořte si v ovládacím panelu prodejní kanál, abyste vygenerovali aplikační klíč, pomocí kterého se vložený modul autentizuje, a poté tento kanál nastavte a otestujte, než začne přijímat skutečné objednávky. V referenční příručce k API najdete živou ukázku, kde si můžete otevřít Studio s vaším vlastním SKU a klíčem — ceny se liší podle objemové úrovně, proto se pro konkrétní informace obraťte na náš tým.

Často kladené otázky

Fabrixa Studio, odpovědělo

K čemu slouží Fabrixa Studio?

Fabrixa Studio je nástroj pro přizpůsobení produktů typu „white label“, který obchodníci vkládají na své produktové stránky jako iframe. Zákazníci vytvářejí nebo nahrávají své vlastní návrhy a mohou si je v reálném čase prohlédnout přímo na produktu, a to pod značkou obchodníka, nikoli pod značkou Fabrixa. Objednávka se poté zadává na základě odkazu na uloženou úpravu, takže není nutné nahrávat ani ukládat žádný grafický soubor.

Jak mohu na stránku svého produktu vložit Fabrixa Studio?

Přidejte iframe odkazující na studio.fabrixa.com a v adrese URL předávejte tři hodnoty: application_key pro omezení vloženého obsahu na váš prodejní kanál, sku pro variantu produktu a cart_item_key, což je jedinečná hodnota, kterou generujete pro každou položku v košíku a na základě které Studio ukládá příslušné přizpůsobení. Všechno ostatní, včetně brandingu editoru, se řeší přímo ve Studiu.

Upozorní studio Fabrixa můj internetový obchod, když zákazník dokončí návrh?

Studio odešle do nadřazeného okna pomocí funkce `postMessage` dvě zprávy: `customizationFinished`, která se spustí, když zákazník klikne na tlačítko „Přidat do košíku“, a `closeButtonClicked`, která se spustí, když klikne na tlačítko „Zpět“. Vaše stránka by měla před reakcí na kteroukoli z těchto zpráv ověřit hodnotu event.origin a poté přidat položku do košíku s klíčem cart_item_key, který byl předán do iframe.

Jak propojím návrh ze Studia s objednávkou?

Při odesílání požadavku POST na adresu /v2/integration/orders zašlete stejný klíč cart_item_key, který jste předali do iframe aplikace Studio, jako řádek v objednávce spolu s kódem SKU a počtem kusů. Tento klíč představuje uložený návrh, takže pro tento řádek není potřeba žádný soubor sources — každý řádek objednávky obsahuje buď cart_item_key, nebo soubor sources, nikdy obojí.

Je bezpečné zadávat aplikační klíč používaný v Fabrixa Studio přímo v prohlížeči?

Ano – aplikační klíč je ve Studio Embed záměrně viditelný – omezuje přístup pouze na editor a náhled obrázku ve vašem prodejním kanálu a nelze jej použít k zadávání objednávek, prohlížení faktur ani k přístupu k datům jiného kanálu. K vytvoření objednávek je navíc zapotřebí samostatný přístupový token aplikace, který zůstává ve vašem backendu a je odesílán jako token typu „Bearer“.

Jste připraveni na integraci?

Přidejte Studio do svého internetového obchodu.

Vytvořte si prodejní kanál, abyste mohli generovat klíče, a integrujte Studio ještě dnes. Potřebujete pomoc s nastavením událostí nebo s průběhem objednávek? Obraťte se na našeho inženýra pro řešení – odpovíme vám do jednoho pracovního dne.

Obraťte se na technika pro řešení Přečtěte si průvodce integrací