> ## Documentation Index
> Fetch the complete documentation index at: https://docs.virtual.fit/llms.txt
> Use this file to discover all available pages before exploring further.

# Browser API

> Reference the virtual.fit initialization, context, identity, consent, and tracking commands.

The hosted loader exposes a command API through `window.bitstudio`. Define the queue before loading the script so early commands replay in order.

```javascript theme={null}
window.bitstudio = window.bitstudio || function () {
  (window.bitstudio.q = window.bitstudio.q || []).push(arguments);
};
```

<Info>
  The `bitstudio` identifier remains unchanged for backward compatibility. It is the supported browser API for virtual.fit custom integrations.
</Info>

## `init`

Initialize one storefront configuration.

```javascript theme={null}
bitstudio('init', {
  siteKey: 'site_pub_your_key',
  mount: '.product-media'
});
```

`siteKey` is required. Calling `init` starts product matching and keeps it current as the page URL changes. See [Loader configuration](/custom-js/configuration) for all fields.

## `setContext`

Patch multiple parts of the active configuration.

```javascript theme={null}
bitstudio('setContext', {
  product: {
    id: 'sku-10042',
    handle: 'linen-midi-dress'
  },
  customer: {
    id: 'customer-8421'
  }
});
```

Use `setContext` when a single application state update changes both product and customer context.

## `setProduct`

Set or replace the current product context.

```javascript theme={null}
bitstudio('setProduct', {
  id: 'sku-10042',
  handle: 'linen-midi-dress',
  title: 'Linen Midi Dress',
  imageUrl: 'https://cdn.example.com/linen-midi-dress.jpg'
});
```

Provide `id` or `handle`. The value must resolve to a synced, enabled product with usable garment images.

Call this after an SPA commits a product route when URL detection cannot identify the product. Call it again after every product or variant transition.

For color or style variants, `id` must identify the selected variant's synced virtual.fit product. Changing only `imageUrl` changes display context; it does not change the prepared garment used for try-on.

## `setCustomer`

Update shopper identity after login, logout, or account switching.

```javascript theme={null}
bitstudio('setCustomer', {
  id: 'customer-8421',
  email: 'shopper@example.com'
});
```

Clear identity on logout:

```javascript theme={null}
bitstudio('setCustomer', {
  id: '',
  email: ''
});
```

Set customer context as early as possible so try-on and commerce events join to the same shopper journey.

## `setConsentMode`

Choose whether analytics may include shopper identity.

```javascript theme={null}
bitstudio('setConsentMode', 'cookieless');
```

Supported values:

| Value        | Behavior                                                          |
| ------------ | ----------------------------------------------------------------- |
| `consented`  | Analytics may include the resolved shopper identity.              |
| `cookieless` | Analytics omits shopper identity and uses cookieless measurement. |

Call this when your consent manager initializes and whenever the shopper changes analytics consent.

```javascript theme={null}
consentManager.onChange(({ analyticsAllowed }) => {
  bitstudio(
    'setConsentMode',
    analyticsAllowed ? 'consented' : 'cookieless'
  );
});
```

See [Privacy and consent](/operations/privacy-and-consent).

## `track`

Send a normalized commerce event.

```javascript theme={null}
bitstudio('track', 'product_added_to_cart', {
  cartId: 'cart-123',
  quantity: 1,
  totalAmount: 79,
  currency: 'USD',
  productId: 'sku-10042',
  productHandle: 'linen-midi-dress',
  productTitle: 'Linen Midi Dress'
});
```

virtual.fit adds the current product context when it is available. Explicit payload fields take precedence.

Only call `track` after storefront analytics has initialized. Events sent before analytics is ready are not queued and may be dropped with a console warning.

[See the commerce event reference →](/custom-js/commerce-events)

## Object-style alias

The loader also exposes `window.BitStudio`:

```javascript theme={null}
window.BitStudio.setProduct({
  id: 'sku-10042',
  handle: 'linen-midi-dress'
});
```

Available methods are `init`, `setContext`, `setProduct`, `setCustomer`, `setConsentMode`, and `track`. Prefer the queued `bitstudio(...)` form in integration snippets because it works before the async loader finishes.

## SPA integration pattern

```javascript theme={null}
router.afterEach((route) => {
  if (route.type !== 'product') return;

  bitstudio('setProduct', {
    id: route.product.id,
    handle: route.product.handle,
    title: route.product.title,
    imageUrl: route.product.featuredImage
  });
});
```

Keep one loader and one initialization per page. Update context instead of injecting another script after each route change.