Разработчици · Fabrixa Studio

Позволете на клиентите си да създават свои собствени продукти — под Вашата марка.

Q: Безопасно ли е да се показва ключът на приложението, използван в Fabrixa Studio, в браузъра?

Да — ключът на приложението е видим във вградената версия на Studio по дизайн — той ограничава достъпа само до редактора и изображението за преглед във Вашия канал за продажби и не позволява да се правят поръчки, да се четат данни за фактуриране или да се осъществява достъп до данни от друг канал. За създаването на поръчки се изисква и отделен токен за достъп до приложението, който се съхранява във Вашия бекенд и се изпраща като токен от типа „Bearer“.

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

Ръководство за интеграция → Отворете справочника за API

„White-label“ · Shopify, WooCommerce и персонализирани решения · Предварителен преглед на живо · Поръчка по референтен номер

Fabrixa Studio · Демонстрация на живо

Опитайте редактора точно тук.

Това е точно редакторът, който ще вградите — отворете го, качите графичния материал и създайте реален продукт от нашия каталог. Не се налага да инсталирате нищо, нито да си създавате профил.

Това е същият редактор, с който Вашите клиенти създават дизайни чрез модулите на Shopify и WooCommerce или чрез API. Тази страница е демонстрация в реално време — поръчката се извършва на платформата, след като регистрация.

Вижте редактора

Вашият бранд. Дизайнът на Вашия клиент. Едно платно.

Studio, интегрирано във витрината на магазина — библиотека с дизайни, инструменти за текст, фигури, изображения и слоеве, както и предварителен преглед на повторението в реално време върху продукта. Работи под Ваша марка, така че клиентите Ви виждат Вашия магазин, а не Fabrixa.

yourshop.com/customise

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

С какво се занимава „Студио“

Инструмент за персонализиране под Ваша марка, вграден във Вашата система за плащане.

С „Studio“ клиентите Ви могат да персонализират продуктите в реално време — да създадат дизайн или да качат свой собствен — и да го видят върху продукта, преди да го закупят, като всичко това се извършва под Вашата марка.

„Уайт-лейбъл“ – под Вашата марка

Редакторът носи Вашата марка, а не нашата — Вашите клиенти персонализират и разглеждат продуктите в реално време, без изобщо да виждат 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 — Предварителен преглед

Покажете готовия дизайн където и да е.

След като персонализацията бъде запазена, изтеглете рендерирано изображение от нея чрез крайната точка за предварителен преглед — просто я задайте като 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 и крайната точка за предварителен преглед използват Вашия 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 и ключ — цените варират в зависимост от нивото на обема, затова се свържете с нашия екип за подробности.

Често задавани въпроси

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 и количеството. Този ключ представлява запазения дизайн, така че за този ред не е необходим файл sources — всеки ред от поръчката съдържа или cart_item_key, или файл sources, но никога и двете.

Безопасно ли е да се показва ключът на приложението, използван в Fabrixa Studio, в браузъра?

Да — ключът на приложението е видим във вграденото приложение в Studio по дизайн — той ограничава достъпа само до редактора и изображението за преглед във Вашия канал за продажби и не позволява да се правят поръчки, да се четат данни за фактуриране или да се осъществява достъп до данни от друг канал. За създаването на поръчки се изисква и отделен токен за достъп до приложението, който се съхранява във Вашия бекенд и се изпраща като токен от типа „Bearer“.

Готови ли сте за интеграция?

Добавете „Studio“ към витрината на Вашия магазин.

Създайте канал за продажби, за да генерирате ключовете си, и интегрирайте Studio още днес. Имате ли нужда от помощ при настройването на събитията или потока на поръчките? Свържете се с инженер по решения — ще получите отговор в рамките на един работен ден.

Свържете се с инженер по решения Прочетете ръководството за интегриране