Overview
Hosted widgets enable you to display Mapp Fashion recommendations on your website without needing to build a custom user interface or call the API directly. The widgets handle rendering, responsiveness, and interaction tracking automatically, which simplifies implementation and ensures consistent behavior.
This approach is particularly useful if you want to integrate recommendations quickly with minimal development effort.
Key Characteristics
Hosted widgets can only be used after Mapp Fashion onboarding and tracking are fully set up.
When a widget is initialized, a JavaScript snippet inserts an invisible iframe at the specified position on the page.
Once the widget content has finished loading, the iframe becomes visible.
Some widget types require a product identifier for the currently viewed product.
The product identifier must match the identifier used in the product feed.
Callback functions can be defined to run after widget loading completes, even if the widget does not display any content.
The widget bundle has no external dependencies.
Prerequisites
Before implementing hosted widgets, the following requirements must be met:
Product feed onboarding is completed.
Tracking is correctly implemented.
Product identifiers used on the website are consistent with those used in the product feed.
Available Widgets and Configuration
Widget type: Outfits
The Outfits widget displays outfits for a specific product. If the product code is not recognized or if no outfits can be generated for the product, the widget displays no content.
Example
Dressipi("widget", "outfits", document.querySelector('#dressipi-outfits'), {
productCode: "XYZ123",
onLoad: () => { console.log("widget loaded") }
})Parameters
Name | Description | Notes |
|---|---|---|
productCode | The identifier for the product | Must match the product identifier used in the product feed |
onLoad | Function called when widget loading is complete | Optional. Triggered even if no content is shown |
Widget type: Similar items
The Similar items widget displays products that are similar to a specific product. If the productCode is not recognized or if no similar items are available, the widget does not display any content.
Example
Dressipi("widget", "similarItems", document.querySelector('#dressipi-similar-items'), {
productCode: "XYZ123",
onLoad: () => { console.log("widget loaded") }
})Parameters
Name | Description | Notes |
|---|---|---|
productCode | The identifier for the product | Must match the product identifier used in the product feed |
onLoad | Function called when widget loading is complete | Optional. Triggered even if no content is shown |
onClose | Function called when the widget is closed | Optional |
onResize | Function called when the widget resizes automatically | Optional |
onScroll | Function called when a user navigates through the carousel | Optional |