Fejlesztők · Fabrixa Studio

Lehetővé teszi ügyfeleinek, hogy saját termékeiket tervezzék meg – az Ön márkaneve alatt.

Q: Mire szolgál a Fabrixa Studio?

Az Fabrixa Studio egy fehércímkés termék-testreszabó eszköz, amelyet a kereskedők iframe-ként ágyaznak be a termékoldalukra. A vásárlók saját terveiket készítik el vagy töltik fel, és azokat élőben megtekinthetik a terméken, a Fabrixa helyett a kereskedő márkajelzése alatt. A megrendelés ezután a mentett testreszabás alapján, hivatkozással kerül leadásra, így nincs szükség grafikai fájlok feltöltésére vagy tárolására.

A Fabrixa Studio egy white-label testreszabó, amelyet a termékoldalába ágyaz be, mint iframe. Az ügyfeleid saját terveiket készítik el vagy töltik fel, majd élőben megtekinthetik azokat a terméken — a szerkesztő a te márkanevedet viseli, nem a miénket, így soha nem látják a Fabrixa nevet. Amikor elkészültek, te a mentett testreszabás alapján adod le a megrendelést — nincs szükség grafikai fájlok feltöltésére vagy tárolására.

Bevezetési útmutató → Nyissa meg az API referenciaanyagot

White-label · Shopify, WooCommerce és egyedi megoldások · Élő előnézet · Rendelés hivatkozási szám alapján

Fabrixa Stúdió · Élő bemutató

Próbálja ki itt az szerkesztőt!.

Pontosan ezt a szerkesztőt kell beágyaznod – nyisd meg, helyezd be a grafikát, és tervezz meg egy valódi terméket a katalógusunkból. Nincs szükség telepítésre, és fiók létrehozására sem.

Ez ugyanaz a szerkesztő, amelyet az ügyfeleid a Shopify- és WooCommerce-modulokon, illetve az API-n keresztül használnak a tervezéshez. Ez az oldal egy élő bemutató – a megrendelés a platformon történik, miután regisztráció.

Lásd a szerkesztőt

A te márkád. Az ügyfeled terve. Egyetlen felület.

Egy üzlethelyiségbe integrált Studio — tervezőkönyvtár, szöveg-, alakzat-, kép- és réteg-eszközök, valamint a terméken megjelenő élő ismétlési előnézet. White-label módon működik, így az ügyfeleid a te boltodat látják, soha nem a Fabrixa-t.

yourshop.com/customise

A webáruházba beépített Fabrixa Studio szerkesztő – tervezési könyvtár, szöveg-, alakzat-, kép- és réteg-eszközök, valamint a minták ismétlődésének élő előnézete paplanon, saját márkás termékek formájában a kereskedő márkaneve alatt

A Studio tevékenységi köre

Egy „white-label” testreszabó eszköz, amely be van ágyazva a fizetési folyamatba.

A Studio segítségével ügyfelei valós időben személyre szabhatják a termékeket – készíthetnek saját tervet vagy feltölthetik a sajátjukat –, és még a vásárlás előtt megtekinthetik azt a terméken, mindezt az Ön márkanevének keretein belül.

White-label, a saját márkád alatt

A szerkesztő az Ön márkáját hirdeti, nem a miénket — az ügyfelei valós időben személyre szabhatják és megtekinthetik a termékeket anélkül, hogy valaha is látnák a Fabrixa nevet.

Tervezetek létrehozása vagy feltöltése

A Studio alkalmazásban elkészítik a tervet, vagy feltöltik a saját grafikájukat, majd a szerkesztőben elhelyezik azt a terméken.

Termékek élőben történő megjelenítése

A Studio a tervet a tényleges termékre vetíti, így a vásárlók még azelőtt láthatják, hogy mit fognak kapni, mielőtt a kosárba tennék.

Kosárban lévő tételenkénti megtakarítás

Minden testreszabást egy cart_item_key amelyeket Ön szolgáltat – az Ön oldalán kosársoronként egy egyedi értéket.

Kép előnézete kérésre

Töltsön be egy renderelt előnézeti képet bármelyikhez cart_item_key hogy megjelenjen a kosárban, a rendelés összefoglalójában vagy a webáruház bármely pontján.

Nincs fájlkezelés

