Log In
Sales/Help Desk: 1-626-683-9188 Pacific Time    Contact Us


MeasureSquare Flooring Calculator




How do I add the Flooring Calculator to my web page?


Embed a regular button

Position this calculator button where ever you'd like by copying & pasting the HTML and JavaScript blocks below to your host HTML page. You can configure the calculator to use default settings, such as product width and length, by setting them in the JavaScript code as shown.

For lead generation, you may also provide your company name and email so that visitors can elect to send their estimates to you. Use the thirdPartyName and thirdPartyEmail parameters to do this.

               
                                        
        <input type="button" id="calculateBtn" value="Calculate"/>
        Usage  <input id="usageText"/>SF
        <div id="callback" ></div>
        <img id="image" />
                                        
                                    
               
                                        
    //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",  // if showDiagram = false, will send estimate data to this email when user click Email Estimate button
                    showCutSheet: false, // if false, will not include cutsheet section in return image
                    showDiagram: true,  // if false, will close the popup directly 
                    product: {
                        type: "Carpet",
                        name: "Carpet 1",
                        width: "6'0\"",
                        length: "150'0\"",
                        horiRepeat: "3'0\"",
                        vertRepeat: "3'0\"",
                        horiDrop: "",
                        vertDrop: ""
                    },
                    cancel: function () {
                        //when user closes the popup without calculation.
                    },
                    callback: function (data) {
                        //json format, include user input, usage and base64image
                        $("#callback").html(JSON.stringify(data));   
                        console.log(data.input)
                        $("#usageText").val(data.usage);    
                        $("#image").attr("src", data.img);  //base64Image
                    }
                });
            });
         </script>
                                        
                                    

How to integrate the Flooring Calculator to your online product shopping experience page

This is an example of how our calculator is integrated with an Amazon site. When you click on the green calculator button, you will be able to populate the shopping cart with the quantity.

Tile Calculator With Shopping Cart

Here is another shopping cart scenario with wood flooring selected. Click on the green calculator button to open the calculator window. Quantity field will be filled after the pop-up closes.

Wood Calculator With Shopping Cart

Another carpet shopping cart is on Lowe's carpet product page. Click on the green calculator button to pop up the calculator window. It will be filled when it is closed. Carpet Calculator With Shopping Cart

Web Calculator API and sample codes

Here is the MeasureSquare web flooring calculator API spec (https://calculator.measuresquare.com/help)

Contact

Please email api@measuresquare.com if you would like to host the calculator on your site. Or, you can use the web calculator API from your application.