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

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

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

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

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

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

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

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

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

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

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

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

yourshop.com/customise

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

Чим займається «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) або a 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
Зберігайте токен доступу на стороні сервера — ніколи не передавайте його у клієнтському коді

Доступ

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

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

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

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

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

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