Twórcy · Fabrixa Studio

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

Fabrixa Studio to white-label narzędzie do personalizacji, które umieszczasz na stronie produktu jako iframe. Twoi 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ładasz zamówienie na podstawie zapisanego projektu — nie musisz 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 kołdrze, 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 przypisana do cart_item_key dostarczasz — 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 należy modyfikować plików graficznych. Należy odwoływać się do cart_item_key zgodnie z zamówieniem, a Fabrixa automatycznie dołącza 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 pliku źródłowym i zawsze sprawdzaj event.origin.

W dniu customizationFinished, dodaj tę pozycję do koszyka, używając tego samego klucza cart_item_key który przekazałeś do ramki iframe — to jest link do zapisanego projektu.

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ć sku, ten quantity i to samo cart_item_key który przekazałeś do ramki iframe — ten klucz jest 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 (zaprojektowane w programie Studio) lub a sources plik (własna grafika — 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 punkt końcowy podglądu korzystają z Państwa Application Key, co jest widoczne w osadzonej wersji zgodnie z założeniami — obejmuje ona wyłącznie edytor i wyświetla podglądy dla Państwa kanału. Tworzenie zamówień wymaga Application Access Token to również, i to 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.

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

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