<tys-size-guide>

Web component@tryyoursize/sdk/elements

The size guide element as a tag: “Size guide” with the TryYourSize mark, then “Your size: M” once the shopper is connected.

Attributes

publishable-keystringRequired

Your publishable key (pk_test_… / pk_live_…).

productstringRequired

Your product ID or SKU.

variant"link" | "button"Optional

A text link (default) or an outlined button.

labelstringOptional

Your own words for "Size guide" (otherwise localized).

localestringOptional

BCP 47 language; default: your page's <html lang>, then the browser.

Example

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

<script>
  document.querySelector("tys-size-guide")
    .addEventListener("tys:recommendation", (e) => e.detail.status === "ready" && preselect(e.detail.size));
</script>

<tys-size-guide>

Attributes

Example

See also