SmartSize emits custom events during the quiz lifecycle. Use this guide to listen for modal open, close, and result-update events, with complete event payload schemas and listener patterns.

Before you start

You need:

the SmartSize App Block active on the product page
a basic understanding of the DOM CustomEvent API
a product page where a fit quiz is configured

Event types

Event name	Fires when	Payload
`smartrecom:open`	The modal opens	`{ detail: null }`
`smartrecom:close`	The modal closes	`{ detail: null }`
`smartrecom:result-update`	A new recommendation result is available	`{ detail: resultObject }`

All events are dispatched on window as CustomEvent instances.

Listen for the modal opening

The smartrecom:open event fires every time the SmartSize modal is opened, whether by a user click, the JavaScript API, or a CSS class trigger.

window.addEventListener('smartrecom:open', function() {
  console.log('Size guide opened');
  // Your custom logic — analytics, UI updates, etc.
});

Common use case: Analytics tracking

window.addEventListener('smartrecom:open', function() {
  gtag('event', 'size_guide_opened', {
    'event_category': 'smartsize',
    'event_label': 'modal_open'
  });
});

Listen for the modal closing

The smartrecom:close event fires when the shopper dismisses the modal by clicking the close button, clicking the overlay, or pressing Escape.

window.addEventListener('smartrecom:close', function() {
  console.log('Size guide closed');
  // Your custom logic — refresh UI, show a follow-up message, etc.
});

Common use case: Display recommendation after modal closes

window.addEventListener('smartrecom:close', function() {
  const result = window.SmartRecom.getResult();  if (result && result.sizeFound) {
    document.getElementById('recommended-size').textContent =
      `Your best fit is size ${result.recommendedSize}`;
  }
});

Listen for recommendation results

The smartrecom:result-update event fires when the quiz computes a new size recommendation. This happens after the shopper completes the quiz and the backend returns a result.

Event payload

The event.detail property contains the full recommendation result object:

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

For the complete result object schema, see Reading recommendation results.

Common use case: Update product page UI in real time

<!-- Optional: Show recommendation when available -->
<div id="size-recommendation" style="display: none;">
  <h3>Your Recommended Size</h3>
  <p id="recommended-size-display"></p>
</div><script>
window.addEventListener('smartrecom:result-update', function(event) {
  const result = event.detail;  if (result && result.sizeFound) {
    document.getElementById('recommended-size-display').textContent =
      `Your best fit is size ${result.recommendedSize}`;
    document.getElementById('size-recommendation').style.display = 'block';
  }
});
</script>

Set up all listeners together

A typical integration sets up all three listeners when the page loads:

function setupModalListeners() {
  // Modal opened
  window.addEventListener('smartrecom:open', function() {
    console.log('Size guide opened');
  });  // Modal closed
  window.addEventListener('smartrecom:close', function() {
    console.log('Size guide closed');
    updateSizeChartButton();
  });  // Recommendation result updated
  window.addEventListener('smartrecom:result-update', function(event) {
    const result = event.detail;
    if (result && result.sizeFound) {
      document.getElementById('recommended-size-display').textContent =
        `Your best fit is size ${result.recommendedSize}`;
      document.getElementById('size-recommendation').style.display = 'block';
    }
    updateSizeChartButton();
  });
}// Initialize when the DOM is ready
document.addEventListener('DOMContentLoaded', setupModalListeners);

Once-only vs persistent listeners

Use once: true for one-time tracking

If you only need to track the first time a shopper opens the size guide, use the once option:

window.addEventListener('smartrecom:open', function() {
  gtag('event', 'size_guide_first_open', {
    'event_category': 'smartsize'
  });
}, { once: true });

Use persistent listeners for UI updates

For UI that must stay in sync with the modal state (such as updating a button label), use a regular persistent listener:

window.addEventListener('smartrecom:close', updateSizeChartButton);
window.addEventListener('smartrecom:result-update', updateSizeChartButton);

Remove listeners when cleaning up

If your integration is dynamic (for example, in a single-page app), remove listeners to avoid memory leaks:

const handleOpen = () => console.log('Opened');
const handleClose = () => console.log('Closed');// Add
window.addEventListener('smartrecom:open', handleOpen);
window.addEventListener('smartrecom:close', handleClose);// Remove
window.removeEventListener('smartrecom:open', handleOpen);
window.removeEventListener('smartrecom:close', handleClose);

Wait for SmartSize to be ready before attaching listeners

SmartSize loads asynchronously. If you attach listeners before the widget is initialized, they will still work because the events are dispatched on window. However, if your listener logic depends on window.SmartRecom methods, wait for readiness:

document.addEventListener('DOMContentLoaded', function() {
  const checkReady = setInterval(() => {
    if (window.SmartRecom && window.SmartRecom.isReady()) {
      clearInterval(checkReady);
      setupModalListeners();
    }
  }, 100);
});

Check the result

After setting up listeners:

Save your theme changes.
Open a product page with an active fit quiz.
Open the browser console.
Click the size guide button and confirm the smartrecom:open event fires.
Complete the quiz and confirm the smartrecom:result-update event fires with a result object.
Close the modal and confirm the smartrecom:close event fires.

JavaScript API overview — Complete API surface reference
Triggering the modal programmatically — How to open and close the modal from code
Reading recommendation results — Full result object schema

Listening to quiz events