Розробники · Fabrixa Studio

Клієнти самі створюють дизайн — під власним брендом.

Fabrixa Studio — це white-label модуль налаштування, який ви вбудовуєте на сторінку свого товару як iframe. Ваші клієнти створюють або завантажують власні дизайни та переглядають їх у режимі реального часу на товарі — редактор має ваш брендинг, а не наш, тому вони ніколи не бачать Fabrixa. Коли вони закінчать, ви оформлюєте замовлення на основі збереженої персоналізації за посиланням — не потрібно завантажувати чи зберігати файли з макетами.

Посібник з інтеграції → Відкрити довідник API

«White-label» · Shopify, WooCommerce та індивідуальні рішення · Попередній перегляд у реальному часі · Замовлення за номером

Студія Fabrixa · Демонстрація в режимі реального часу

Спробуйте редактор прямо тут.

Це саме той редактор, який ви можете вбудувати — відкрийте його, завантажте ілюстрацію та створіть реальний товар із нашого каталогу. Нічого встановлювати не потрібно, обліковий запис не потрібен.

Це той самий редактор, за допомогою якого ваші клієнти створюють дизайн через модулі Shopify та WooCommerce або API. Ця сторінка — це тестова версія в режимі реального часу: оформлення замовлення відбувається на платформі, як тільки ви реєстр.

Перейти до редактора

Ваш брендинг. Дизайн вашого клієнта. Одне полотно.

Studio, інтегроване у вітрину магазину — бібліотека дизайнів, інструменти для роботи з текстом, фігурами, зображеннями та шарами, а також попередній перегляд повторення візерунка на товарі в режимі реального часу. Сервіс працює за принципом «white-label», тому ваші клієнти бачать саме ваш магазин, а не Fabrixa.

yourshop.com/customise

Редактор Fabrixa Studio, вбудований у вітрину магазину — бібліотека дизайнів, інструменти для роботи з текстом, фігурами, зображеннями та шарами, а також попередній перегляд повторення візерунка в режимі реального часу на підковдрі white-label під брендом продавця

Чим займається «Studio»

Інструмент для персоналізації під власний бренд, інтегрований у вашу систему оформлення замовлення.

Studio дозволяє вашим клієнтам персоналізувати товари в режимі реального часу — створювати дизайн або завантажувати власні зображення — і переглядати результат на товарі ще до покупки, причому все це під вашим брендом.

«White-label» — під вашим брендом

Редактор відображає саме ваш брендинг, а не наш — ваші клієнти персоналізують товари та переглядають їх у режимі реального часу, навіть не бачачи Fabrixa.

Створити або завантажити дизайни

Вони створюють дизайн у програмі Studio або завантажують власні зображення, а потім розміщують їх на виробі в редакторі.

Візуалізація продукту в режимі реального часу

Studio відображає дизайн на самому виробі, тож клієнти бачать, що саме вони отримають, ще до того, як додадуть товар до кошика.

Знижка на кожну одиницю товару в кошику

Кожне налаштування зберігається у зв’язку з cart_item_key (який Ви надаєте) — одне унікальне значення для кожного рядка кошика з вашого боку.

Перегляд зображення за запитом

Завантажте відрендерене зображення попереднього перегляду для будь-якого cart_item_key щоб відображати в кошику, у підсумку замовлення або в будь-якому іншому місці вашого магазину.

Без обробки файлів

Ви ніколи не торкаєтеся файлів для друку. Вкажіть cart_item_key у замовленні, і Fabrixa автоматично додає збережений дизайн.

Крок 1 — Вбудовування

Один iframe на сторінці вашого товару.

Продаєте через Shopify чи WooCommerce? Studio вже вбудовано в ці модулі магазинів — просто увімкніть його, кодувати не потрібно. Для індивідуальних інтерфейсів магазинів та платформ вбудуйте його самостійно: Studio розміщено на studio.fabrixa.com та доповнили його iframe. Вкажіть три значення в URL-адресі — все інше обробляється всередині редактора, який відображає «white-label» під вашим брендом.

application_key — ваш ключ додатка, який обмежує сферу дії вбудованого модуля вашим каналом продажів
sku — варіант товару SKU, отриманий з інтеграції API
cart_item_key — унікальне значення, яке ви вказуєте для кожного рядка кошика; Studio зберігає відповідні налаштування

сторінка-товару.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 — Слухайте

Студія відповідає за допомогою postMessage.

Studio відправляє два повідомлення у батьківське вікно. customizationFinished спрацьовує, коли клієнт натискає Додати до кошика; closeButtonClicked спрацьовує при натисканні Назад. Прослуховуйте їх у батьківському вікні та завжди перевіряйте event.origin.

Коли customizationFinished при спрацьовуванні події додайте рядок до кошика за тим самим ключем cart_item_key який ви передали в iframe. Цей ключ пов’язує рядок із збереженим дизайном.

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 — Попередній перегляд

Покажіть готовий дизайн де завгодно.

Після збереження налаштувань завантажте його відтворене зображення з endpoint попереднього перегляду — просто вкажіть його як src про <img>. Ідеально підходить для кошика, підсумкової сторінки замовлення або сторінки підтвердження.

Попередній перегляд налаштовується за тим самим cart_item_key, вказавши свій ключ додатка у рядку запиту.

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 — Замовлення

