# Size guide button

> Replace your "Size guide" link with the TryYourSize size guide element, which shows "Your size: M" to connected shoppers.

Source: https://docs.tryyoursize.com/quickstarts/size-guide/

> **For your developer**
>
> **What it does:** Puts a TryYourSize 'Size guide' link where our current size guide link is. Connected shoppers see 'Your size: M' on page load, and we can preselect that size. We receive sizes only.
>
> **Time needed:** About an hour once the web SDK is on the page.
>
> **What to send them:** The publishable key (pk_test_… first, pk_live_… to go live) and our site origins to register.

The `sizeGuide` element is link-sized (32–34 px tall) and sits next to your size picker, where a "Size guide" link usually is.

**JavaScript**

```html
<div class="size-row">
  <span>Size</span>
  <span id="tys-guide"></span>      <!-- where your "Size guide" link was -->
</div>
<script src="https://js.tryyoursize.com/v1/tys.js"></script>
<script>
  const tys = TryYourSize("pk_test_…");
  const guide = tys.elements().create("sizeGuide", { product: "SKU-123", variant: "link" }); // or "button"
  guide.mount("#tys-guide");
</script>
```

**HTML (no code)**

```html
<script src="https://js.tryyoursize.com/v1/tys.js"></script>
<tys-size-guide publishable-key="pk_test_…" product="SKU-123" variant="link"></tys-size-guide>
```

**React**

```tsx
<SizeGuide product="SKU-123" variant="link" />
```

## States

"Size guide" (signed out) → "Calculating your size…" → "Your size: **M**" (connected, with a small dot on the mark), or "Size guide · connected" (connected, no size for this product yet). A click opens the full window.

## Label and language

- The label follows `locale` (`"auto"`: your page's `<html lang>`, then the browser): "Size guide", "Guía de tallas", "Guide des tailles", "Größentabelle", "Guida alle taglie".
- `label` sets your own words.

## Look

It renders in your page (Shadow DOM, no visible iframe), so it takes your font and text colour where you mount it. Override with `appearance.variables`: `colorText`, `fontFamily`, `colorPrimary` (the "connected" dot) and `borderRadius` (for `variant: "button"`). See [Appearance and theming](https://docs.tryyoursize.com/guides/appearance.md).

## Why it is safe in your page

The TryYourSize session lives in our origin's storage, which your page cannot read. One invisible frame on our origin per page (a few KB, shared by every element) reads it and tells your page **sizes only**, and only when your page's origin is registered for the key.

## Preselect the size

The size guide always reports the `recommendation` event, so you can preselect your size picker on page load. See [Recommended size and preselection](https://docs.tryyoursize.com/guides/recommendation-event.md).