To use Mapp Fashion–hosted widgets, you must include our JavaScript client library on your website. The library loads and initializes each widget, manages sizing and responsiveness, and tracks the necessary customer interactions.
Prerequisites
To get started with our widgets, you'll need to provide us with:
The size and position of the widget on the page
How it should behave on different devices and screen widths
In addition, you'll need to send us one or more of the following:
Design for how you'd like the integration to look or
General brand style guidelines; or
A reference to an existing component we can match
We'll take this and implement your widget to be as close to the above as we can.
How the Widget Works
Once imported and configured, our javascript configures and inserts an invisible iframe into the page at the requested location. When the content has loaded, the iframe reveals itself. Many widgets require a product identifier for a viewed product. This identifier should match the product identifier present in the feed.
Optionally, you can specify a callback invoked once the widget load has been completed (successfully or not).
This bundle does not have any external dependencies.
Sizing
Provides a sizing recommendation for a product.
If the user has not completed the signup, it can give a prompt to sign up. This widget will suppress itself if given a productCode it does not recognize (for example, one that is not in the feed). This provides some insurance against it displaying inappropriate content, but you should endeavor only to attempt to load on pages where it should be displayed.
Dressipi("widget", "sizing", document.querySelector('#dressipi-sizing'), {
productCode: "XYZ123",
})Name | Description | Notes |
|---|---|---|
productCode | The identifier for the viewed product | Should match the identifier provided in the product feed |
onLoad | A function that is called when loading is complete | Optional. This is called when the widget is ready. It is called whether or not content is shown. |
onClose | A function that is called when the widget is closed | Optional |
onResize | A function that is called when the widget is autoresized | Optional |
onScroll | A function that is called when a user navigates via the carousel | Optional |
Outfits
Displays outfits for a product.
This widget will suppress itself if the product code is not recognized or outfits cannot be generated for the product.
Name | Description | Notes |
|---|---|---|
productCode | The identifier for the product | Should match the identifier provided in the product feed |
onLoad | A function that is called when loading is complete | Optional. This is called when the widget is ready. It is called whether or not content is shown. |
onClose | A function that is called when the widget is closed | Optional |
onResize | A function that is called when the widget is autoresized | Optional |
onScroll | A function that is called when a user navigates via the carousel | Optional |
Similar items
Displays similar items for a product.
This widget will suppress itself if the productCode is not recognized or if no similar items match the product.
Dressipi("widget", "similarItems", document.querySelector('#dressipi-similar-items'), {
productCode: "XYZ123",
onLoad: () => { console.log("widget loaded") }
})Name | Description | Notes |
|---|---|---|
productCode | The identifier for the product | Should match the identifier provided in the product feed |
onLoad | A function that is called when loading is complete | Optional. This is called when the widget is ready. It is called whether or not content is shown. |
onClose | A function that is called when the widget is closed | Optional |
onResize | A function that is called when the widget is auto-resized | Optional |
onScroll | A function that is called when a user navigates via the carousel | Optional |
Product Listings
This widget displays a set of recommendations according to a plpType property, typically on a product listing page. The data recorded by the PLP tracking should match, which is required if using this widget.
You must tell us which PLP types you will be using ahead of time so that we can configure them to display the correct product type for the corresponding PLP. This can be top-level categories or more complex constructions (e.g., “Evening Dresses”) of category, occasion, brand, or feature.
Dressipi("widget", "plp", document.querySelector('#dressipi-plp'), {
plpType: "Dresses",
onLoad: () => { console.log("widget loaded") }
});Name | Description | Notes |
|---|---|---|
plpType | A string identifying the product listings page the widget is displayed on | The |
onLoad | A function that is called when loading is complete | Optional. This is called when the widget is ready. It is called whether or not content is shown. |
onClose | A function that is called when the widget is closed | Optional |
onResize | A function that is called when the widget is auto-resized | Optional |
onScroll | A function that is called when a user navigates via the carousel | Optional |
FAQ
Do widgets work on responsive pages?
Yes. The widget will set and update its height in response to changes in its width to match the behavior agreed, so should not be constrained by any other fixed height element. The width of the widget iframe will always be 100% and can be constrained by the parent of the domElement into which the widget is rendered.