Интеграция

1. Установка виджета

Готовый код генерируется автоматически в настройках вашего магазина (кнопка «Копировать»). Вставьте его в секцию <head> или перед закрывающим тегом </body> на страницах товаров:

html

<script src="https://app.tryvice.ru/widget.js" data-shop-id="ВАШ_SHOP_ID" async defer></script>

Скрипт весит немного и грузится асинхронно, поэтому не влияет на скорость сайта и рендеринг страницы. При инициализации он сверяет заголовок Origin/Referer запроса с доменом, указанным в настройках магазина — если они не совпадают, виджет не активируется. Поэтому важно, чтобы поле «Домен» в настройках точно совпадало с сайтом, на который вставлен скрипт.

Куда вставить код на популярных платформах

Если сайт сделан на конструкторе или CMS, скрипт вставляется не в файлы шаблона, а через отдельный раздел с кодом на всех страницах. Разверните инструкцию к необходимой платформе:

InSales

В админке магазина откройте «Сайт» → «Счетчики и коды».
В блоке «Блоки кода для вставки на все страницы сайта» нажмите «Добавить».
В качестве места размещения выберите «В раздел <head>».
В поле «Назначение или сервис» впишите название, например TRYVICE.
Вставьте скопированный код виджета в поле кода и нажмите «Сохранить».

Tilda

Откройте «Настройки сайта» → вкладку «Ещё».
Найдите поле «HTML-код для вставки внутрь Head» и нажмите «Редактировать код».
Вставьте скопированный код виджета и нажмите «Сохранить».
Переопубликуйте сайт целиком — без повторной публикации изменения не появятся на уже опубликованных страницах.

Яндекс Kit

На Яндекс Kit нет отдельного поля «код на все страницы» — скрипт добавляется через Яндекс Тег Менеджер, который включается прямо в счётчике Яндекс.Метрики:

В Яндекс.Метрике откройте нужный счётчик → «Настройки» → «Счётчик» → включите «Яндекс Тег Менеджер» и «Пользовательский HTML» → «Сохранить».
Перейдите в Тег Менеджер этого счётчика, откройте раздел «Теги» → «Добавить тег».
Укажите название (например, TRYVICE), в «Шаблон тега» выберите «Пользовательский HTML» и вставьте скопированный код виджета.
В «Триггеры» добавьте триггер «Просмотр страницы» без дополнительных условий — тег сработает на всех страницах.
Сохраните тег и обязательно нажмите «Опубликовать» в Тег Менеджере — без публикации версии контейнера изменения не вступят в силу на сайте.

2. Идентификация товара

По умолчанию виджет сам определяет товар, сравнивая URL текущей страницы с полем url в вашем фиде. Виджет появляется только на страницах, путь которых содержит «Маску URL» из настроек (например, /product/).

Если у вас SPA или динамические URL, которые не совпадают с фидом, передайте ID товара явно — это тот же id, что и у тега <offer id="..."> в фиде:

html

<script src="https://app.tryvice.ru/widget.js" data-shop-id="ВАШ_SHOP_ID" data-product-id="12345" async defer></script>

3. Настройка своей кнопки

По умолчанию виджет показывает собственную плавающую кнопку в углу экрана. Но вы можете подключить его к уже существующей кнопке на сайте.

