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>
Note: The calculator's data output contains counter names, areas, perimeters, and images. To prevent the raw data from being displayed on the page, remove this line from the sample code: $("#callback").html(JSON.stringify(data));