Custom Elements

We recommend using StrutFit web components (Assistant Manager, Size Button, Try On Button, Fit Tip, and so on) so you get supported styling, accessibility, and behavior out of the box.

If you need full control over HTML and UX, you can build your own buttons or layouts and drive StrutFit through the global window.StrutFit API. The Assistant Manager script must still be on the page. Fit tip text in custom markup requires the fit tip script as well (see the Fit Tip tab).

Custom integrations still depend on the Assistant Manager. Without it, window.StrutFit will not be initialized and openAssistant will not work.

Custom controls

Call window.StrutFit?.openAssistant(mode, productCode?, options?) when the shopper interacts with your control (for example a click handler on your own <button>). Use optional chaining (?.) so your handler does not throw if StrutFit is not ready yet.

The first argument is the assistant mode. Pass the current product’s StrutFit product code as the second argument whenever the flow is product-scoped (sizing, size chart, try-on). FAQ and Find do not use a product code. An optional third argument is an object of overrides for that open only—see each tab below for the fields that apply. The Fit Tip tab describes custom markup instead of openAssistant.

Sizing


const productCode = '{{ProductIdentifier}}'; // your StrutFit product code
 
window.StrutFit?.openAssistant('sizing', productCode);

Optional third argument — only when you need to override what the assistant shows for this session:

productName, productImageURL — Overrides for the product title and image in the assistant.
defaultSizeUnit, defaultApparelSizeUnit — Size unit hints (for example 'US', 'EU').


window.StrutFit?.openAssistant('sizing', productCode, {
  productName: 'Custom title',
  productImageURL: 'https://example.com/image.png',
  defaultSizeUnit: 'US',
});

Size chart


const productCode = '{{ProductIdentifier}}';
 
window.StrutFit?.openAssistant('size-chart', productCode);

Optional third argument:

productName, productImageURL
defaultSizeUnit, defaultApparelSizeUnit


window.StrutFit?.openAssistant('size-chart', productCode, {
  productName: 'Custom title',
  productImageURL: 'https://example.com/image.png',
  defaultSizeUnit: 'US',
});

Tryon


const productCode = '{{ProductIdentifier}}';
 
window.StrutFit?.openAssistant('tryon', productCode);

Optional third argument:

productName, productImageURL
defaultSizeUnit, defaultApparelSizeUnit


window.StrutFit?.openAssistant('tryon', productCode, {
  productName: 'Custom title',
  productImageURL: 'https://example.com/image.png',
  defaultSizeUnit: 'US',
});

FAQ

Opens the FAQ experience. No product code or optional third argument.


window.StrutFit?.openAssistant('faq');

Find

Opens Find, which helps shoppers discover products that suit them. No product code or optional third argument.


window.StrutFit?.openAssistant('find');

Fit Tip

If you do not use the <strutfit-fit-tip> component but want StrutFit to inject fit tip HTML into your layout, use the data-attribute contract processed by the fit tip bundle.

Load the same fit tip script as in the Fit Tip guide. Custom containers are filled when the script runs (after DOMContentLoaded) and again when strutfit:footMCodeUpdated or strutfit:languageUpdated fires.

Outer element — Set data-strutfit-custom-fit-tip-container to your StrutFit product code (the attribute value is trimmed; if it is empty, that block is skipped).
Inner element — Include a descendant with data-strutfit-custom-fit-tip-content. The script sets its innerHTML from the API when text exists.

While the tip is loading, the container is hidden. If there is no tip text for that product, the container stays hidden and the content element is not updated.


<div data-strutfit-custom-fit-tip-container="{{ProductIdentifier}}">
  <div data-strutfit-custom-fit-tip-content></div>
</div>

For script setup and attributes, see Assistant Manager and Assistant Manager API.

Optional: wait until StrutFit is ready

It is recommended (not required) to enable or show StrutFit-driven controls only after the Assistant Manager has finished initializing, so clicks do not no-op while window.StrutFit is still loading.

Listen for the strutfit:ready event on window. Also check window.StrutFit?.ready when your code runs, so you still work if StrutFit became ready before your listener was attached.

Vanilla JavaScript:


function onStrutFitReady(callback) {
  if (window.StrutFit?.ready) {
    callback();
    return;
  }
  window.addEventListener('strutfit:ready', callback, { once: true });
}
 
onStrutFitReady(() => {
  // Show your custom button or remove disabled state
});

The event includes detail.config if you need dashboard config; many integrations ignore it.