Integrate Countertop 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-m2CountertopCalculator.js"></script>

                    <script>
                        $(function () {
                            $('#calculateBtn').m2Calculator({
                                thirdPartyName: "thirdPartyName",
                                thirdPartyEmail:"a@b.com",
                                cancel: function () {
                                    //when user closes the popup without calculation.
                                },
                                callback: function (data) {
                                    //json format, include counters, 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