Вбудований JavaScript SDK. Кінцеві клієнти налаштовують власну ілюстрацію - завантажують зображення, додають текст, положення, обрізання - на сторінці продукту, в брендингу. Після збереження SDK повертає URL-адресу готового до друку ілюстрації, яку ви вводите безпосередньо в кінцеву точку замовлення. Ніяких iframe, ніякого перенаправлення, ніякого брендингу Fabrixa, видимого для кінцевого клієнта.
ВБУДОВАНИЙ JS - THEMABLE - ХУКИ ПОДІЙ - FRAMEWORK-AGNOSTIC
SDK візуалізує полотно кастомізації всередині будь-якого наданого вами DOM-елемента. На завершення клієнти можуть завантажувати файли ілюстрацій, додавати текстові шари, позиціонувати і обрізати, переглядати на фоні обраного продукту. Після збереження SDK завантажує створене зображення у сховище Fabrixa і повертає URL-адресу ілюстрації за допомогою зворотного дзвінка - готову до передати в замовлення API.
Перетягування файлів у форматах PNG, JPG, SVG, AI, PSD. Автоматичне перетворення у формат, готовий до друку. Попередження про роздільну здатність, якщо клієнтська ілюстрація занадто низька для обраного продукту.
Редаговані текстові шари з попередньо вибраними шрифтами бренду. Палітра кольорів обмежена палітрою бренду, якщо ви її вказали. Підтримуються мови RTL.
Попередній перегляд зображення на обраному продукті (футболці, худі, подушці тощо) в реальному часі за допомогою макетів продукту. Клієнти бачать, що вони отримають.
Візуальні посібники, що показують зони, безпечні для друку, зони протікання, лінії згину на багатопанельних виробах, як-от підковдри. Клієнти не можуть розміщувати ілюстрації поза зоною друку.
При збереженні SDK збирає дизайн, завантажує його до сховища Fabrixa і повертає стабільну URL-адресу. Передайте його як artwork_url в запиті на замовлення.
JS-відповіді на події готовності полотна, додавання шарів, збереження, помилки тощо. Налаштовуйте власну аналітику, A/B-тести або онбордингові потоки.
Фреймворк-діагностичний. SDK - звичайний JS - працює в React, Vue, Svelte, звичайному HTML, серверних шаблонах Rails, будь-де.
<script src="https://sdk.fabrixa.com/editor/v1/sdk.js">> . <div ідентифікатор="fbx-editor" стиль="height:600px"></div> </div> <script> const editor = редактор FabrixaEditor.init({}) контейнер: "#fbx-editor", api_key: "pk_live_yourPublicKeyHere", product_id: "prod_tee_unisex_aop", // Тема для вашого бренду тема: { primary_color: "#E95121", font_family: "Inter, system-ui", border_radius: "4px" }, // Зворотні виклики on_save: (artwork) => { }. // artwork.url - готова до друку URL-адреса - подається в замовлення API консоль.log(artwork.url, artwork.thumbnail_url); } }); .
У "The api_key ось тут громадський ключ - безпечний для відправки в коді браузера. Він авторизує лише полотно редактора; для розміщення фактичних замовлень потрібен ваш секретний ключ на бекенді.
Тематика - це індивідуальний підхід: основний колір, сімейство шрифтів, радіус рамки, а також кілька поверхневих тонів. Редактор навмисно не показує кожну змінну CSS; узгодженість між сайтами клієнтів має більше значення, ніж повна стилізація.
тема: { // Кольори бренду primary_color: "#E95121", // CTA, активні стани background_color: "#FFFFFF", // фон полотна колір_поверхні: "#F4F4F4", // панелі, список шарів text_primary: "#18202D", text_secondary: "#5C6573", // Типографіка font_family: "Inter, system-ui, sans serif", font_family_mono: "JetBrains Mono, монокосмос", // Форма border_radius: "4px", button_style: "твердий", // "solid" | "outline" // Поведінка show_powered_by: фальшивий, // приховати нижній колонтитул "Powered by Fabrixa" enable_text_layers: правда, enable_image_upload: правда, max_canvas_size: { ширина: 4096, висота: 4096 } }
Кожна значуща зміна стану редактора генерує JS-подію. Підпишіться під час створення або прикріпіть пізніше за допомогою editor.on().
const editor = редактор FabrixaEditor.init({}) /* ... */ }); // Редактор змонтовано та відрендерено редактор.на("Готово".", () => аналітика.трек("editor_open")); // Додано шар (зображення, текст) редактор.на("layer.added", (layer) => { аналітика.трек("editor_layer_added", { type: layer.type }); }); // Клієнт натиснув кнопку збереження редактор.на("Зберегти", (artwork) => { }. // Перехід до вашого бекенду для створення фактичного замовлення fetch()"/api/orders", { метод: "POST", тіло: JSON.посилювати({ artwork_url: artwork.url, product_id: "prod_tee_unisex_aop", size: selectedSize }) }); }); // Помилки (файл замалий, не вдалося завантажити тощо) редактор.на("помилка", (err) => { }. // err.code є стабільним рядком - увімкніть його консоль.error(err.code, err.message); });
SDK використовує громадський ключ, який можна безпечно відправляти в клієнтському коді. Він може рендерити полотно, приймати завантаження та створювати URL-адреси готових до друку робіт - але він не може розміщувати замовлення, запитувати рахунки або читати роботи інших клієнтів. роботи інших клієнтів. Розміщення замовлення відбувається на вашому бекенді за допомогою таємниця ключ.
Доступ до редактора SDK надається для кожного облікового запису. Після того, як ви розмістите своє перше замовлення, ви можете запросити доступ до SDK з панелі керування або звернувшись до звернувшись до інженера з розробки рішень. Ми надаємо відкриті та секретні ключі, а також середовище пісочниці для розробки інтеграції до того, як вона торкнеться реальних замовлення.
Ціни варіюються залежно від рівня обсягу SDK. Поговоріть з відділом продажів, щоб дізнатися подробиці.
Поговоріть з інженером з розробки, щоб отримати ключі SDK, налаштувати середовище пісочниці, та обговоріть будь-які власні вимоги до полотна. Доступ до SDK зазвичай надається протягом 24 години після короткого огляду.
English English 
Nederlands
Français
Deutsch
Italiano
Português
Español
Українська
