Dressipi-hosted Widgets
- 4 Minutes to read
- Print
- DarkLight
Dressipi-hosted Widgets
- 4 Minutes to read
- Print
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback!
You'll also need to install our client-side SDK, Dressipi.js to use this functionality
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 autoresized | Optional |
onScroll | A function that is called when a user navigates via the carousel | Optional |
Search
Displays search results to a query defined by the Dressipi stylists (e.g., dark-colored evening dresses).
Dressipi("widget", "search", document.querySelector('#dressipi-search-labels'), {
id: "search-label",
onLoad: () => { console.log("widget loaded") }
});domElement | The element to insert the widget into | Contact us for alternative insertion modes |
|---|---|---|
id | The search label to return results for | Dressipi will communicate the search labels configured for you. |
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 |
Product Listings
Displays a set of recommendations according to a plpType property, typically on a product listing page. This should match the data recorded by the PLP tracking, which is required if using this widget.
You must tell Dressipi which plpTypes 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 autoresized | Optional |
onScroll | A function that is called when a user navigates via the carousel | Optional |
Basket
Displays a set of items related to an array of products, typically on a basket/cart of the checkout page. These recommendations can be product or outfit recommendations - exact details should be agreed upon with Dressipi.
Dressipi("widget", "basket", document.querySelector('#dressipi-basket'), {
items: [
{ id: 'ABC123' },
{ id: 'XYZ456' }
],
onLoad: () => { console.log("widget loaded") }
});Name | Description | Notes |
|---|---|---|
items | An array of item objects whose id property identifies the item in the bag | 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 |
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.
Was this article helpful?