HaveInsights FlowCraft
FlowCraft · Live demo

FlowCraft Scope Estimator

Adjust the project size, choose a service package, and watch the estimated range update instantly. This demo mirrors the calculation and default settings in the paid estimator's app.js and config.json.

Default pricing values. The numbers come from the buyer-delivered estimator, not a quote. Nothing you select is saved or sent anywhere.

Try it

  1. Drag the project size. From 500 to 4,000 sq ft, in steps of 100.
  2. Choose a package. Standard, Premium or Elite, each with its own multiplier.
  3. Read the range. The estimate updates as you go, shown as 5% below to 15% above the calculated total.

Instant Estimate

Project Scope Calculator

Service Package

Estimated Range

$969 - $1,173

How it works

How the estimate is calculated

The calculation lives in app.js. The shipped widget loads all of its pricing settings from config.json.

  1. Base amountProject size × (baseRate ÷ 1,000)
  2. PackageBase amount × the selected package multiplier
  3. RangeTotal × 0.95 to total × 1.15, each rounded to the nearest dollar

Example with the defaults: 1,200 sq ft on Standard is 1,200 × ($850 ÷ 1,000) × 1.0 = $1,020, shown as $969 - $1,173.

{
  "baseRate": 850,
  "currency": "$",
  "tiers": [
    { "name": "Standard", "multiplier": 1.0 },
    { "name": "Premium", "multiplier": 1.45 },
    { "name": "Elite", "multiplier": 1.9 }
  ],
  "showEmailForm": true,
  "buttonLabel": "Get My Detailed Quote",
  "submitUrl": ""
}
Simplified. The shipped config.json also sets the range multipliers, a package id for each tier, and the form heading, note and success message. Change any value, including package names and the currency symbol, without touching app.js. Put your form endpoint in submitUrl to have the email form send leads.

What the full version includes

Delivered as a ZIP download through Payhip, with a README.md setup guide and LICENSE.txt.

  • index.htmlLayout and structure, styled with Tailwind CSS
  • app.jsCalculation logic and email-form delivery
  • config.jsonPricing, packages and email-form settings
  • .htaccessApache/Hostinger caching and UTF-8 settings

Requirements

  • A web server to use your own settings. The estimator loads config.json from its folder. Opened straight from your computer, it still works with the built-in defaults.
  • A form endpoint to receive leads. Any service that accepts a JSON POST (for example Formspree, Make, Zapier or your own server). Until you add one, the email form sends nothing and says so.
  • An internet connection for visitors. Tailwind CSS loads from its public CDN.
  • No npm install or build step. Upload the files and the widget runs.

Get the Scope Estimator

Start with the free static shell to check the layout, or get the full version with the working calculation you just tried.

Free

Free Static HTML Shell

The visual layout and sample structure of the estimator, so you can review the design and markup in your own project.

  • Complete visual layout
  • Sample structure and markup
  • Does not include live estimator logic
Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Interactive Estimator — $97

The working estimator, with its pricing and email-form settings in config.json.

  • Interactive JavaScript pricing behavior
  • Editable pricing, packages and currency in config.json
  • Quote form that sends leads to your own form, CRM or webhook (editable wording, can be switched off)
  • No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript
Buy the Full Estimator — $97

Checkout and download are handled by Payhip.

Back to the FlowCraft catalogue to see the other components in development.