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://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
                    <script src="https://calculator.measuresquare.com/scripts/jquery-m2FlooringCalculator.js"></script>

                    <script>
                        $(function () {
                            $('#calculateBtn').m2Calculator({
                                measureSystem: "Imperial",
                                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>
                
            

Example

Usage SF