Tile Calculator for Your Website

Add the same responsive Tile Calculator to your website with a hosted embed that stays updated by California Calculator.

Estimate floor or wall tile quantity, waste, whole boxes, purchased coverage, spare pieces, and optional material and labor cost.

Choose the space available on your page. The calculator automatically adapts for smaller screens.

Maximum widthpxStarting heightpxAccent color#B30000

Hosted widget

Embed the calculator

Open preview

This preview uses the same calculator as the main page. The included resize listener keeps the form, results, visualizations, and required attribution visible as its height changes.

Embed code

<div style="width:100%;max-width:880px;min-width:0;margin:0 auto;">
  <iframe
    id="california-calculator-tile"
    src="https://californiacalculator.net/embed/tile?theme=b30000&instructions=0&pdfDownload=1&fieldHelp=0&chart=1&details=1"
    title="Tile Calculator"
    width="100%"
    height="1040"
    loading="lazy"
    style="display:block;box-sizing:border-box;width:100%;max-width:100%;border:1px solid #aeb7bc;border-radius:4px;"
  ></iframe>
</div>
<script>
  window.addEventListener("message", function (event) {
    if (event.origin !== "https://californiacalculator.net") return;
    var data = event.data;
    if (data && data.type === "california-calculator:resize" && data.calculator === "tile") {
      var frame = document.getElementById("california-calculator-tile");
      if (frame) frame.style.height = Math.min(3000, Math.max(400, Number(data.height) || 1040)) + "px";
    }
  });
</script>

Attribution is required. The hosted calculator displays California Calculator branding and the “Get this for your site” link. Do not crop, cover, or remove them.

Simple link

Link to the full calculator

View full page

Use this smaller alternative when your publishing platform does not allow iframes or scripts.

Link code

<a href="https://californiacalculator.net/calculators/tile" target="_blank" rel="noopener noreferrer">Open the Tile Calculator</a>

Installation

Choose a maximum width, starting height, and accent color.
Select Copy HTML in the Embed code section.
Paste the code into an HTML or custom-code block in your website editor.
Preview the page on desktop and mobile before publishing.

The calculator loads over HTTPS, requires JavaScript, and resizes by exchanging height messages only with the California Calculator iframe.

Tile Calculator for Your Website

Widget settings

Embed the calculator

Link to the full calculator

Installation