API Reference

Complete reference for the Try-on API

API Reference

window.fitting('init', options)

Initializes the widget. Call this once, before any other methods.

Parameter	Type	Required	Description
`apiKey`	`string`	Yes	Your widget API key

window.fitting('init', {
  apiKey: 'pk_live_xxx',
});

window.fitting('create', options)

Opens the virtual try-on experience.

Parameter	Type	Required	Description
`targetElementId`	`string`	Yes	ID of the container element where the widget renders
`tryonItems`	`TryonItem[]`	Yes	Array of items available for try-on
`displayMode`	`'inline' \| 'modal'`	No	Widget display mode
`model`	`'balanced' \| 'quality' \| 'performance'`	No	Rendering model (default: `'balanced'`)
`config`	`StyleType`	No	Widget appearance settings. See Styling for details.
`callbackData`	`Any`	No	Custom data that will be sent to your server (Webhook) upon successful generation. The Webhook URL is configured in the admin panel.
`onSuccess`	`function`	No	Callback fired after successful generation
`onClose`	`function`	No	Callback fired after widget is closed

TryonItem

Field	Type	Description
`productName`	`string`	Display name of the garment
`url`	`string`	Full URL to the garment image

Styling

You can customize the widget's appearance in the dashboard: API Keys → Your Key → Customize.

You can also override the styles programmatically at initialization by passing the config object to the window.fitting('create', ...) method. Parameters passed in config take precedence and will override the settings from the dashboard:

Параметр	Тип	Обязателен	Описание
`title_color`	`string`	"#404040"	Color of main headings
`description_color`	`string`	"#9ca3af"	Color of subheadings, labels, and description texts
`background_color`	`string`	"#ffffff"	Background color of the modal window or widget container
`loader`	`string`	".../loader.json"	Direct URL to a Lottie JSON animation for the loading screen
`primary_btn_bg_color`	`string`	"#111827"	Background color of the primary call-to-action button
`primary_btn_text_color`	`string`	"#ffffff"	Text color of the primary call-to-action button
`secondary_btn_bg_color`	`string`	"#f5f5f5"	Background color of secondary buttons
`secondary_btn_text_color`	`string`	"#262626"	Text color of secondary buttons
`close_cross_color`	`string`	"#404040"	Color of the close ("X") modal button icon
`show_logo`	`string`	true	Visibility flag for the service branding logo
`show_back_btn_post_gen`	`string`	true	Visibility flag for the "Back" button on the post-generation result screen

window.fitting('create', {
  targetElementId: 'widget-container',
  model: 'balanced',
  tryonItems: [
    {
      productName: 'Denim Jacket',
      url: 'https://example.com/jacket.png',
    },
  ],
});