1. Knowledge base
  2. Getting Started for Admin

Advanced WAIR Installation

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:

  • 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>

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>