# Widget (/yoursizer/widget)

There is no widget to build from scratch. Each audience and category has its own **system widget** with the right measurement flow; you set how it looks and where it sits, and every product automatically uses the widget for its category.

<Shot
  src="/screens/yoursizer/widget-hub.jpg"
  alt="Widget Design page in the YourSizer merchant panel: Widget on switch, Preview and Install buttons, the system widget catalogue with an Accessories (try-on only) row and audience tabs Adult Women, Adult Men, Adult Unisex, Kids Girls, Kids Boys, Kids Unisex and Baby."
  caption="Widget → Widget Design. Each category card lists the measurements its flow asks for."
/>

## What you set per category [#what-you-set-per-category]

<Cards>
  <Card title="Appearance">Colours, font and corners.</Card>
  <Card title="Trigger button">Shape, text, icon and animation of the button on the product page.</Card>
  <Card title="Placement and usage">Position, panel style and whether it opens by itself.</Card>
  <Card title="The details">Lighting and scene, the “calculating” screen, social proof, a branding line and languages.</Card>
</Cards>

The measurement flow itself — which measurements, in which order — belongs to the category. A dress asks for height, weight, chest, waist and hips; a bra asks for band and bust.

## Accessories: try-on only [#accessories-try-on-only]

Necklaces, earrings, rings, glasses — no size chart needed. The **Accessories (try-on only)** row sets up the product-page button and the try-on look for them.

## Copy a design to other categories [#copy-a-design-to-other-categories]

Built the look you like for one category? **Copy design** applies it to others. Appearance, button, placement, scene, the calculating screen, social proof, branding and languages are copied; the measurement flow and size-chart settings stay per category.

## Preview, then publish [#preview-then-publish]

<Steps>
  <Step>
    **Preview** shows the widget as a shopper sees it.
  </Step>
  <Step>
    **Save** publishes a new version — the badge shows `v1 · saved`, `v2 · saved` …
  </Step>
  <Step>
    **Widget on** switches it on or off for the whole store.
  </Step>
  <Step>
    **Install** gives the one-line script for stores without a platform integration. [Script tag →](/yoursizer/integrations/script-tag)
  </Step>
</Steps>

<Callout title="Built to sit on your store">
  The widget renders in an isolated root, so your CSS cannot leak into it and its styles cannot leak out. It targets WCAG 2.1 AA, is keyboard navigable, carries no meaning by colour alone, and on mobile opens as an edge-to-edge bottom sheet. It speaks Turkish, English, German, Russian, Arabic and Persian.
</Callout>