# Botón de guía de tallas

> Sustituye tu enlace «Guía de tallas» por el elemento de guía de tallas de TryYourSize, que muestra «Tu talla: M» a la clientela con sesión iniciada.

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

> **Para tu equipo de desarrollo**
>
> **Qué hace:** Coloca un enlace «Guía de tallas» de TryYourSize donde ahora está nuestro enlace a la guía de tallas. Quien tiene sesión iniciada ve «Tu talla: M» al cargar la página, y podemos preseleccionar esa talla. Solo recibimos tallas.
>
> **Tiempo necesario:** Alrededor de una hora, una vez que el SDK web está en la página.
>
> **Qué enviarle:** La clave publicable (primero pk_test_…, pk_live_… para pasar a modo real) y los orígenes de nuestros sitios que hay que registrar.

El elemento `sizeGuide` tiene el tamaño de un enlace (32–34 px de alto) y se coloca junto a tu selector de tallas, donde suele estar el enlace «Guía de tallas».

**JavaScript**

```html
<div class="size-row">
  <span>Size</span>
  <span id="tys-guide"></span>      <!-- donde estaba tu enlace "Size guide" -->
</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" }); // o "button"
  guide.mount("#tys-guide");
</script>
```

**HTML (sin código)**

```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" />
```

## Estados

«Guía de tallas» (sin sesión iniciada) → «Calculando tu talla…» → «Tu talla: **M**» (con sesión iniciada, con un pequeño punto en el logotipo), o «Guía de tallas · conectado» (con sesión iniciada, aún sin talla para este producto). Un clic abre la ventana completa.

## Texto e idioma

- El texto sigue `locale` (`"auto"`: el `<html lang>` de tu página y, si no, el navegador): "Size guide", "Guía de tallas", "Guide des tailles", "Größentabelle", "Guida alle taglie".
- `label` te permite usar tu propio texto.

## Aspecto

Se renderiza dentro de tu página (Shadow DOM, sin iframe visible), así que toma la fuente y el color de texto del lugar donde lo montas. Puedes sobrescribirlos con `appearance.variables`: `colorText`, `fontFamily`, `colorPrimary` (el punto de «conectado») y `borderRadius` (para `variant: "button"`). Consulta [Apariencia y temas](https://docs.tryyoursize.com/es/guides/appearance.md).

## Por qué es seguro en tu página

La sesión de TryYourSize se guarda en el almacenamiento de nuestro origen, que tu página no puede leer. Un único frame invisible en nuestro origen por página (unos pocos KB, compartido por todos los elementos) la lee y comunica a tu página **solo tallas**, y únicamente cuando el origen de tu página está registrado para la clave.

## Preseleccionar la talla

La guía de tallas siempre emite el evento `recommendation`, así que puedes preseleccionar la talla en tu selector al cargar la página. Consulta [Talla recomendada y preselección](https://docs.tryyoursize.com/es/guides/recommendation-event.md).