Vanilla JS

Интеграция с обычным HTML/JavaScript

Интеграция с Vanilla JS

Без фреймворков — только HTML и JavaScript.

Полный пример

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Страница товара — Виртуальная примерка</title>
</head>
<body>

  <h1>Классическая джинсовая куртка</h1>
  <p>7 500 ₽</p>

  <!-- Контейнер виджета -->
  <div id="widget-container" style="width: 100%; max-width: 600px; aspect-ratio: 3 / 4;"></div>

  <button onclick="openWidget()">Примерка</button>

  <!-- 1. Загрузка пакета виджета -->
  <script
    src="https://widget.try-on.ru/fitting-widget-bundle.js"
    id="fitting-widget-bundle"
  ></script>

  <!-- 2. Инициализация -->
  <script id="fitting-init">
    window.fitting = window.fitting || function() {
      (window.fitting.q = window.fitting.q || []).push(arguments);
    };
    window.fitting('init', {
      apiKey: 'YOUR_API_KEY'
    });
  </script>

  <script>
    function openWidget() {
      window.fitting('create', {
        targetElementId: 'widget-container',
        model: 'balanced',
        tryonItems: [
          {
            productName: 'Классическая джинсовая куртка',
            url: 'https://example.com/images/jacket.jpg',
          },
        ],
      });
    }
  </script>
</body>
</html>

Ключевые моменты

Сначала загружается пакетный скрипт.
Инициализируйте с помощью window.fitting('init', { apiKey }) перед вызовом create.
targetElementId должен совпадать с существующим элементом на странице.