Введите публичный ключ организации (из админки)
——Скопируйте код и вставьте на страницу сайта — файлы скачивать не нужно, виджет грузится с нашего сервера. Код уникален для вашего магазина.
Укажите URL YML-фида с дисками — система автоматически импортирует товары (названия, параметры, фото) по расписанию (время московское).
<script src="https://ваш-домен/cabinet/widget.js"></script> <div id="fitting-wheels" data-key="pk_ваш_ключ" data-wheel="uuid-диска"></div>
Всё в одном файле: разметка, стили обеих тем и логика. Отдельные CSS-файлы подключать не нужно — стили встроены в виджет и изолированы (Shadow DOM), конфликтов со стилями вашего сайта не будет. Виджет хостится на нашем домене: адрес API он берёт из src своего скрипта, указывать его не нужно.
data-key — публичный API-ключ организации (обязателен) data-mount — id контейнера, если скрипт подключён в <head> (по умолчанию fitting-wheels) data-wheel — UUID диска для предвыбора data-wheel-param — имя GET-параметра страницы с ID диска (по умолчанию wheel) data-wheel-source — auto|attribute|url|meta|window|function data-theme — dark|light (по умолчанию dark) data-accent — hex-цвет акцента, например #E8930C data-width — ширина виджета, px или % (по умолчанию 100%) data-lang — ru|en (по умолчанию en)
Источник ID диска (data-wheel-source): значение auto проверяет по очереди атрибут data-wheel, GET-параметр страницы, meta-тег <meta name="fw-wheel-id">, переменную window.fwWheelId и функцию window.fwGetWheelId(). Диск можно менять после загрузки страницы: запишите UUID в атрибут data-wheel — виджет подхватит изменение сам, либо вызовите на контейнере fwSetWheel(uuid).
<script src="https://ваш-домен/cabinet/widget.js"></script> <script src="https://ваш-домен/cabinet/widget.ru.js"></script>
Интерфейс виджета по умолчанию на английском. Для русского подключите widget.ru.js сразу после основного скрипта — порядок и способ загрузки не важны, можно даже динамически. Атрибут data-lang="en" на контейнере включает английский даже при подключённом ru-файле; data-lang="ru" фиксирует русский.
Базовый URL:
Все запросы требуют заголовок X-Public-Key: pk_ваш_ключ.
POST /api/v1/sessions — create session (frame_count: 1–72)
POST /api/v1/sessions/{id}/complete — mark frames uploaded
POST /api/v1/sessions/{id}/fit — start fitting {wheel_asset_id}
GET /api/v1/sessions/{id} — session status
GET /api/v1/sessions/{id}/gallery?wheel=uuid — fitted frame URLs
GET /api/v1/assets/list — organization wheel catalog
POST /api/v1/assets/import — import wheels [{vendor_code, title, image_url, diameter_in, ...}]
Загрузите диски через POST /api/v1/assets/import (массив объектов). Каждый диск: vendor_code (обязателен), title, image_url (PNG с прозрачностью), diameter_in.
Макс. кадров в сессии: 72. Макс. размер кадра: 10 МБ. Сессия живёт 30 дней. Rate limit: 60 запросов/мин.
<button onclick="var m = document.getElementById('fitting-wheels'); m.fwSetWheel('uuid-диска'); m.fwOpen();">Примерить</button>
Кнопку «Примерить» можно ставить в любую карточку товара или каталог: fwSetWheel переключает диск, fwOpen плавно прокручивает страницу к виджету. Корзина — на выбор: колбэк window.fwOnAddToCart = function (item) {...} (item = wheel_id, vendor_code, title, image) — полная свобода действий; или атрибут data-cart-url="https://магазин.ру/cart/add?sku={vendor_code}" на контейнере — виджет подставит значения и откроет ссылку в новой вкладке. Кнопка «В корзину» появляется в виджете после примерки, если настроен один из способов.