Soha ne nyúlj a grafikai fájlokhoz! Hivatkozz a cart_item_key a megrendeléskor, és az Fabrixa automatikusan hozzáadja a mentett tervet.

1. lépés — Beágyazás

Egy iframe a termékoldaladon.

A Shopify-on vagy a WooCommerce-en árulsz? A Studio beépítve van ezekbe az áruházmodulokba – csak kapcsold be, nincs szükség programozásra. Egyedi weboldalak és platformok esetén magad is beágyazhatod: a Studio a következő címről érhető el: studio.fabrixa.com és hozzáadva egy iframe. Adjon meg három értéket az URL-ben — minden egyébről a szerkesztő gondoskodik, amely a saját márkaneved alatt fehér címkével jeleníti meg a tartalmat.

application_key — az alkalmazáskulcsod, amely az ágyazást az értékesítési csatornádra korlátozza
sku — az SKU termékváltozat, amely az API integrációból származik
cart_item_key — egyedi érték, amelyet a kosár egyes soraihoz rendel; a Studio elmenti az ehhez tartozó testreszabást

termékoldal.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>

2. lépés — Figyelj

A Studio a postMessage segítségével válaszol.

A Studio két üzenetet küld az anyaablaknak. customizationFinished akkor aktiválódik, amikor az ügyfél rákattint Kosárba; closeButtonClicked kattintáskor elindul Vissza. Figyelj rájuk a szülőelemben, és mindig ellenőrizd event.origin.

Amikor a customizationFinished esemény bekövetkezik, add hozzá a sort a kosárhoz ugyanazzal a kulccsal cart_item_key amit az iframe-be továbbítottál. Ez a kulcs köti össze a vonalat a mentett tervvel.

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

3. lépés — Előnézet

A kész tervet bárhol bemutathatod.

Miután elmentetted a testreszabást, töltsd be annak a renderelt képét az előnézeti végpontról — egyszerűen állítsd be azt a src egy <img>. Ideális a kosárhoz, a rendelésösszefoglalóhoz vagy a visszaigazoló oldalhoz.

Az előnézet ugyanazon a kulcs alapján van összeállítva cart_item_key, az alkalmazáskulcsot a lekérdezési karakterláncban feltüntetve.

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

4. lépés — Megrendelés

A megrendelést hivatkozási szám alapján adja le.

A fizetéskor, POST a parancs, hogy /v2/integration/orders a háttérrendszerből. Ha az ügyfél a Studio programban tervezett egy sort, küldje el a szokásos sku és quantity plusz ugyanaz cart_item_key amit az iframe-be továbbítottál. Ez a kulcs a mentett terv, tehát nem sources Szükség van egy fájlra. Az Fabrixa átveszi a testreszabást, és bevezeti az éles környezetbe.

cart_item_key ez a Studio-hivatkozás – kizárólag azokra a vonalakra használd, amelyeket az ügyfél a Studio-ban testreszabott. Minden sor vagy egy cart_item_key (a Studio programban tervezve) vagy egy olyan fájl, amelynek neve sources (saját grafika: PDF, TIFF, JPG vagy PNG), soha nem mindkettő. A megrendelés minden egyéb része megegyezik.

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

Kulcsok és biztonság

Az alkalmazáskulcs a böngészőben, a hozzáférési token a háttérrendszerben.

A Studio és az előnézeti végpont a következőket használja: Application Key, amely a beágyazott elem tervezéséből adódóan látható — működése kizárólag a szerkesztőre korlátozódik, és a csatornádhoz tartozó előnézeteket jeleníti meg. A megrendelések létrehozásához szükség van a Application Access Token ez is, és ez a háttérrendszerben marad.

A böngészőben

Stúdió és előnézet

application_key a Studio iframe URL-jén
Application-Key az előnézeti kép URL-jén
Megjeleníti a szerkesztőt és a csatornádhoz tartozó mentett tervek előnézeteit
Nem lehet megrendeléseket leadni, a számlákat megtekinteni, illetve más csatornák adatait megtekinteni

Kizárólag háttérrendszer

Megrendelés létrehozása

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Megrendelések létrehozása és nyomon követése a következő oldalon keresztül: POST /v2/integration/orders
Az hozzáférési tokent tartsd a szerveren — soha ne küldd el a kliens kódjában

