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({
                                key: "demo",
                                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
key	string	Required	Contact 1-626-683-9188 M-F 7:30-5 PST to get your key
measureSystem	string	Required	Imperial or Metric
thirdPartyName thirdPartyEmail	string	Optional	If set, user can cc the estimate request to the email
showCutSheet	bool	Optional	Default true. If false, will not include cutsheet section in return image
showDiagram	bool	Optional	Default true. If false, will close the popup directly when click 'Get Quantity Estimate' botton in first step
product	CloudProduct	Optional	If set, the product will be used for calculation, otherwise user needs to select the product type by dropdown.Default type is Carpet. Example: `product: { type: "Carpet", id: "Carpet 1", width: "6'0\"", length: "150'0\"", horiRepeat: "3'0\"", vertRepeat: "3'0\"", horiDrop: "", vertDrop: "" }`
cancel	function	Optional	Callback when user closes the popup without calculation
callback	function	Optional	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