Twórcy · Fabrixa Studio

Twoi klienci projektują produkty — pod własną marką.

Fabrixa Studio to white-label narzędzie do personalizacji, które umieszczają Państwo na stronie produktu jako iframe. Państwa klienci tworzą lub przesyłają własne projekty i przeglądają ich podgląd na żywo na produkcie — edytor nosi Państwa oznaczenia firmowe, a nie nasze, więc nigdy nie widzą nazwy Fabrixa. Gdy skończą, składają Państwo zamówienie na podstawie zapisanego projektu — nie muszą Państwo przesyłać ani przechowywać żadnych plików graficznych.

Przewodnik po integracji → Otwórz dokumentację API

White-label · Shopify, WooCommerce i rozwiązania niestandardowe · Podgląd na żywo · Zamówienie według numeru referencyjnego

Fabrixa Studio · Prezentacja na żywo

Wypróbuj edytor właśnie tutaj.

To właśnie ten edytor możesz osadzić na swojej stronie — otwórz go, wstaw grafikę i zaprojektuj prawdziwy produkt z naszego katalogu. Nie trzeba niczego instalować ani zakładać konta.

To ten sam edytor, w którym Twoi klienci tworzą projekty za pomocą modułów Shopify i WooCommerce lub API. Ta strona to wersja demonstracyjna na żywo — zamówienie jest składane na platformie, gdy tylko zarejestruj się.

Zobacz edytor

Państwa marka. Projekt Państwa klienta. Jedno płótno.

Studio zintegrowane z witryną sklepową — biblioteka wzorów, narzędzia do pracy z tekstem, kształtami, obrazami i warstwami oraz podgląd powtórzeń wzorów na produkcie w czasie rzeczywistym. Działa w modelu white-label, więc Twoi klienci widzą Państwa sklep, a nie Fabrixa.

yourshop.com/spersonalizuj

Edytor Fabrixa Studio wbudowany w witrynę sklepową — biblioteka wzorów, narzędzia do pracy z tekstem, kształtami, obrazami i warstwami oraz podgląd powtarzania wzoru na żywo na poszwie na kołdrę, produkt typu white label pod marką sprzedawcy

Czym zajmuje się Studio

Narzędzie do personalizacji typu „white label”, wbudowane w proces realizacji zamówienia.

Studio pozwala Państwa klientom personalizować produkty w czasie rzeczywistym — tworzyć projekty lub przesyłać własne — oraz obejrzeć je na produkcie przed dokonaniem zakupu, a wszystko to w ramach Państwa marki.

Rozwiązanie typu „white label” pod Państwa marką

Edytor nosi Państwa logo, a nie nasze — Twoi klienci personalizują produkty i przeglądają ich podgląd w czasie rzeczywistym, nie widząc przy tym nazwy Fabrixa.

Utwórz lub prześlij projekty

Tworzą projekt w programie Studio lub przesyłają własną grafikę, a następnie umieszczają ją na produkcie w edytorze.

Wizualizacja produktu na żywo

Studio wizualizuje projekt na rzeczywistym produkcie, dzięki czemu klienci widzą, co otrzymają, zanim dodadzą produkt do koszyka.

Kwota zaoszczędzona na każdej pozycji w koszyku

Każda personalizacja jest zapisywana i przypisana do cart_item_key który Państwo dostarczają — jedną unikalną wartość dla każdej pozycji w koszyku po swojej stronie.

Podgląd obrazu na żądanie

Pobierz wyrenderowany obraz podglądu dla dowolnego cart_item_key aby wyświetlać w koszyku, podsumowaniu zamówienia lub w dowolnym miejscu w sklepie.

Brak obsługi plików

Nigdy nie muszą Państwo modyfikować plików graficznych. Wystarczy podać cart_item_key w zamówieniu, a Fabrixa automatycznie dołączy zapisany projekt.

Krok 1 — Osadź

Jedna ramka iframe na stronie produktu.