Hozzáférés

A Studio szolgáltatás fiókonként aktiválható.

Hozzon létre egy értékesítési csatornát a vezérlőpulton, hogy generálja azt az alkalmazáskulcsot, amellyel a beágyazott alkalmazás hitelesíti magát, majd fejlessze ki és tesztelje a rendszert ezen a csatornán, mielőtt valódi megrendeléseket fogadna. Az API referenciaanyagban található egy élő bemutató, ahol megnyithatja a Studio alkalmazást a saját SKU azonosítójával és kulcsával — az árak a forgalmi szinttől függően változnak, ezért a részletekről kérjük, forduljon csapatunkhoz.

GYIK

Fabrixa Studio válaszolt

Mire szolgál a Fabrixa Studio?

Az Fabrixa Studio egy fehér címkés termék-testreszabó eszköz, amelyet a kereskedők iframe-ként ágyaznak be a termékoldalukra. A vásárlók saját terveiket készítik el vagy töltik fel, és azokat élőben megtekinthetik a terméken, a Fabrixa helyett a kereskedő arculatával. A megrendelés ezután a mentett testreszabás alapján, hivatkozással kerül leadásra, így nincs szükség grafikai fájlok feltöltésére vagy tárolására.

Hogyan ágyazhatom be az Fabrixa Studio-t a termékoldalamra?

Adjon hozzá egy iframe-et, amely a studio.fabrixa.com oldalra mutat, és adjon meg három értéket az URL-ben: az application_key-t a beágyazás értékesítési csatornájának korlátozásához, az sku-t a termékváltozat azonosításához, valamint a cart_item_key-t, amely egy egyedi érték, amit minden kosársorozathoz generál, és amelyhez a Studio elmenti a testreszabási beállításokat. Minden egyéb, beleértve a szerkesztő arculatát is, a Studio-n belül kerül kezelésre.

Értesíti-e az Fabrixa Studio az én webáruházamat, amikor egy vásárló befejezi a tervezést?

A Studio két üzenetet küld a szülőablaknak a postMessage segítségével: a „customizationFinished” üzenetet, amely akkor vált ki, amikor a vásárló a „Kosárba” gombra kattint, és a „closeButtonClicked” üzenetet, amely akkor vált ki, amikor a „Vissza” gombra kattint. Az oldalnak ellenőriznie kell az event.origin értéket, mielőtt bármelyik üzenetre reagálna, majd hozzá kell adnia a terméket a kosárhoz, ugyanazzal a cart_item_key kulccsal, amelyet az iframe-be adtak át.

Hogyan kapcsolhatom össze egy Studio-tervet egy megrendeléssel?

Amikor a /v2/integration/orders végponthoz POST-kérést küldesz, a Studio iframe-be átadott cart_item_key-t küldd el a megrendelés egyik soraként, az SKU-val és a mennyiséggel együtt. Ez a kulcs a mentett terv, ezért ahhoz a sorhoz nincs szükség forrásfájlra — minden megrendelési sor vagy egy cart_item_key-t, vagy egy forrásfájlt tartalmaz, soha nem mindkettőt.

Biztonságos-e a Fabrixa Studio alkalmazáskulcsát a böngészőben megadni?

Igen — az alkalmazáskulcs a Studio beágyazott alkalmazásában tervezés szerint látható — hatálya kizárólag a szerkesztőre és az előnézeti képre korlátozódik az értékesítési csatornádon, és nem képes megrendeléseket leadni, számlázási adatokat olvasni, illetve más csatornák adataihoz hozzáférni. A megrendelések létrehozásához külön alkalmazás-hozzáférési tokenre is szükség van, amely a háttérrendszeredben marad, és „Bearer” tokenként kerül elküldésre.

Készen állsz az integrációra?

Adja hozzá a Studio-t az online áruházához.

Hozzon létre egy értékesítési csatornát a kulcsok generálásához, és még ma integrálja a Studio-t. Segítségre van szüksége az események vagy a megrendelési folyamat beállításához? Forduljon egy megoldásmérnökhöz – egy munkanapon belül válaszolunk.

Vegye fel a kapcsolatot egy megoldásmérnökkel Olvassa el az integrációs útmutatót