> ## 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.

# Loader configuration

> Configure placement, product context, customer access, terms, and data attributes.

Initialize virtual.fit before loading the hosted script. The queue preserves commands until the loader is ready.

## Complete example

```html theme={null}
<script>
  window.bitstudio = window.bitstudio || function () {
    (window.bitstudio.q = window.bitstudio.q || []).push(arguments);
  };

  bitstudio('init', {
    siteKey: 'site_pub_your_key',
    mount: '.product-media',
    overlayPosition: 'bottom-right',
    auth: {
      showToAnonymous: true,
      loginUrl: ({ returnTo }) =>
        '/account/login?return_to=' + encodeURIComponent(returnTo)
    },
    customer: window.currentCustomer
      ? {
          id: window.currentCustomer.id,
          email: window.currentCustomer.email
        }
      : {},
    labels: {
      triggerButton: 'Try it on',
      generateButton: 'Generate try-on'
    },
    terms: {
      fullSelector: '#virtual-fit-terms'
    }
  });
</script>
<script async src="COPY_THE_SCRIPT_URL_FROM_VIRTUAL_FIT"></script>
```

## Initialization fields

| Field                   | Type                      | Default                          | Description                                                |
| ----------------------- | ------------------------- | -------------------------------- | ---------------------------------------------------------- |
| `siteKey`               | `string`                  | Required                         | Public key shown in virtual.fit.                           |
| `mount`                 | CSS selector or `Element` | `.bitstudio-product-media-stage` | Main product media host.                                   |
| `overlayPosition`       | `string`                  | `top-right`                      | `top-right`, `top-left`, `bottom-right`, or `bottom-left`. |
| `product`               | `object`                  | URL-resolved                     | Optional explicit product context.                         |
| `customer`              | `object`                  | Anonymous                        | Current customer `id` and optional `email`.                |
| `auth`                  | `object`                  | Anonymous visible                | Login visibility and destination.                          |
| `labels`                | `object`                  | English defaults                 | Shopper-facing labels and messages.                        |
| `terms`                 | `object`                  | Default terms                    | Summary, full terms, and email controls.                   |
| `language`              | `string`                  | `en`                             | Language identifier for terms configuration.               |
| `overlayTargetSelector` | `string`                  | Runtime default                  | Advanced gallery host override.                            |
| `overlayImageSelector`  | `string`                  | `img`                            | Image inside the overlay target.                           |
| `gallerySelector`       | `string`                  | Empty                            | Advanced result-gallery selector.                          |
| `thumbnailSelector`     | `string`                  | Empty                            | Advanced thumbnail selector.                               |

<Tip>
  Start with `siteKey`, `mount`, and terms. Add advanced selectors only after the basic integration works.
</Tip>

## Product object

```javascript theme={null}
{
  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 loader verifies it against the synced enabled catalog before mounting.

For color or style variants, pass the selected variant's unique synced ID. `imageUrl` supplies display context only; changing it does not replace the garment associated with `id`.

## Customer and authentication

```javascript theme={null}
auth: {
  showToAnonymous: true,
  loginUrl: ({ returnTo, product, location }) =>
    '/login?return_to=' + encodeURIComponent(returnTo)
},
customer: {
  id: 'customer-8421',
  email: 'shopper@example.com'
}
```

`auth.loginUrl` accepts a string or callback. The callback receives:

* `returnTo` — Current absolute page URL.
* `product` — Resolved product context, or `null`.
* `location` — Current `href`, origin, pathname, search, and hash.

`showToAnonymous` controls whether a logged-out shopper can see a login call to action when your virtual.fit settings require authentication. The customer-access policy in virtual.fit remains authoritative.

## Terms object

```javascript theme={null}
terms: {
  summaryHtml: 'AI preview only. Actual fit may differ.',
  fullSelector: '#virtual-fit-terms',
  collectEmail: false,
  requireEmail: false,
  emailNote: 'We will send this try-on result to the address you provide.'
}
```

Use one source for full terms:

* `fullHtml` — Pass full HTML directly.
* `fullSelector` — Read `innerHTML` from an existing host-page element.

If neither is set, virtual.fit uses its default terms. See [Styling, labels, and terms](/custom-js/styling-and-copy).

## Single-tag installation

When a platform allows one script tag but no inline queue, use data attributes:

```html theme={null}
<script
  async
  src="COPY_THE_SCRIPT_URL_FROM_VIRTUAL_FIT"
  data-site-key="site_pub_your_key"
  data-mount=".product-media"
  data-overlay-position="bottom-right"
  data-labels='{"triggerButton":"Try it on","generateButton":"Generate try-on"}'
  data-show-to-anonymous="true"
  data-login-url="/account/login"
  data-product-id="sku-10042"
  data-product-handle="linen-midi-dress"
  data-product-title="Linen Midi Dress"
  data-product-image="https://cdn.example.com/linen-midi-dress.jpg"
  data-customer-id="customer-8421"
></script>
```

JavaScript initialization is preferred when values are dynamic or `loginUrl` needs callback logic.

## Legacy aliases

Use `terms` for disclaimer and legal content. Use `labels` for interface text. Older `content` and `ui` aliases remain accepted for existing installs, but new integrations should not depend on them.