React

Integrate with a React (Vite / CRA) app

React Integration

Works with any React setup — Vite, Create React App, or custom.

1. Load the Widget Script

Add the script to your index.html:

<!-- In public/index.html or index.html (Vite) -->
<script
  src="https://widget.try-on.ru/fitting-widget-bundle.js"
  id="fitting-widget-bundle"
></script>
<script id="fitting-init">
  window.fitting = window.fitting || function() {
    (window.fitting.q = window.fitting.q || []).push(arguments);
  };
  window.fitting('init', {
    apiKey: '%VITE_TRY_ON_API_KEY%'
  });
</script>

Replace %VITE_TRY_ON_API_KEY% at build time with your actual key, or use a runtime injection approach.

2. Create a Custom Hook

// hooks/useFittingWidget.ts
interface TryonItem {
  productName: string;
  url: string;
  productId?: string;
}

interface CreateOptions {
  targetElementId: string;
  model?: 'balanced' | 'quality' | 'speed';
  tryonItems: TryonItem[];
}

declare global {
  interface Window {
    fitting: (command: string, options?: unknown) => void;
  }
}

export function useFittingWidget() {
  const open = (options: CreateOptions) => {
    window.fitting('create', options);
  };

  const close = () => {
    window.fitting('close');
  };

  return { open, close };
}

3. Use in a Component

// components/TryOnWidget.tsx
import { useFittingWidget } from '../hooks/useFittingWidget';

interface Props {
  productName: string;
  imageUrl: string;
}

export function TryOnWidget({ productName, imageUrl }: Props) {
  const { open } = useFittingWidget();

  return (
    <div>
      <div
        id="widget-container"
        style={{ width: '100%', maxWidth: 600, aspectRatio: '3/4' }}
      />
      <button
        onClick={() =>
          open({
            targetElementId: 'widget-container',
            model: 'balanced',
            tryonItems: [{ productName, url: imageUrl }],
          })
        }
      >
        Try On
      </button>
    </div>
  );
}