Hosted widgets provide a simple way to display Mapp Fashion recommendations when Integrated Tracking is used.
Widgets are loaded on top of an existing Mapp Intelligence Smart Pixel setup. Recommendation delivery, rendering, responsiveness, and interaction tracking are handled automatically by the Mapp Fashion extension.
This page focuses on widget behavior and configuration.
Details about tracking setup, data collection, and identifier mapping are covered in the Integrated Tracking documentation.
Prerequisites
Hosted widgets require a completed Mapp Fashion onboarding and an active Integrated Tracking setup.
For the full and authoritative list of prerequisites (product feed, identifiers, tracking configuration), see: Prerequisites for Mapp Fashion Onboarding
How hosted widgets Work
When a widget is initialized, the Mapp Fashion extension injects an iframe into the specified container element and loads the widget content dynamically.
Key characteristics:
Widgets rely on the same product identifiers used in the product feed and tracking setup.
Rendering, responsiveness, and recommendation interaction tracking are handled automatically.
Optional callbacks can be registered to react to widget lifecycle events (for example, load or resize).
Hosted widgets have no external dependencies.
Widgets
The following widgets are available when using Integrated Tracking.
Sizing
Provides a sizing recommendation for the currently viewed product.
If the shopper has not completed the sizing signup, the widget can display a signup prompt. The widget suppresses itself if the provided productCode is unknown.
wtSmart.extension.fashion.call(
"widget",
"sizing",
document.querySelector("#dressipi-sizing"),
{
productCode: "XYZ123",
placement: "pdp"
}
);Name | Description | Notes |
|---|---|---|
productCode | Identifier of the viewed product | Must match the identifier provided in the product feed |
placement | Page context in which the widget is displayed | Optional. Used for tracking and reporting (for example, pdp, plp) |
onLoad | Called when loading is complete | Optional. Called whether or not content is shown |
onClose | Called when the widget is closed | Optional |
onResize | Called when the widget auto-resizes | Optional |
onScroll | Called when the user navigates within the widget carousel | Optional |
Outfits
Displays outfits for a given product.
The widget suppresses itself if the product is unknown or if no outfits can be generated.
Name | Description | Notes |
|---|---|---|
productCode | Identifier of the viewed product | Must match the identifier provided in the product feed |
placement | Page context in which the widget is displayed | Optional. Used for tracking and reporting (for example, pdp, plp) |
onLoad | Called when loading is complete | Optional. Called whether or not content is shown |
onClose | Called when the widget is closed | Optional |
onResize | Called when the widget auto-resizes | Optional |
onScroll | Called when the user navigates within the widget carousel | Optional |
Similar items
Displays products similar to the currently viewed product.
The widget suppresses itself if the product is unknown or no similar items are available.
wtSmart.extension.fashion.call(
"widget",
"similarItems",
document.querySelector("#dressipi-similar-items"),
{
productCode: "XYZ123",
placement: "pdp",
onLoad: () => {
console.log("widget loaded");
},
}
);Name | Description | Notes |
|---|---|---|
productCode | Identifier of the viewed product | Must match the identifier provided in the product feed |
placement | Page context in which the widget is displayed | Optional. Used for tracking and reporting (for example, pdp, plp) |
onLoad | Called when loading is complete | Optional. Called whether or not content is shown |
onClose | Called when the widget is closed | Optional |
onResize | Called when the widget auto-resizes | Optional |
onScroll | Called when the user navigates within the widget carousel | Optional |
Product listings (PLP)
Displays recommendations on product listing pages (PLPs) based on a plpType value.
The plpType must match the value sent by PLP tracking and must be agreed in advance.
Supported PLP types can represent categories, brands, occasions, or other curated groupings.
wtSmart.extension.fashion.call(
"widget",
"plp",
document.querySelector("#dressipi-plp"),
{
plpType: "Dresses",
placement: "pdp",
onLoad: () => {
console.log("widget loaded");
},
}
);Name | Description | Notes |
|---|---|---|
plpType | Identifier of the product listing page | Must match PLP tracking |
placement | Page context in which the widget is displayed | Optional. Used for tracking and reporting (for example, pdp, plp) |
onLoad | Called when loading is complete | Optional |
onClose | Called when the widget is closed | Optional |
onResize | Called when the widget auto-resizes | Optional |
onScroll | Called when the user navigates within the widget carousel | Optional |
FAQ
Do widgets work on responsive pages?
Yes. Widgets automatically adjust their height when their width changes. The iframe width is always set to 100% and can be constrained by the parent container.