Vanilla JS

Integrate with plain HTML/JavaScript

Vanilla JS Integration

No framework needed — just HTML and JavaScript.

Full Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Page — Virtual Try-On</title>
</head>
<body>

  <h1>Classic Denim Jacket</h1>
  <p>$89.00</p>

  <!-- Widget container -->
  <div id="widget-container" style="width: 100%; max-width: 600px; aspect-ratio: 3 / 4;"></div>

  <button onclick="openWidget()">Try On</button>

  <!-- 1. Load the widget bundle -->
  <script
    src="https://widget.try-on.ru/fitting-widget-bundle.js"
    id="fitting-widget-bundle"
  ></script>

  <!-- 2. Initialize -->
  <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: 'Classic Denim Jacket',
            url: 'https://example.com/images/jacket.jpg',
          },
        ],
      });
    }
  </script>
</body>
</html>

Key Points

Load the bundle script first.
Initialize with window.fitting('init', { apiKey }) before calling create.
The targetElementId must match an existing element on the page.