Widget Events

When the recommendation process is complete, or when a product size is suggested to the user, the widget emits events that can be used to track the user’s journey. Listening to these events allows you to execute custom actions.

Events

ftlWidgetEnd

This event is triggered when the user clicks the “Back to shopping” button at the end of the widget process.

This event provides the following details:

Property	Type	Description
productId	string	The product’s identifier.
recommendedSize	string	The recommended size.

Here is an example of how to listen for this event:

document.addEventListener('ftlWidgetEnd', function (event) {
  // Your custom code goes here ...
  const productId = event.detail.productId;
  const size = event.detail.recommendedSize;
});

---

ftlAutoRecommendation

This event is triggered when the widget recommends a size.

It is also triggered when the user lands on a product that can receive a recommendation based on the user’s previously provided information.

This event provides the same details:

Property	Type	Description
productId	string	The product’s identifier.
recommendedSize	string	The recommended size.

Here is an example of how to listen for this event:

document.addEventListener('ftlAutoRecommendation', function (event) {
  // Your custom code goes here ...
  const productId = event.detail.productId;
  const size = event.detail.recommendedSize;
});