Browser API - virtual.fit

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

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

The bitstudio identifier remains unchanged for backward compatibility. It is the supported browser API for virtual.fit custom integrations.

`init`

Initialize one storefront configuration.

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 for all fields.

`setContext`

Patch multiple parts of the active configuration.

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.

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.

bitstudio('setCustomer', {
  id: 'customer-8421',
  email: '[email protected]'
});

Clear identity on logout:

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.

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.

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

See Privacy and consent.

`track`

Send a normalized commerce event.

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 →

Object-style alias

The loader also exposes window.BitStudio:

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

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.

​init

​setContext

​setProduct

​setCustomer

​setConsentMode

​track

​Object-style alias

​SPA integration pattern

`init`

`setContext`

`setProduct`

`setCustomer`

`setConsentMode`

`track`

Object-style alias

SPA integration pattern