Embed the Calculator 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" />
<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>
