# Preselect the recommended size

> Get the connected shopper's size on page load, in your own size labels, and preselect your size picker.

Source: https://docs.tryyoursize.com/guides/recommendation-event/

When the shopper is already connected to TryYourSize on your site, you get their size **on page load**, in **your size labels** (the product's size map, for example Studio "M" → your "Medium"), without them opening anything.

## Preselect your size picker

```ts
const guide = elements.create("sizeGuide", { product: "SKU-123" });
guide.on("recommendation", ({ status, size }) => {
  if (status !== "ready") return;
  const select = document.querySelector<HTMLSelectElement>("#size")!;
  const option = [...select.options].find((o) => o.value === size && !o.disabled);
  if (option && !select.dataset.touched) {        // never override the shopper's own choice
    select.value = size;
    select.dispatchEvent(new Event("change", { bubbles: true }));
    document.querySelector("#size-note")!.textContent = "Recommended by TryYourSize";
  }
});
guide.mount("#tys-guide");
```

Without mounting anything:

```ts
const rec = await tys.recommendation("SKU-123");
// or from any mounted element:
const rec2 = await fit.getRecommendation();
```

## The payload

| Field | |
|---|---|
| `product` | Your product ID. |
| `status` | `ready` (a size), `computing` (being simulated on the shopper's body), `none` (simulated, no size is wearable), `signed_out` (no TryYourSize session on your site), `unavailable` (connected, but no size for this product yet: no garment data, no body yet, not simulated on this body yet, or the simulation failed). |
| `size` | The recommended size in **your** label, or `null`. |
| `studioSize` | The same size as entered in TryYourSize Studio, or `null`. |
| `wearableSizes` | Sizes that are wearable on this body, in your labels (when simulated). |

It fires on mount and on every change (signing in, a new body, a simulation finishing). It never carries measurements, the email or body data. The `sizeGuide` element always reports it; `fit` and `button` start reporting once you listen to `recommendation`.

## Good practice

- **Never override the shopper.** Preselect only until they touch the picker, and never to a sold-out or disabled size.
- **Say where it came from**, for example "Recommended by TryYourSize" next to the picker.
- **Save the size with the cart line** (for example a hidden line property) and send it as `recommended_size` with the order: see [Orders and returns](https://docs.tryyoursize.com/guides/outcomes.md).

## Cost

A page view never starts a simulation. A body already simulated with this garment answers at once, and many garments answer in under a second; otherwise `status` is `unavailable` until the shopper asks for it ("See it on you" in our window), then `computing`, then `ready`. A delivered size is a [fit check](https://docs.tryyoursize.com/get-started/going-live.md#billing).

## On your server

For headless storefronts, or to use the size in server-rendered pages and emails, see [Server-side recommendations](https://docs.tryyoursize.com/guides/server-side-recommendations.md).