SmartSize dispatches custom events on window as the shopper moves through the quiz. Listen for them to update your product page, fire analytics, or read the recommended size. This article covers the two events you'll use and the shape of the result object.

Events

Event	Fires when	event.detail
`smartrecom:modal-state-change`	The popup opens or closes (any cause — button, API, close button, overlay, Escape).	`{ isOpen: boolean }`
`smartrecom:result-update`	The quiz computes a new size recommendation.	The result object (see below).

Both are CustomEvent instances dispatched on window. Because they fire on window, you can attach listeners before the widget finishes loading — they'll still receive events once it does.

React to the popup opening and closing

window.addEventListener('smartrecom:modal-state-change', function (event) {
  if (event.detail.isOpen) {
    console.log('Popup opened');
  } else {
    console.log('Popup closed');
  }
});

This is the reliable way to track open and close for analytics or UI state — it fires no matter how the popup was opened or dismissed.

React to a new recommendation

The smartrecom:result-update event's detail is the recommendation result. Use it to show the recommended size on your product page in real time:

window.addEventListener('smartrecom:result-update', function (event) {
  const result = event.detail;
  if (result && result.recommendedSize) {
    document.getElementById('size-display').textContent =
      'Your best fit is size ' + result.recommendedSize;
  }
});

You can also read the latest result at any time with window.SmartRecom.getResult(), which returns the same object (or null before the shopper completes the quiz).

Result object

The result is deliberately trimmed for storefront use — it carries the recommendation and confidence signals, but not the shopper's raw measurements. The fields:

Field	Type	Description
`recommendedSize`	string \| null	The recommended size name, e.g. `"M"`, `"42"`. `null` if no size could be determined.
`recommendedSizeId`	string \| null	The size's internal id.
`alternativeSizeId`	string \| null	A second-choice size id, when one applies.
`confidence`	string	How confident the recommendation is: `"high"`, `"medium"`, `"low"`, or `"none"`.
`strength`	string	Match strength: `"strong"`, `"moderate"`, `"cautious"`, or `"speculative"`.
`growthApplied`	boolean	`true` when a growth allowance was applied (children's sizing).
`customerType`	string	The audience: one of `MAN`, `WOMAN`, `BOY`, `GIRL`, `UNISEX`, `DOG`, `CAT`.
`fitBucket`	string	Intended fit, e.g. `fitted`, `regular`, `relaxed`, `oversized`.
`stretchBucket`	string	Fabric stretch, e.g. `non_stretch`, `slight`, `moderate`, `full`.
`scores`	array	Per-size match details, ranked. Also available under `sizeChartMatches`.

The scores array holds one entry per size in the chart, each with its sizeName, rank, a category (recommended, closest_possible, could_fit, wont_fit), and a numeric total score.

Example

{
  recommendedSize: 'M',
  recommendedSizeId: 'sz_123',
  alternativeSizeId: 'sz_124',
  confidence: 'high',
  strength: 'strong',
  growthApplied: false,
  customerType: 'WOMAN',
  fitBucket: 'regular',
  stretchBucket: 'slight',
  scores: [
    { sizeName: 'M', rank: 1, category: 'recommended', total: 0.94 },
    { sizeName: 'S', rank: 2, category: 'could_fit', total: 0.71 }
  ]
}

Check the result

Open a product page with an active fit quiz and open the browser console.
Open and close the popup; confirm smartrecom:modal-state-change fires with the right isOpen value.
Complete the quiz; confirm smartrecom:result-update fires and event.detail.recommendedSize holds the size.

💡 Tip: To gauge how sure a recommendation is, read confidence and strength rather than looking for an exact-match flag — SmartSize expresses match quality through those two signals.

Listen to quiz events and read recommendation results