Sprzedajesz na Shopify lub WooCommerce? Studio jest wbudowane w te moduły sklepowe — wystarczy je włączyć, bez konieczności pisania kodu. W przypadku niestandardowych witryn sklepowych i platform możesz samodzielnie je osadzić: Studio jest udostępniane z studio.fabrixa.com i uzupełniono o iframe. Przekaż trzy wartości w adresie URL — resztą zajmie się edytor, który wyświetla rozwiązanie typu „white-label” z Państwa brandingiem.

application_key — Państwa klucz aplikacji, który ogranicza zakres osadzenia do Państwa kanału sprzedaży
sku — wariant produktu SKU, pobrany z integracji API
cart_item_key — unikalna wartość generowana dla każdej pozycji w koszyku; Studio zapisuje dostosowania dotyczące tej pozycji

strona-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 — Słuchaj

Studio odpowiada za pomocą funkcji postMessage.

Studio wysyła dwie wiadomości do okna nadrzędnego. customizationFinished uruchamia się, gdy klient kliknie Dodaj do koszyka; closeButtonClicked uruchamia się po kliknięciu Powrót. Zwracaj na nie uwagę w oknie nadrzędnym i zawsze sprawdzaj event.origin.

Kiedy customizationFinished gdy zdarzenie zostanie wywołane, dodaj wiersz do koszyka przy użyciu tego samego klucza cart_item_key który przekazałeś do ramki iframe. Ten klucz łączy linię z zapisanym projektem.

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 — Podgląd

Gotowy projekt można pokazać gdziekolwiek.

Po zapisaniu dostosowania pobierz jego wyrenderowany obraz z punktu końcowego podglądu — wystarczy ustawić go jako src o <img>. Idealne do koszyka, podsumowania zamówienia lub strony potwierdzenia.

Podgląd jest oparty na tym samym cart_item_key, z kluczem aplikacji w ciągu zapytania.

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 — Zamówienie

Złóż zamówienie na podstawie numeru referencyjnego.

Podczas finalizowania zamówienia, POST polecenie, aby /v2/integration/orders z serwera. W przypadku linii zaprojektowanej przez klienta w programie Studio należy wysłać standardowe sku oraz quantity plus to samo cart_item_key który przekazałeś do ramki iframe. Ten klucz to zapisany projekt, więc nie sources Potrzebny jest plik. Fabrixa pobiera dostosowania i wprowadza je do środowiska produkcyjnego.

cart_item_key jest odniesieniem do programu Studio — należy go używać wyłącznie w przypadku linii dostosowanych przez klienta w programie Studio. Każdy wiersz zawiera albo cart_item_key (zaprojektowany w programie Studio) lub plik o nazwie sources (własne grafiki: PDF, TIFF, JPG lub PNG) – nigdy obie opcje jednocześnie. Wszystkie pozostałe elementy zamówienia są identyczne.

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

Klucze i bezpieczeństwo

Klucz aplikacji w przeglądarce, token dostępu w serwerze.

Studio oraz endpoint podglądu korzystają z Państwa Application Key, co jest widoczne w osadzonej wersji zgodnie z założeniami — obejmuje on wyłącznie edytor i wyświetla podglądy dla Państwa kanału. Tworzenie zamówień wymaga również Application Access Token — ten pozostaje na Państwa serwerze.

W przeglądarce

Studio i podgląd

application_key w adresie URL ramki iframe serwisu Studio
Application-Key w adresie URL obrazka podglądu
Wyświetla edytor oraz podglądy zapisanych projektów dla Państwa kanału
Nie można składać zamówień, przeglądać rozliczeń ani wyświetlać danych z innego kanału

Tylko backend

Tworzenie zamówienia

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Tworzenie i śledzenie zamówień za pośrednictwem POST /v2/integration/orders
Token dostępu należy przechowywać po stronie serwera — nigdy nie należy go umieszczać w kodzie klienta

Dostęp

Funkcja „Studio” jest aktywowana dla każdego konta.

