Fit Advisor 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" src="https://predict.getwair.com/widget/static/js/predict.v3.js"></script>
      <script type="text/javascript">
      window.addEventListener("load", function () {
      var predictOrderDetails = {
      brandKey: {{ BRAND_KEY }}, // String
      orderId: {{ ORDER_ID }}, // String
      orderNumber: {{ ORDER_NUMBER }}, // String
      orderCreatedAt: {{ ORDER_CREATED_AT }}, // String - ISO 8601 (no fractional seconds)
      currency: {{ CURRENCY_CODE }}, // String - 3 digit currency code
      orderPrice: {{ SUBTOTAL_PRICE }}, // Number - without currency
      totalDiscounts: {{ TOTAL_DISCOUNTS }}, // Number - without currency
      customerId: {{ CUSTOMER_ID }}, // String (optional)
      lineItems: []
      }

      ORDER.lineItems.forEach(function(item){
      predictOrderDetails.lineItems.push({
      providerProductId: {{ item.PRODUCT_ID }}, // String
      productKey: {{ item.PRODUCT_KEY }}, // String
      sku: {{ item.SKU }}, // String
      variantId: {{ item.VARIANT_ID }}, // String
      quantity: {{ item.QUANTITY }}, // Number
      price: {{ item.PRICE }}, // Number
      totalDiscount: {{ item.TOTAL_DISCOUNT }} // Number
      })
      })


      PredictV3.default.submitOrder(predictOrderDetails)
      })
      </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" src="https://predict.getwair.com/widget/static/js/predict.v3.js"></script>
    <script type="text/javascript">
    window.addEventListener("load", function () {
    var predictOrderDetails = {
    brandKey: "mybrand-guidguidguidguidguid", // String
    orderId: "3642472267947", // String
    orderNumber: "1061", // String
    orderCreatedAt": "2021-02-26 15:04:35 -0800", // String
    orderPrice: 86.50, // Number - without currency
    currency: "USD", // String - 3 digit currency code
    totalDiscounts: 12.0, // Number - without currency
    customerId: "3269922783287", // String (optional)
    lineItems: []
    }

    ORDER.lineItems.forEach(function(item){
    predictOrderDetails.lineItems.push({
    providerProductId: "1496335220791", // String
    productKey: "mybrand-polo-blue", // String
    sku: "POLO-BLUE-M", // String
    variantId: "37553932992683", // String
    quantity: 1, // Number
    price: 86.50, // Number
    totalDiscount: 12.0 // Number - without currency
    })
    })


    PredictV3.default.submitOrder(predictOrderDetails)
    })
    </script>