Preselect the recommended size

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

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:

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.

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.

On your server

For headless storefronts, or to use the size in server-rendered pages and emails, see Server-side recommendations.