Activity Callback Reference
Smartfit HTML elements emit activity events during initialization and whenever a result or relevant status is produced.
This page documents the exact payload structures emitted by the different Smartfit components.
For guidance on connecting these callbacks with an analytics platform, see Tracking Smartfit Activity.
Listening to activity events
This method works for any Smartfit HTML element.
For example, the following product sizing element uses the ID product-sizing:
<sf-product-sizing id="product-sizing"></sf-product-sizing>
The activity event can be observed as follows:
<!-- Place this script after the Smartfit HTML element -->
<script>
const sizingWidget = document.querySelector('#product-sizing');
sizingWidget?.addEventListener('activity', event => {
console.log('[Smartfit Activity]', event.detail);
});
</script>
Event payload typing
All TypeScript types shown below describe the shape of the detail property of the emitted CustomEvent.
sizingWidget.addEventListener(
'activity',
(event: CustomEvent<YourType>) => {
const payload = event.detail;
}
);
Every documented structure represents the exact structure of:
event.detail
The source and status fields can be used to discriminate between different payload variants.
When different Smartfit element types use the same source value, the element on which the listener was registered must also be considered.
Status value interpretation
The documented status values are part of the Smartfit callback contract.
Although some values resemble HTTP status codes, they describe the state of the emitted Smartfit event and should be interpreted according to the definitions on this page.
Initialization events
These events are identical for any Smartfit HTML element.
Initialization successful
Widget initialization was successful.
{
source: 'init';
status: 0;
data: {
type: string;
};
}
data.type: The loaded workflow type, for examplesizing,fallback, orgeometry
Initialization error
Widget initialization failed.
{
source: 'init';
status: 1;
data: {
id: string;
uid: string;
};
}
data.id: One of the predefined Smartfit error codesdata.uid: A unique error ID that maps to the corresponding server log
Include the uid in a Smartfit support request to help the support team investigate the issue.
Unauthorized
The widget could not be initialized because the request was unauthorized.
{
source: 'init';
status: 2;
}
Reset
The user reset their data and the widget was reset.
{
source: 'init';
status: 3;
}
Widget result events
These events are emitted on result screens.
Multiple result events may be emitted during one interaction or page session.
Sizing: success
{
source: 'sizing';
status: 200;
productType: string;
data: Array<{
code: string | null;
stock: boolean;
}>;
}
productType: Product type for which the result was calculateddata[].code: Unique product codedata[].stock:trueif the product is in stock; otherwisefalse
Sizing: no fitting sizes in stock
{
source: 'sizing';
status: 202;
productType: string;
}
A fitting size was found, but none of the fitting sizes are currently available in stock.
Sizing: no fitting sizes
{
source: 'sizing';
status: 203;
productType: string;
}
No fitting size was found for the current product and user data.
Category Sizing: success
{
source: 'category-sizing';
status: 200;
}
The Category Sizing workflow completed successfully.
Geometry: success
{
source: 'geometry';
status: 200;
productType: string;
}
A geometry result was displayed successfully.
Recommendation: success
{
source: 'recommendation';
status: 200;
productType: string;
data: Array<{
code: string;
}>;
}
productType: Product type used for the recommendationdata[].code: Unique product code of a recommended product
Fallback: success
{
source: 'fallback';
status: 200;
productType: string;
data: {
displaySize01: number;
displaySize02: string;
};
}
productType: Product type used for the fallback resultdata.displaySize01: Numeric display sizedata.displaySize02: Alternative display size
Leasing: success
{
source: 'leasing';
status: 200;
data: {
leasingDuration: string;
leasingPrice: string;
leasingRate: string;
savings: string;
savingsPercentage: string;
};
}
data.leasingDuration: Displayed leasing durationdata.leasingPrice: Displayed leasing pricedata.leasingRate: Displayed leasing ratedata.savings: Displayed savingsdata.savingsPercentage: Displayed savings percentage
Smart Sizing Button events
The following events are emitted by the Smart Sizing Button.
Smart Sizing Button: success
{
source: 'smart-button';
status: 200;
productType: string;
data: Array<{
code: string | null;
stock: boolean;
}>;
}
productType: Product type for which the result was calculateddata[].code: Unique product codedata[].stock:trueif the product is in stock; otherwisefalse
Smart Sizing Button: recommendations
{
source: 'smart-button';
status: 201;
productType: string | null;
}
A direct fitting result could not be displayed and recommendations are available.
Smart Sizing Button: no stock
{
source: 'smart-button';
status: 202;
productType: string | null;
}
A fitting result exists, but no fitting size is currently in stock.
Smart Sizing Button: no fit
{
source: 'smart-button';
status: 203;
productType: string | null;
}
No fitting size was found.
Smart Sizing Button: missing user data
{
source: 'smart-button';
status: 400;
productType: string | null;
}
The required user data is not yet available.
Smart Sizing Button: product not found
{
source: 'smart-button';
status: 404;
productType: null;
}
The requested product could not be resolved by Smartfit.
Smart Sizing Button: unknown request error
{
source: 'smart-button';
status: 420;
productType: null;
}
An unknown request error occurred.
Smart Leasing Button events
The following events are emitted by the Smart Leasing Button.
These events also use source: 'smart-button'. The Smartfit element on which the listener was registered must therefore be used to distinguish them from Smart Sizing Button events.
Smart Leasing Button: success
{
source: 'smart-button';
status: 200;
data: {
leasingPrice: string;
leasingRate: string;
savings: string;
savingsPercentage: string;
leasingDuration: string;
};
}
data.leasingPrice: Displayed leasing pricedata.leasingRate: Displayed leasing ratedata.savings: Displayed savingsdata.savingsPercentage: Displayed savings percentagedata.leasingDuration: Displayed leasing duration
Smart Leasing Button: success with flat rate
{
source: 'smart-button';
status: 201;
data: {
leasingPrice: string;
leasingRate: string;
savings: string;
savingsPercentage: string;
leasingDuration: string;
};
}
A leasing result using the flat-rate calculation was displayed successfully.
Smart Leasing Button: no permission
{
source: 'smart-button';
status: 403;
}
The shop does not have permission to use the requested leasing feature.
Category Sizing Banner events
The following events are emitted by Category Sizing Banners.
For Category Sizing, productType is more granular and contains a top-level product type, such as BIKE, and a subtype.
Category Sizing Banner: success
{
source: 'category-sizing-banner';
status: 200;
productType: {
type: string;
subType: string;
};
data: Array<{
code: string | null;
stock: boolean;
}>;
}
productType.type: Top-level product typeproductType.subType: Product subtypedata[].code: Unique product codedata[].stock:trueif the product is in stock; otherwisefalse
Category Sizing Banner: no fit
{
source: 'category-sizing-banner';
status: 203;
productType: {
type: string;
subType: string;
};
}
No fitting result was found for the specified product type and subtype.
Category Sizing Banner: missing user data
{
source: 'category-sizing-banner';
status: 400;
productType: {
type: string;
subType: string;
};
}
The required user data is not yet available.
Category Sizing Banner: product not found
{
source: 'category-sizing-banner';
status: 404;
}
The requested product could not be resolved by Smartfit.
Category Sizing Banner: unknown request error
{
source: 'category-sizing-banner';
status: 420;
}
An unknown request error occurred.