Widget events

Your page can react to the size button: show the recommended size elsewhere, preselect it, or log it. Every event is sent in two ways from the same moment: as a DOM event, and to the callbacks you add with widget.on(...). Events are sent with or without the shopper's analytics consent, because they stay on your page.

Each event names its widget in instanceId (also widget.instanceId and the data-fmt-widget attribute), so pages with several buttons can tell them apart. No event carries body measurements or the shopper's tracking id.

createWidget(params)

The SDK's JavaScript API, for themes that render the button themselves: load sdk.js, then call window.FitMyType.createWidget(params). It resolves the widget, or undefined when nothing is shown (the product is not eligible, a value is invalid, or the visitor is held out). It never rejects. FitMyType.widget(instanceId) gives a rendered widget back later.

<div id="fmt-size-recommender"></div>
<script>
  window.FitMyType.createWidget({
    client_id: 1000,
    product_id: "TEST-JACKET-01",
    available_sizes: "S,M,L",
    language: "en",
    target: document.getElementById("fmt-size-recommender"),
  }).then(function (widget) {
    if (!widget) return; // not eligible or held out: nothing is shown
    widget.on("recommendation", function (size) { /* … */ });
  });
</script>

DOM events

They are sent on the widget element, bubble and cross shadow roots, so one listener on document gets each event once.

document.addEventListener("fmtReady", function (event) {
  // Your custom code goes here ...
  const instanceId = event.detail.instanceId;
  const productId = event.detail.productId;
});

document.addEventListener("fmtAutoRecommendation", function (event) {
  // Your custom code goes here ...
  const instanceId = event.detail.instanceId;
  const productId = event.detail.productId;
  const recommendedSize = event.detail.recommendedSize;
  const status = event.detail.status;
  const closestSize = event.detail.closestSize;
  const alternatives = event.detail.alternatives;
  const directionHint = event.detail.directionHint;
  const isAutoReco = event.detail.isAutoReco;
  const available = event.detail.available;
});

document.addEventListener("fmtSizeSelected", function (event) {
  // Your custom code goes here ...
  const instanceId = event.detail.instanceId;
  const productId = event.detail.productId;
  const size = event.detail.size;
});

document.addEventListener("fmtClose", function (event) {
  // Your custom code goes here ...
  const instanceId = event.detail.instanceId;
  const productId = event.detail.productId;
  const reason = event.detail.reason;
});

document.addEventListener("fmtWidgetEnd", function (event) {
  // Your custom code goes here ...
  const instanceId = event.detail.instanceId;
  const productId = event.detail.productId;
  const recommendedSize = event.detail.recommendedSize;
  const reason = event.detail.reason;
});

fmtWidgetEnd reasons

Size answer status

status is one of recommended, between_sizes, needs_measurements, no_match. recommendedSize is null unless the status is recommended. available says whether that size is on your page and in stock.

Callbacks

widget.on(name, callback) adds a callback to one widget and returns a function that removes it. An unknown name logs a warning. A callback that throws does not stop the others.

const widget = FitMyType.widget(instanceId); // or the widget createWidget() resolved
const off = widget.on("recommendation-fetch", function (payload) {
  // Your custom code goes here ...
});
// off() removes it again.