Answer “what will this cost?” on your own website.

One script tag. A homeowner picks a project, a size and a ZIP and sees a real ballpark range in ten seconds — and the lead lands in your MAGE ID pipeline, already qualified.

yourcompany.com/estimate

What your visitor gets

A number, not a contact form

Every competitor answers this question with “fill this out and we'll call you.” You answer it before they leave the page.
A range, with its assumptions

The widget shows a band, names every assumption it made, and refuses outright when the scope is too odd to price. It never pretends to be a quote.
A reason to give you their name

They hand over contact details to see the number. You get a lead that already knows roughly what the job costs — no more “I had no idea it was that much” three calls in.

It lands in MAGE. The lead drops straight into your Pipeline as a new lead, with the project type, size, ZIP and the exact range the homeowner was shown recorded on it.

Copy this into your website

Paste it wherever you want the estimator to appear — a page builder HTML block, a WordPress custom-HTML widget, Squarespace code block, or straight into your template. Replace your-company-slug with your MAGE company slug.

<!-- MAGE ID Instant Estimate -->
<script src="https://mageid.app/widget/embed.js"
        data-mage-contractor="your-company-slug"
        data-mage-name="Your Company"
        defer></script>

That's the whole install. The widget renders right where you drop the tag. If you'd rather place it somewhere specific, put an empty <div data-mage-estimate></div> anywhere on the page and the script will mount into it instead.

Options

All optional except the first. Set them on the <script> tag, or per-widget on a [data-mage-estimate] element if you run more than one.

Attribute	Default	What it does
`data-mage-contractor`	—	Required. Your MAGE company slug (or user id). Routes the lead to you.
`data-mage-name`	`us`	Your company name, used in the widget's copy (“we send a copy to …”).
`data-mage-title`	Get an instant ballpark	Headline above the form.
`data-mage-subtitle`	A few details and…	Supporting line under the headline.
`data-mage-cta`	`Continue`	Label on the first button.
`data-mage-accent`	`#2F6B3A`	Accent colour — set it to your brand colour.
`data-mage-target`	—	CSS selector to mount into, instead of in-place.
`data-mage-demo`	off	Prices for real but skips the contact step and records no lead. Used by the demo above.

Mounting it yourself (single-page apps, React, Vue)

The script exposes exactly one global, window.MageInstantEstimate. Call it after your framework has rendered the container:

MageInstantEstimate.mount('#quote-box', {
  contractorId: 'your-company-slug',
  contractorName: 'Your Company',
  accent: '#0F766E'
});

It also exports MageInstantEstimate.projectTypes and .qualities if you want to build your own front end against the same API.

How the number is worked out

A typical published cost range for that scope, adjusted three ways, then floored at what it actually takes to mobilise the job.

Size

Bigger jobs cost more in total but less per square foot. A 4,000 sq ft remodel is not double a 2,000 sq ft one.

Finish level

Budget, standard, premium or luxury — because a luxury kitchen buys different cabinets and a longer schedule and more trades.

Region

ZIP resolves to a regional cost factor, with the high-cost metros handled separately.

Honesty

Every input the homeowner leaves blank visibly widens the band. Scopes outside the model get refused, not guessed.

It is a ballpark, and it says so. The widget prints “this is not a quote” on every result and lists what it assumed. That protects you: the homeowner arrives with a realistic expectation and a written record of how coarse it was, instead of a number they think you promised.

The API underneath

The widget is a thin front end over one public endpoint. Call it directly if you'd rather build your own.

POST https://nteoqhcswappxxjlpvap.supabase.co/functions/v1/widget-estimate
{
  "contractorId": "your-company-slug",
  "projectType":  "kitchen_remodel",
  "sizeSqft":     220,
  "quality":      "premium",
  "zip":          "30301",
  "name":         "Dana Reyes",
  "email":        "dana@example.com"
}

→ { ok, estimate: { range: { low, likely, high }, perSqft,
    confidence, assumptions[], cannotPriceReason }, leadCaptured }

GET the same URL for the list of project types and finish levels. Rate-limited per IP and per contractor; a honeypot field is accepted and silently discarded.

Your website should be closing leads while you're on a roof.

MAGE ID gives you the estimator, the pipeline it feeds, and the price book that turns those leads into bids priced off your own finished jobs.

Get your embed snippet → Start free See how MAGE ID works

The demo above is live — it calls the same endpoint your site would, with a demo contractor id, so no lead is recorded.
Free with MAGE ID · mageid.app