Proszę utworzyć kanał sprzedaży w panelu administracyjnym, aby wygenerować klucz aplikacji, za pomocą którego odbywa się uwierzytelnianie wbudowanego modułu, a następnie skonfigurować i przetestować ten kanał, zanim zacznie on przyjmować rzeczywiste zamówienia. W dokumentacji API znajduje się działająca wersja demonstracyjna, w której mogą Państwo uruchomić Studio przy użyciu własnego SKU i klucza — ceny różnią się w zależności od poziomu wolumenu, więc proszę skontaktować się z naszym zespołem, aby uzyskać szczegółowe informacje.

Najczęściej zadawane pytania

Fabrixa Studio, odpowiedziało

Do czego służy Fabrixa Studio?

Fabrixa Studio to narzędzie do personalizacji produktów typu „white label”, które sprzedawcy osadzają na swoich stronach produktów w postaci ramki iframe. Klienci tworzą lub przesyłają własne projekty i przeglądają ich podgląd na żywo na produkcie, przy czym produkt jest oznaczony marką sprzedawcy, a nie Fabrixa. Zamówienie jest następnie składane na podstawie zapisanej personalizacji poprzez odwołanie, więc nie ma potrzeby przesyłania ani przechowywania plików graficznych.

Jak osadzić Fabrixa Studio na stronie mojego produktu?

Dodaj ramkę iframe odsyłającą do strony studio.fabrixa.com i przekaż w adresie URL trzy wartości: application_key, aby ograniczyć osadzenie do Państwa kanału sprzedaży, sku – wariant produktu oraz cart_item_key – unikalną wartość generowaną dla każdej pozycji w koszyku, na podstawie której Studio zapisuje dostosowania. Wszystko inne, w tym branding edytora, jest obsługiwane w ramach Studio.

Czy studio Fabrixa powiadamia mój sklep, gdy klient zakończy projektowanie?

Studio wysyła do okna nadrzędnego dwie wiadomości za pomocą funkcji `postMessage`: `customizationFinished`, która jest wyzwalana, gdy klient kliknie przycisk „Dodaj do koszyka”, oraz `closeButtonClicked`, która jest wyzwalana, gdy kliknie przycisk „Wstecz”. Strona powinna sprawdzić wartość event.origin przed podjęciem działań w odpowiedzi na którąkolwiek z tych wiadomości, a następnie dodać pozycję do koszyka przy użyciu tego samego klucza `cart_item_key`, który został przekazany do ramki iframe.

Jak powiązać projekt z programu Studio z zamówieniem?

Podczas wysyłania żądania POST na adres /v2/integration/orders należy przesłać ten sam identyfikator `cart_item_key`, który został przekazany do ramki iframe w Studio, jako wiersz zamówienia wraz z numerem SKU i ilością. Klucz ten odpowiada zapisanemu projektowi, więc dla tego wiersza nie jest potrzebny plik sources — każdy wiersz zamówienia zawiera albo cart_item_key, albo plik sources, nigdy obie te wartości jednocześnie.

Czy klucz aplikacji używany w programie Fabrixa Studio można bezpiecznie ujawniać w przeglądarce?

Tak — klucz aplikacji jest widoczny w osadzonej wersji Studio zgodnie z założeniami — ogranicza on dostęp wyłącznie do edytora i podglądu obrazu w Państwa kanale sprzedaży i nie pozwala na składanie zamówień, przeglądanie danych rozliczeniowych ani uzyskiwanie dostępu do danych innego kanału. Do tworzenia zamówień wymagany jest również oddzielny token dostępu do aplikacji, który pozostaje w Państwa systemie backendowym i jest wysyłany jako token typu „Bearer”.

Gotowi do integracji?

Dodaj Studio do swojej witryny sklepowej.

Stwórz kanał sprzedaży, aby wygenerować klucze i wdrożyć Studio już dziś. Potrzebujesz pomocy przy konfiguracji zdarzeń lub przepływu zamówień? Skontaktuj się z inżynierem ds. rozwiązań — odpowiedź otrzymasz w ciągu jednego dnia roboczego.

Skontaktuj się z inżynierem ds. rozwiązań Zapoznaj się z przewodnikiem po integracji