Botón de guía de tallas

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

JavaScriptHTML (sin código)React

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

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

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

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.