Thankly SDK for JavaScript
    Preparing search index...

    Interface VirtualTryOnConfig

    Options for mounting the virtual try-on widget.

    interface VirtualTryOnConfig {
        catalogSlug: string;
        categories?: string[];
        context?: Context;
        experienceResponse: CreateExperienceResponse;
        initialState?: Partial<VirtualTryOnState>;
        layout?: { mode: VirtualTryOnLayoutMode };
        maxSelections?: number;
        onAddToCart?: (product: CatalogProduct) => void;
        onAddToWishlist?: (product: CatalogProduct) => void;
        onClose?: () => void;
        onComplete?: (result: VirtualTryOnResult) => void;
        onError?: (error: VirtualTryOnError) => void;
        onProgress?: (stage: "uploading" | "generating", progress?: number) => void;
        onStateChange?: (state: VirtualTryOnState) => void;
        persistState?: {
            enabled: boolean;
            key?: string;
            storage?: "localStorage" | "sessionStorage";
        };
        purchaseContext?: PurchaseContext;
        recommendations?: { budgetMax?: number; maxResults?: number };
        styling?: { externalStylesheet?: boolean; nonce?: string };
        theme?: {
            borderRadius?: string;
            fontFamily?: string;
            primaryColor?: string;
        };
    }
    Index
    catalogSlug categories? context? experienceResponse initialState? layout? maxSelections? onAddToCart? onAddToWishlist? onClose? onComplete? onError? onProgress? onStateChange? persistState? purchaseContext? recommendations? styling? theme?
    catalogSlug: string

    Catalog to draw garments from.

    categories?: string[]

    Categories to restrict to.

    context?: Context

    Experience context forwarded to the recommendation capability.

    experienceResponse: CreateExperienceResponse

    An already-created experience to attach to, instead of creating one.

    initialState?: Partial<VirtualTryOnState>

    State to restore on mount.

    layout?: { mode: VirtualTryOnLayoutMode }

    Layout variant to mount.

    Type Declaration

    • mode: VirtualTryOnLayoutMode

      default is vertical and mobile-first; horizontal is a two-panel desktop layout.

    maxSelections?: number

    How many garments may be selected at once.

    onAddToCart?: (product: CatalogProduct) => void

    Called when the user adds a product to the cart.

    onAddToWishlist?: (product: CatalogProduct) => void

    Called when the user saves a product.

    onClose?: () => void

    Called when the user dismisses the widget.

    onComplete?: (result: VirtualTryOnResult) => void

    Called when generation finishes.

    onError?: (error: VirtualTryOnError) => void

    Called when generation fails.

    onProgress?: (stage: "uploading" | "generating", progress?: number) => void

    Called with progress updates during generation.

    onStateChange?: (state: VirtualTryOnState) => void

    Called whenever widget state changes.

    persistState?: {
        enabled: boolean;
        key?: string;
        storage?: "localStorage" | "sessionStorage";
    }

    Whether try-on progress survives a page reload, and where it is stored.

    Type Declaration

    • enabled: boolean

      Whether persistence is on.

    • Optionalkey?: string

      Storage key used for persisted state.

    • Optionalstorage?: "localStorage" | "sessionStorage"

      Where persisted state is written.

    purchaseContext?: PurchaseContext

    Purchase destination/unit used by read-only product refreshes.

    recommendations?: { budgetMax?: number; maxResults?: number }

    Whether and how to fetch products alongside the try-on result.

    Type Declaration

    • OptionalbudgetMax?: number

      Upper price bound for recommendations.

    • OptionalmaxResults?: number

      Maximum results to return.

    styling?: { externalStylesheet?: boolean; nonce?: string }

    Escape hatches for hosts with a strict CSP or an external stylesheet.

    Type Declaration

    • OptionalexternalStylesheet?: boolean

      URL of a stylesheet to load instead of the inline styles.

    • Optionalnonce?: string

      CSP nonce applied to injected styles.

    theme?: { borderRadius?: string; fontFamily?: string; primaryColor?: string }

    Colour and typography overrides for the widget.

    Type Declaration

    • OptionalborderRadius?: string

      Corner radius applied to cards and buttons.

    • OptionalfontFamily?: string

      Font stack.

    • OptionalprimaryColor?: string

      Accent colour.

    Settings
    Member Visibility

    On This Page
    Properties