Install the widget

Before you start

You need an active ClearCost Embed subscription. Your widget won't load until a subscription is active. Once it is, open Pro dashboard → Website Embed to find your embed token and the ready-to-paste snippet.

Add the snippet

Paste this where you want the estimator to appear on your page:

<iframe id="clearcost-estimator"
  src="https://getclearcost.com/embed/YOUR_TOKEN"
  title="Get an Instant Estimate"
  style="width:100%;min-height:760px;border:0" loading="lazy"></iframe>
<script>
window.addEventListener("message", function (e) {
  var d = e.data;
  if (d && d.type === "clearcost-embed:height" && typeof d.height === "number") {
    var f = document.getElementById("clearcost-estimator");
    if (f && f.contentWindow === e.source) {
      f.style.height = Math.max(300, Math.ceil(d.height)) + "px";
    }
  }
});
</script>

The iframe renders the estimator; the script listens for height messages and grows the frame to fit. You can place the script once per page even if you have multiple frames — it matches each message to the frame that sent it.

How auto-resize works

The widget posts a message of type clearcost-embed:height to the parent window whenever its content height changes. The snippet's listener verifies the message came from the estimator's own frame, then sets the iframe height (never below 300px). If you remove the script, set a generous fixed min-height instead so the last step isn't cut off.

Lock it to your domain

In Website Embed → Allowed domains, add every domain that should be allowed to display your widget (for example example.com and www.example.com). ClearCost sends frame-ancestor rules so the estimator only loads on the sites you list — this keeps other sites from embedding your paid widget.

Trades & branding

1. 1

   Pick your trades

   Enable the project types you want to quote in the dashboard. Solo covers one trade, Studio up to three, Enterprise all of them.
2. 2

   Set your branding

   Add your logo and accent color. On Solo and Studio the widget is co-branded with ClearCost; Enterprise can hide the ClearCost badge entirely (white-label).

Test it

1. 1

   Load the page

   Open the page where you pasted the snippet. The estimator should render full-width and resize as you move through the steps.
2. 2

   Run an estimate

   Complete a quote end-to-end using a real ZIP you serve. Submitting creates an exclusive lead.
3. 3

   Confirm the lead

   Check Pro dashboard → Website Embed (and your email) for the new lead. To forward it to your CRM, set up webhooks next.