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 for installing on a React site. If you are using a framework other than React, drop us a note and we can help with any specific questions.

Add Header Script using React Helmet

  1. Go to Fit Advisor dashboard (https://app.getwair.com)
  2. Navigate to Widget Install
  3. Copy the brandkey from the Widget install script
  4. In your react project, install React Helmet if not there already:
    npm install react-helmet
  5. Use the following code to add Fit Advisor script to head:
    // index.js file
    <Helmet>
    {/* Fit Advisor site tag (predict.v3.js) - WAIR */}
    <script>
    {
    var config = {
    "brandKey": "<<API_KEY>>"
    };
    (function (i, s, o, n, c, g, a) {
    for (var j = 0; j < n.length; j++) { a = s.createElement(o); a.id = n[j]; a.type = 'text/javascript'; a.async = 1; a.src = n[j]; var m = document.getElementsByTagName(o)[0]; m.parentNode.insertBefore(a, m) }
    i.addEventListener("onPredictLoad", function () { window.predictWidget = BodyBlockV3.default.Predict.new(config); window.predictWidget.render() })
    })(window, document, 'script', ["https://predict.getwair.com/widget/static/js/predict.v3.js"]);
    }
    </script>
    </Helmet>

Add Placement Script to product page

  1. Go to Fit Advisor dashboard (https://app.getwair.com)
  2. Navigate to Widget Install
  3. Copy "Placement" script (reference below):
    <div class="predict-placement" 
    data-predict-product-key="{{PRODUCT_ID - match product feed}}"
    data-predict-product-name="{{PRODUCT_TITLE - escaped}}"
    data-predict-product-img="{{PRODUCT_IMG_URL - current on PDP}}">
    </div>
  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: