Virtual Try On

Overview

Virtual Try-On (VTON) allows your customers to visualize how outfit items look on a model or on their own photo, directly within the Garderobo widget popup.

Platforms:

• Web — enabled via a single option in widget initialization

• Mobile — available through the Garderobo SDK

---

Web Integration

Enabling Virtual Try-On

Add the use_vton: true option to your existing widget.init call:

example.js

_garderoboWidget.then(function(widget) {
    widget.init('YOUR_API_KEY', {
        lang_code: 'tr',
        user_id: 'USER_ID',
        use_vton: true  // enables Virtual Try-On
    });

    widget.initProduct(document.getElementById('garderobo'), {
        product_id: product_id
    });

    // Add to cart handling remains unchanged
    widget.registerCallback.addToCartEvent(function(sizeId, data) {
        // your existing add-to-cart logic
    });
});

No other code changes are required on your side.

How It Works

1

When the widget opens

The widget sends a request to the Garderobo server to verify that Virtual Try-On is available for the current user and product.

2

Try On button

If the server confirms availability, a "Try On" button appears inside the widget popup.

3

Enter the Virtual Try-On screen

The customer clicks the button and enters the Virtual Try-On screen, where they can:

• Choose a pre-configured model image, or upload their own photo

• Select which items from the outfit to try on

• Tap "Generate" to produce the result image

4

Generated image & cart

The generated image is displayed in the widget. The customer can add individual items or the entire outfit to the cart.

All add-to-cart actions triggered from the Virtual Try-On screen fire the same addToCartEvent callback — no additional handling is needed.

Requirements

Requirement	Details
user_id	Must be passed in widget.init options. Used to track generation limits per user.
addToCartEvent callback	Must be registered (as with the standard widget flow).
Models catalog	Pre-configured by the Garderobo team in coordination with your store.

---

Mobile SDK Integration (React Native)

To enable Virtual Try-On in the React Native SDK, pass the useVton prop to the GarderoboWidgets component:

Virtual Try-On for mobile is available through the Garderobo SDK.

import { StyleSheet, View } from 'react-native';
import { GarderoboWidgets } from 'garderobo-react-native-sdk';

const SimpleIntegration = () => {
  const API_KEY = 'YOUR_API_KEY';
  const productId = 123456;

  return (
      <View style={styles.container}>
        <GarderoboWidgets
            apiKey={API_KEY}
            pageType="product"
            pageData={{ productId }}
            sessionKey={SESSION_KEY}
            useVton={true}
            onProductClick={handleProductClick}
            onAddToCart={handleAddToCart}
            onGoToCart={handleGoToCart}
            onInitialized={handleInitialized}
            style={styles.widgetsContainer}
        />
      </View>
  );
};

---

FAQ

Do I need to change my add-to-cart logic?

No. Virtual Try-On uses the same addToCartEvent callback as the standard widget.

Who configures the model catalog?

The Garderobo team configures the available models in the admin panel in coordination with your store.

Are there generation limits?

Yes. The server enforces per-user generation limits and shop generation limits. When the limit is reached, the "Try On" button will not appear.