Оформіть замовлення за номером.

Під час оформлення замовлення, POST з метою /v2/integration/orders з вашого серверного модуля. Для лінії, яку клієнт створив у Studio, надішліть звичайний sku і quantity плюс те саме cart_item_key який ви передали в iframe. Цей ключ — це збережений макет, тому ні sources Потрібен файл. Fabrixa завантажує налаштування та впроваджує їх у виробництво.

cart_item_key це посилання на Studio — використовуйте його лише для ліній, які замовник налаштував у Studio. Кожен рядок містить або cart_item_key (створений у програмі Studio) або файл із назвою sources (ваші власні ілюстрації: PDF, TIFF, JPG або PNG), але ніколи не обидва формати одночасно. Усе інше в замовленні залишається без змін.

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

Ключі та безпека

Ключ додатка в браузері, токен доступу на вашому сервері.

Studio та endpoint попереднього перегляду використовують ваші Application Key, що за задумом відображається у вбудованому вікні — воно обмежується лише редактором і відображає попередній перегляд для вашого каналу. Для створення замовлень потрібно Application Access Token також, і це зберігається на вашому сервері.

У браузері

Студія та попередній перегляд

application_key в URL-адресі iframe «Studio»
Application-Key на URL-адресу зображення попереднього перегляду
Відображає редактор та попередній перегляд збережених дизайнів для вашого каналу
Неможливо розміщувати замовлення, переглядати рахунки або переглядати дані іншого каналу

Тільки бекенд

Створення замовлення

Authorization: Bearer APPLICATION_ACCESS_TOKEN
X-Application-Key: APPLICATION_KEY
Створюйте та відстежуйте замовлення за допомогою POST /v2/integration/orders
Зберігайте токен доступу на стороні сервера — ніколи не передавайте його у клієнтському коді

Доступ

Функція «Студія» активується для кожного облікового запису.

Створіть канал продажів у своїй панелі управління, щоб згенерувати Application Key, за допомогою якого здійснюється аутентифікація вбудованого модуля, а потім налаштуйте та протестуйте його на цьому каналі, перш ніж він почне приймати реальні замовлення. У довіднику API є інтерактивна демонстрація, де ви можете запустити Studio зі своїм власним SKU та ключем — ціни залежать від рівня обсягу, тому поговоріть з нашою командою про подробиці.

Часті запитання

Fabrixa Studio, відповіло

Для чого використовується Fabrixa Studio?

Fabrixa Studio — це сервіс для персоналізації товарів під власною торговою маркою, який продавці вбудовують на сторінку товару у вигляді iframe. Клієнти створюють або завантажують власні дизайни та переглядають їх у режимі реального часу на товарі, причому дизайн відображається під брендом продавця, а не Fabrixa. Потім замовлення оформлюється на основі збереженої персоналізації за посиланням, тому немає потреби завантажувати чи зберігати файли з дизайном.

Як вбудувати Fabrixa Studio на сторінку мого товару?

Додайте iframe із посиланням на studio.fabrixa.com і вкажіть у URL-адресі три значення: application_key для обмеження вбудовування вашим каналом продажів, sku — для варіанту товару, та cart_item_key — унікальне значення, яке ви генеруєте для кожної позиції в кошику, за яким Studio зберігає налаштування. Усе інше, включаючи брендинг редактора, обробляється безпосередньо в Studio.

Чи повідомляє Fabrixa Studio мою інтернет-крамницю, коли клієнт завершує створення дизайну?

Studio надсилає два повідомлення до батьківського вікна за допомогою postMessage: «customizationFinished», яке спрацьовує, коли клієнт натискає кнопку «Додати до кошика», та «closeButtonClicked», яке спрацьовує, коли він натискає кнопку «Назад». Ваша сторінка повинна перевірити event.origin перед тим, як реагувати на будь-яке з цих повідомлень, а потім додати товар до кошика за тим самим ключем cart_item_key, що передано в iframe.

Як прив’язати дизайн із Studio до замовлення?

Під час відправлення запиту POST на /v2/integration/orders вкажіть у рядку замовлення той самий ключ cart_item_key, який ви передали в iframe Studio, разом із кодом товару (SKU) та кількістю. Цей ключ є збереженим дизайном, тому для цього рядка файл джерел не потрібен — кожен рядок замовлення містить або cart_item_key, або файл джерел, але ніколи обидва одночасно.

Чи безпечно вказувати ключ додатка, який використовується в Fabrixa Studio, у браузері?

Так — ключ додатка за замовчуванням відображається у вбудованому модулі Studio; він обмежує доступ лише до редактора та попереднього перегляду зображення у вашому каналі продажів і не дозволяє оформлювати замовлення, переглядати дані про оплату або отримувати доступ до даних іншого каналу. Для створення замовлень також потрібен окремий токен доступу до додатка, який зберігається на вашому сервері та надсилається як токен типу «Bearer».

Готові до інтеграції?

Додайте Studio до вашого інтернет-магазину.

Створіть канал продажів, щоб генерувати свої ключі та інтегрувати Studio вже сьогодні. Потрібна допомога з налаштуванням подій або потоку замовлень? Зверніться до інженера з рішень — відповідь отримаєте протягом одного робочого дня.

Зв'язатися з інженером з рішень Прочитайте посібник з інтеграції