Укажите CSS-селектор этой кнопки в поле «CSS Селектор кнопки» в настройках магазина (например, .buy-btn или #try-on) — он автоматически попадёт в код виджета атрибутом data-button-selector, а собственная плавающая кнопка скрипта отключится.

html

<script src="https://app.tryvice.ru/widget.js" data-shop-id="ВАШ_SHOP_ID" data-button-selector=".try-on-btn" async defer></script>

На странице одного товара этого достаточно. А если один и тот же скрипт стоит на странице каталога с карточками сразу нескольких товаров (листинг, поиск, категория), добавьте на каждую кнопку атрибут data-tryvice-product-id со значением id нужного товара из фида — виджет переключится на этот товар прямо при клике:

html

<button class="try-on-btn" data-tryvice-product-id="12345">Примерить</button>

4. Требования к XML/YML-фиду

TRYVICE использует стандартный YML-каталог (Yandex Market Language) — тот же формат, что и Яндекс.Маркет, Яндекс Товары и большинство рекламных систем. Если фид уже настроен для них, для TRYVICE подойдёт тот же файл. Структура вложенности: корневой yml_catalog → shop → offers → один offer на каждый товар.

Если у модели есть несколько SKU на разные размеры с одними и теми же фото и ссылкой на товар, укажите у всех этих <offer> одинаковый group_id — TRYVICE соберёт их в один товар и не будет грузить в систему каждый размер отдельно.

В фиде можно передавать как весь каталог целиком (распроданные позиции — с available="false"), так и только товары в наличии — оба варианта одинаково поддерживаются.

Тег / атрибутОбязателен

offer idДа

Атрибут тега <offer> — уникальный идентификатор товара (артикул/SKU). Тот же id используется в data-product-id и data-tryvice-product-id (см. «Идентификация товара»).

offer group_idНет

Атрибут тега <offer>, объединяющий разные размеры одной модели в один товар. Если указан, TRYVICE использует его вместо id как идентификатор товара — все <offer> с одинаковым group_id схлопнутся в одну карточку.

offer availableНет

Атрибут тега <offer>, по умолчанию true. Если false — товар не показывается в виджете. Товары, пропавшие из фида при следующей синхронизации, не удаляются, а автоматически помечаются недоступными.

urlДа

Ссылка на страницу товара. По умолчанию виджет ищет товар именно по совпадению этой ссылки с текущим адресом страницы.

priceДа

Цена товара, число.

nameДа

Название товара.

categoryIdНет

Ссылка на id категории из блока <categories> — используется, чтобы категория товара была видна в панели управления.

pictureДа, минимум одно

Ссылка на фото товара. Тег можно повторять — рекомендуем минимум два фото на товар: на нейтральном фоне и на модели в полный рост, тогда у покупателя появятся оба режима примерки, «Вещь» и «Образ» (подробнее в разделе про режимы примерки).

Пример готового файла:

xml

<?xml version="1.0" encoding="UTF-8"?>
<yml_catalog date="2026-07-19 12:00">
  <shop>
    <name>Мой магазин</name>
    <categories>
      <category id="1">Блузки и рубашки</category>
      <category id="2">Брюки</category>
    </categories>
    <offers>
      <offer id="12345" available="true">
        <url>https://myshop.ru/product/bluza-iz-shelka</url>
        <price>5990</price>
        <name>Блуза из шёлкового атласа</name>
        <categoryId>1</categoryId>
        <picture>https://myshop.ru/images/bluza-front.jpg</picture>
        <picture>https://myshop.ru/images/bluza-model.jpg</picture>
      </offer>
    </offers>
  </shop>
</yml_catalog>

Фид синхронизируется автоматически каждые 6 часов. Обновить каталог вручную можно кнопкой «Обновить» в разделе «Товары» панели управления.

5. AI-анализ каталога

После синхронизации фида запустите AI-анализ кнопкой «AI Анализ» в разделе «Товары» — он определяет для каждого нового фото:

Тип фото: товар на нейтральном фоне или образ на модели — это и включает второй режим примерки.
Относится ли фото к одежде вообще — нерелевантные изображения помечаются и не используются в примерке.

Результат можно скорректировать вручную — во вкладке «Изображения» карточки товара есть выпадающий список с типом каждого фото (Не обработано / Товар / Образ / Не одежда).

Отдельно AI проверяет фото, которое загружает сам покупатель при примерке: если человек виден не в полный рост, кадр перегружен посторонними объектами или снимок нечёткий — виджет попросит покупателя загрузить другое фото и объяснит причину.