The WAIR widget emits custom browser events allowing for your website to enhance the shopper experience with WAIR.
Widget Events API
Events
The WAIR widget emits custom browser events allowing for your website to enhance the shopper experience with WAIR. These custom events are emitted in response to several actions and can be used to enable features such as automatic size selection or integration with your analytics platforms.
Size Recommendation Made
The onPredictRecommendations event is emitted when a size recommendation is made by WAIR. This occurs for recommendations made both after a shopper goes through the survey flow and with the WAIR inline recommendations feature.
The event payload contains details about the recommendation:
- options: An object of key/value pairs where key is the option name of recommended variant and the value is the recommended option value. For example: { "size": "Medium" }
- productKey: A unique identifier of the product the recommendation was made for
- variantId: A unique identifier of the product variant that was recommended
Using the variantId, your code could, for example, automatically select the recommended size on the product page.
The data in the event payload is a batch (array) of recommendations created since the last time the event was emitted. The event will emit no less than two seconds after the latest recommendation was made.
Example usage:
<script>
window.addEventListener('onPredictRecommendations', (event) => {
console.log(event.detail);
// [
// { productKey: 'soft-pullover', variantId: '654789' },
// ]
// Your code here
});
</script>
Looking to enable automatic selection of the WAIR recommended size? See Auto-Select Recommended Size documentation.
Prediction Created
The onPredictPrediction event is emitted when the shopper completes the Universal Placement flow or visits a page which contains a Universal Placement after previously completing the flow.
Example usage:
<script>
window.addEventListener('onPredictPrediction', () => {
// Your code here
});
</script>
Modal Opened
The onPredictModalOpen event is emitted when the WAIR widget modal changes to an opened state, typically as a result of the shopper clicking/tapping on a PDP placement or Universal placement.
The event could be used to, for example, modify other on-screen UI elements or integrate with your shop's analytics platforms.
Example usage:
<script>
window.addEventListener('onPredictModalOpen', () => {
// Your code here
});
</script>
Modal Closed
The onPredictModalClose event is emitted when the WAIR widget modal changes to a closed state, typically as a result of the shopper completing a size recommendation or Universal Placement flow.
The event could be used to, for example, modify other on-screen UI elements or integrate with your shop's analytics platforms.
Example usage:
<script>
window.addEventListener('onPredictModalClose', () => {
// Your code here
});
</script>