Integrate Quote Estimator to Your Web Site

Html
            
                    <input type="button" id="calculateBtn" value="Calculate"/>
                    Selected Product  <input id="productText"/>     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-m2QuoteCalculator.js"></script>

                    <script>
                        $(function () {
                            $('#calculateBtn').m2QuoteCalculator({
                                apiKey: "Pub_cc24e1fc9d354460ba9573a7c32c7528",
                                contact: {
                                    name: "ABCstore",
                                    email: "api@measuresquare.com",
                                    address: "12234 Broadway Blvd\nPasadena, CA 91101",
                                    phone: "626-683-9188"
                                },
                                settings: {
                                    measureSystem: "Imperial",
                                    imageWidth: 1024,
                                    showCutSheet: true,
                                    tax:  0.125,
                                    taxName: "CA"
                                },
                                products: [{
                                    id: "Airwaves Taupe",
                                    type: "Carpet",
                                    image: "https://calculator.measuresquare.com/Content/images/airwaves-taupe(c).jpg",
                                    color: "cccccc",
                                    unit: "SF",
                                    salesPrice: "1.6",
                                    boxName: "Roll",
                                    sellByBox: false,
                                    boxSalesPrice: "1500",
                                    width: "12'0\"",
                                    length: "150'0\"",
                                    horiRepeat: "",
                                    vertRepeat: "",
                                    horiDrop: "",
                                    vertDrop: "",
                                    taxable: true
                                }, {
                                    id: "Avalon Shore",
                                    type: "Carpet",
                                    image: "https://calculator.measuresquare.com/Content/images/avalonshore(c).jpg",
                                    color: "cccccc",
                                    salesPrice: "2.8",
                                    unit: "SF",
                                    width: "15'0\"",
                                    length: "150'0\"",
                                    horiRepeat: "3'0\"",
                                    vertRepeat: "3'0\"",
                                    horiDrop: "",
                                    vertDrop: "",
                                    taxable: true
                                }, {
                                    id: "Flor Anthracite",
                                    type: "Carpet",
                                    image: "https://calculator.measuresquare.com/Content/images/flor-anthracite(c).png",
                                    color: "2cc",
                                    salesPrice: "1.5",
                                    unit: "SF",
                                    width: "13'6\"",
                                    length: "120'0\"",
                                    horiRepeat: "",
                                    vertRepeat: "",
                                    horiDrop: "",
                                    vertDrop: "",
                                    taxable: true
                                }, {
                                    id: "Elaborate Haven",
                                    type: "Carpet",
                                    image: "https://calculator.measuresquare.com/Content/images/elaboratehaven(c).jpg",
                                    color: "2cc",
                                    salesPrice: "1.5",
                                    unit: "SF",
                                    width: "12'0\"",
                                    length: "150'0\"",
                                    horiRepeat: "2'0\"",
                                    vertRepeat: "2'0\"",
                                    horiDrop: "",
                                    vertDrop: "",
                                    taxable: true
                                }, {
                                    id: "Granulargrey Medley",
                                    type: "Vinyl",
                                    image: "https://calculator.measuresquare.com/Content/images/granulargrey-medley(c).jpg",
                                    color: "2cc",
                                    salesPrice: "3.9",
                                    unit: "SF",
                                    width: "6'0\"",
                                    length: "85'0\"",
                                    horiRepeat: "",
                                    vertRepeat: "",
                                    horiDrop: "",
                                    vertDrop: "",
                                    taxable: true
                                }, {
                                    id: "Caldwell Lightgreymatte",
                                    type: "Tile",
                                    image: "https://calculator.measuresquare.com/Content/images/caldwell-lightgreymatte(c).jpg",
                                    color: "2cc",
                                    salesPrice: "0.49",
                                    unit: "SF",
                                    sellByBox: true,
                                    boxSalesPrice: "9.98",
                                    unitsPerBox: 20.37,
                                    boxName: "Case",
                                    width: "3",
                                    length: "6",
                                    thickness: "1'0\"",
                                    horiRepeat: "",
                                    vertRepeat: "",
                                    horiDrop: "",
                                    vertDrop: "",
                                    taxable: true
                                }, {
                                    id: "Westernhickory Espresso",
                                    type: "Hardwood",
                                    image: "https://calculator.measuresquare.com/Content/images/westernhickory-espresso(c).jpg",
                                    color: "2cc",
                                    salesPrice: "2.99",
                                    unit: "SF",
                                    sellByBox: true,
                                    boxSalesPrice: "56.81",
                                    unitsPerBox: 19,
                                    boxName: "Case",
                                    width: "0'5\"",
                                    length: "4'10\"",
                                    horiRepeat: "",
                                    vertRepeat: "",
                                    horiDrop: "",
                                    vertDrop: "",
                                    taxable: true
                                }, {
                                    id: "XP Haleyoak",
                                    type: "Laminate",
                                    image: "https://calculator.measuresquare.com/Content/images/xp-haleyoak(c).jpg",
                                    color: "2cc",
                                    salesPrice: "1.99",
                                    unit: "SF",
                                    sellByBox: true,
                                    boxSalesPrice: "33.83",
                                    unitsPerBox: 17,
                                    boxName: "Case",
                                    width: "0'7\"",
                                    length: "3'11\"",
                                    horiRepeat: "",
                                    vertRepeat: "",
                                    horiDrop: "",
                                    vertDrop: "",
                                    taxable: true
                                }],
                                addons: [{
                                    id: "Underlayment",
                                    type: "Underlayment",
                                    trade: "",
                                    unit: "SF",
                                    salesPrice: "0.4",
                                    isChecked: true,
                                    required: false,
                                    taxable: true
                                }, {
                                    id: "Move Furniture",
                                    type: "Labor",
                                    trade: "",
                                    unit: "EA",
                                    salesPrice: "2",
                                    isChecked: false,
                                    required: false,
                                    taxable: true
                                }, {
                                    id: "Product Install",
                                    type: "Labor",
                                    trade: "",
                                    unit: "SF",
                                    salesPrice: "0.6",
                                    isChecked: true,
                                    required: true,
                                    taxable: true
                                }],
                                cancel: function () {
                                    alert("cancel");
                                },
                                callback: function (data) {
                                    console.log(data)
                                    $("#usageText").val(data.usage);
                                    $("#image").attr("src", data.img);
                                }
                            });
                        });
                     </script>
                
            

Note: The calculator's data output contains room names, areas, perimeters, and images.

Example

Selected Product Usage SF