Integrate Flooring Calculator to Your Web Site

Html
            
                    <input type="button" id="calculateBtn" value="Calculate"/>
                    Usage  <input id="usageText"/>SF
                    <div id="callback" ></div>
                    <img id="image" />
                
            
Javascript
            
                    //jquery  version > 1.4
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
                    <script src="https://calculator.measuresquare.com/scripts/jquery-m2FlooringCalculator.js"></script>

                    <script>
                        $(function () {
                            $('#calculateBtn').m2Calculator({
                                measureSystem: "Imperial",            
                                thirdPartyName: "thirdPartyName", 
                                thirdPartyEmail: "test@email.com",
                                showCutSheet: false,
                                showDiagram: true,
                              /*product: {
                                    type: "Carpet",
                                    id: "Carpet 1",
                                    width: "6'0\"",
                                    length: "150'0\"",
                                    horiRepeat: "3'0\"",
                                    vertRepeat: "3'0\"",
                                    horiDrop: "",
                                    vertDrop: ""
                                },*/
                                cancel: function () {
                                },
                                callback: function (data) {
                                    $("#usageText").val(data.usage);    
                                    $("#image").attr("src", data.img);  //base64Image
                                }
                            });
                        });
                     </script>
                
            
Name Type Additional Description
measureSystemstringRequiredImperial or Metric
thirdPartyName
thirdPartyEmail
stringOptionalIf set, user can cc the estimate request to the email
showCutSheetboolOptionalDefault true. If false, will not include cutsheet section in return image
showDiagramboolOptionalDefault truel. If false, will close the popup directly when click 'Get Quantity Estimate' botton in first step
productProductDTOOptional If set, will use this product for calculation, else user needs to select the product type by dropdown

Example:
product: {
    type: "Carpet",
    id: "Carpet 1",
    width: "6'0\"",
    length: "150'0\"",
    horiRepeat: "3'0\"",
    vertRepeat: "3'0\"",
    horiDrop: "",
    vertDrop: ""
}

                            
cancelfunctionOptionalCallback when user closes the popup without calculation
callbackfunctionOptional Callback when user clicks estimate button

Example callback data formate:
{
    "measure":"Imperial",
    "input":{
        "rooms":[{"name":"room 1","type":"Rectangle","area":"240.00 SF","perimeter":"64'0\""}],
        "stairs":[]
    },
    "img":"data:image/png;base64,xxxx",
    "product":"carpet",
    "usage":"243.00"
}

                            

Example

Usage SF