Skip to content

JavaScript API overview

Guide type: Reference
Difficulty: Advanced
Applies to: SmartSize storefront JavaScript API

SmartSize exposes a window.SmartRecom object on every product page where the app is active. This reference documents the complete API surface, including all methods, properties, configuration options, and version information.

Prerequisites

⚠️ Important: You must still add the SmartSize App Block to your page even when using the JavaScript API directly. The App Block provides the necessary configuration and functionality.

The window.SmartRecom object

window.SmartRecom = {
  openModal,      // function — open the size recommendation modal
  closeModal,     // function — close the modal
  openSizeChart,  // function — open the size chart directly
  isReady,        // function — returns boolean
  isModalOpen,    // function — returns boolean
  getResult,      // function — returns recommendation object or null
  config,         // object — current SmartSize configuration
  version         // string — current version
}

Methods

openModal()

Opens the size recommendation (fit quiz) modal.

Return type Description
void Opens the modal immediately if SmartSize is ready.

Example:

window.SmartRecom.openModal();

closeModal()

Closes the size recommendation modal.

Return type Description
void Closes the modal if it is currently open.

Example:

window.SmartRecom.closeModal();

openSizeChart()

Opens the size chart directly. Works in two modes depending on whether a recommendation is available:

  • With recommendations (after quiz completion): Shows the size chart with the recommended size highlighted, "YOUR BEST FIT" badge, measurement indicators, and predicted measurements.
  • Clean size chart (before quiz or no recommendation): Shows the basic size chart without personal recommendations.
Return type Description
void Opens the size chart popup.

Requirements:

  • SmartSize must be ready (window.SmartRecom.isReady() returns true)
  • A valid quiz must exist for the current product

Example:

if (window.SmartRecom.isReady()) {
  window.SmartRecom.openSizeChart();
}

isReady()

Checks whether SmartSize has fully initialized and is ready to accept API calls.

Return type Description
boolean true if SmartSize is initialized and the quiz configuration is loaded.

Example:

if (window.SmartRecom.isReady()) {
  // Safe to call API methods
  window.SmartRecom.openModal();
}

isModalOpen()

Checks whether the SmartSize modal is currently open.

Return type Description
boolean true if the modal is currently visible.

Example:

if (window.SmartRecom.isModalOpen()) {
  window.SmartRecom.closeModal();
}

getResult()

Returns the current size recommendation result, or null if no recommendation has been computed yet.

Return type Description
object \| null The recommendation result object, or null.

Example:

const result = window.SmartRecom.getResult();

if (result && result.sizeFound) {
  console.log(`Recommended size: ${result.recommendedSize}`);
}

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

Properties

config

The current SmartSize configuration object. Contains quiz ID, product information, theme settings, and other runtime configuration loaded from the App Block.

Type: object

Example:

console.log(window.SmartRecom.config);
// { quizId: '...', productId: '...', accentColor: '#...', ... }

version

The current SmartSize widget version string.

Type: string

Example:

console.log(window.SmartRecom.version);
// "2.4.1"

CSS class-based triggers

In addition to the JavaScript API, SmartSize automatically binds click handlers to any element with the .smartrecom-trigger CSS class. This requires no JavaScript.

Behavior:

  • Works with any HTML element (<button>, <a>, <div>, etc.)
  • Automatically prevents default behavior on links
  • Multiple triggers are supported on the same page
  • The trigger opens the modal identically to window.SmartRecom.openModal()

Example:

<button class="smartrecom-trigger">
  Find My Size
</button>

<a href="#" class="smartrecom-trigger">
  Size Recommendations
</a>

Progressive enhancement pattern

Always check for SmartSize availability before calling API methods, and provide a fallback for environments where SmartSize is not loaded:

if (window.SmartRecom && window.SmartRecom.isReady()) {
  window.SmartRecom.openModal();
} else {
  // Fallback behavior
  window.location.href = '/pages/size-guide';
}

Browser compatibility

The SmartSize JavaScript API is supported in all modern browsers. The widget is delivered as an IIFE (Immediately Invoked Function Expression) bundle that loads asynchronously.