Setup Fit Advisor on headless site

A few simple steps to get up and running with the WAIR Fit Advisor plugin in a headless environment

Before you begin

• You will need access to https://app.getwair.com to copy scripts for your brand site. Please reach out at help@getwair.com to get added.
• These instructions are generalized for installing on a site using any framework. If you have questions about implementing into your website's framework, such as React or Vue, please contact us and we'll be happy to help.

Add Site Script (without Auto Placement)

1. Add the following snippet before the closing </head> tag on every page.

2. <script type="text/javascript">
     window.addEventListener("onPredictLoad", function (event) {
       event.detail.predict.render({
         brandKey:""
     });
   });
   </script>
   <script type="text/javascript" async src="https://predict-v4.getwair.com/default/predict.js"></script>

3. Paste the snippet into your code so that it renders immediately before the closing </head> tag on every page.

Add Site Script (with Auto Placement)

1. Add the following snippet before the closing </head> tag on every page.  The "isPDP" should be replaced with logic to check if current page is a PDP.

2. <script type="text/javascript">
     window.addEventListener("onPredictLoad", function (event) {
       event.detail.predict.render({
         brandKey:"",
         product:  ? {
           key: "",
           name: "",
           image: ""
     });
   });
   </script>
   <script type="text/javascript" async src="https://predict-v4.getwair.com/default/predict.js"></script>

3. Paste the snippet into your code so that it renders immediately before the closing </head> tag on every page.

Add Placement Script to product page

1. Go to WAIR dashboard (https://app.getwair.com)
2. Navigate to Settings > Site Scripts
3. Copy the "Product Placement Script" code snippet
4. Add the placement script to your Product Detail Page in the desired location for your product page. Typically this will be just above the size labels or just below the Add to Cart button.
5. Update data-predict-* data attributes with the proper dynamic values.

Add Conversion script

Please refer to the Conversion script instructions for your respective platform here:

• Custom
• Shopify
• BigCommerce