Виджет примерки на сайте

Установка за 4 шага

1. 1. Создайте публикуемый ключ

   В разделе «API ключи» выберите тип «Публикуемый». Такой ключ начинается с pk_live_ и предназначен для размещения в коде страницы: он умеет только открывать примерку и работает исключительно на ваших доменах. Секретный ключ tn_live_ в HTML помещать нельзя — он даёт полный доступ к API.

2. 2. Добавьте домены магазина

   Укажите origin вашей витрины целиком, со схемой: https://shop.example.ru. Запросы с любого другого домена виджет отклонит. Если позже убрать домен из списка, уже открытые сессии перестанут работать сразу.

3. 3. Вставьте тег на страницы каталога

   Поместите его перед </body> на страницах, где есть карточки товаров. Скрипт асинхронный и не влияет на скорость загрузки; при любой ошибке он просто ничего не делает и витрину не ломает.

   Копировать

   <script src="https://cdn.try-nova.shop/w/v1.js"
           data-key="pk_live_ваш_ключ"
           async></script>

4. 4. Укажите, где карточки товара

   Откройте свою витрину со ссылкой из режима настройки, кликните по карточке товара, затем по картинке этого товара. Виджет сам выведет нужные селекторы и сохранит их. Ничего пересобирать и передеплоивать не нужно — селекторы можно менять в любой момент.

Что видит покупатель

Панель открывается поверх вашей страницы в изолированном iframe. Фото покупателя живёт только внутри него: скрипты вашей страницы к нему доступа не имеют.

Если карточка нестандартная

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

<div class="product" data-trynova-garment="https://cdn.shop.ru/item-flat.jpg">
  …
</div>

Сколько это стоит

Виджет списывает кредиты из того же баланса, что и API — отдельного тарифа нет.

Защита от перерасхода

Дневной лимит магазина

жёсткий потолок в кредитах на сутки. При его достижении кнопки перестают показываться на новых загрузках страницы, а начатые примерки возвращают понятную ошибку.

Лимит на покупателя

сколько примерок и видео доступно одному посетителю в сутки.

Дубли и двойные клики

повторная отправка не создаёт вторую задачу и не списывает кредиты.

Проверка человека

при подозрительной активности включается капча Cloudflare Turnstile — до любого списания.

Данные покупателя

• — Фото хранится в приватном хранилище и никогда не отдаётся обратно в полном разрешении — только размытая миниатюра.
• — Профиль покупателя привязан к вашему магазину: тот же человек на другом сайте — другая запись, данные не пересекаются.
• — Фото удаляется по неактивности и по абсолютному сроку — что наступит раньше. Оба срока настраиваются.
• — Если браузер не умеет хранить данные (приватный режим), профиль удаляется через 24 часа, и покупателя об этом честно предупреждают.
• — Покупатель может удалить всё сам — из панели или по постоянной ссылке, которая работает, даже если виджет уже снят с сайта.

Язык

Виджет двуязычный: русский и английский. Язык выбирается один раз для магазина и применяется ко всему, что видит покупатель — надпись на кнопке, все экраны панели, причины отклонения фото и страница удаления данных. По умолчанию русский.

Видео-примерка

Опционально и по умолчанию выключено. Когда включено, покупатель может оживить готовую примерку в короткий ролик. Это отдельная платная операция со своим балансом и своим дневным лимитом — исходная примерка при этом не пересчитывается.

События для вашей аналитики

Виджет сообщает о завершённой примерке — можно отправить событие в свою аналитику.

window.TryNova.on('tryon:complete', function (e) {
  // e.request_id, e.output_format
  dataLayer.push({ event: 'trynova_tryon', id: e.request_id });
});

Если что-то не работает