Fit Advisor plugin setup - Custom platform

Use this guide if you are not using a 3rd party e-commerce platform (i.e. Shopify, Salesforce commerce cloud, etc.)

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 traditional multi-page site. If your site is a single-page app built with a framework like React, refer here. Return to this guide for the backend integration.

Add Header Script

  1. Go to Fit Advisor dashboard (https://app.getwair.com)
  2. Navigate to "Install Scripts" on Fit Advisor Dashboard
  3. Copy the Header Script (reference below):
    {/* Fit Advisor site tag (predict.v3.js) - WAIR  */}
    <script>
    var addToCartCallback = function (size) {
    // add logic
    };

    var config = {
    "brandKey": "{{ your Fit Advisor brandKey }}",
    // uncomment the addToCart line to enable the Add to Cart button
    // "addToCart": addToCartCallback
    };
    (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 = PredictV3.default.Predict.new(config); window.predictWidget.render() })
    })(window, document, 'script', ["https://predict.getwair.com/widget/static/js/predict.v3.js"]);
    </script>

  4. Paste in <head> section to ensure script loads on all pages of site

Add Product Page Placement

  1. Go to Fit Advisor dashboard (https://app.getwair.com)
  2. Navigate to "Install Scripts" on Fit Advisor Dashboard
  3. Copy the "Product Page 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. Place the placement script on 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-bb-* data attributes with the proper dynamic values.

    Add Conversion script

    1. Go to Fit Advisor dashboard (https://app.getwair.com)
    2. Navigate to "Install Scripts" on Fit Advisor Dashboard
    3. Copy the "Conversion Script" (reference below):

      // This assumes ORDER object is available on this page
      <script type="text/javascript" async src="https://predict.getwair.com/widget/static/js/predict.v3.js"></script>
      <script type="text/javascript">
      window.addEventListener("onPredictLoad", function () {
      PredictV3.default.submitOrder({
      brandKey: {{ BRAND_KEY }}, // String
      orderId: {{ ORDER_ID }}, // String
      orderNumber: {{ ORDER_NUMBER }} // String
      })
      })
      </script>

    4. Paste at the top of your "Order Confirmation" page where a shopper lands once their order is successful.

    Reference of scripts with sample data

    Header script

    {/* Fit Advisor site tag (predict.v3.js) - WAIR  */}
    <script>
    var config = {
    "brandKey": "mybrand-guidguidguidguidguid"
    };
    (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 = PredictV3.default.Predict.new(config); window.predictWidget.render() })
    })(window, document, 'script', ["https://predict.getwair.com/widget/static/js/predict.v3.js"]);
    </script>

    Placement script

    <div class="predict-placement" 
    data-predict-product-key="mybrand-polo-blue"
    data-predict-product-name="My Brand Polo"
    data-predict-product-img="https://cdn.mybrand.com/mybrandpoloblue.png">
    </div>

    Conversion script


    // This assumes ORDER object is available on this page
    <script type="text/javascript" async src="https://predict.getwair.com/widget/static/js/predict.v3.js"></script>
    <script type="text/javascript">
    window.addEventListener("onPredictLoad", function () {
    PredictV3.default.submitOrder({
    brandKey: "mybrand-guidguidguidguidguid", // String
    orderId: "3642472267947", // String
    orderNumber: "1061" // String
    })
    })
    </script>