Leanspace Fit Out Cost Estimator: How it works

Equip your clients with an instant idea of fit-out costs (before they request a detailed quote). Embed Leanspace’s fully customisable cost estimator. Visitors instantly see approximate fit-out costs, boosting transparency, trust, and conversion rates.

What is the Fit Out Cost Estimator?

Leanspace’s Fit-Out Cost Estimator is a self-hosted widget designed for fit-out providers. It lets prospects calculate ballpark project costs in seconds—before they even pick up the phone. By offering instant estimates, you position your business as transparent and client-focused, reduce back-and-forth on basic questions, and generate higher-quality leads ready for a detailed proposal.

What does it do?

The estimator invites site visitors to:

• Select units (sq. m. or sq. ft.).
• Choose finish quality tiers you configure.
• Enter office size with a simple input.
• View instant totals based on your per-unit pricing.

This drives value by:

• Speeding engagement: Prospects get answers immediately without waiting for a quote.
• Qualifying leads: Only prospects serious about cost interact with the widget.
• Reinforcing brand: Custom colours, default values, and descriptions align the tool with your visual identity.
• Streamlining processes: Preliminary estimates filter out unrealistic requests and save time on initial discovery calls.

Full Customisation: Make the Estimator Your Own

The Leanspace fit-out cost estimator is designed to be fully customisable to your design and cost specs. Every element from cost bands to custom colour branding to text can be set to suit your business and maximise client trust.

• Set Your Own Finish Levels: Define bespoke project tiers—such as Gold, Silver, Bronze, or Furniture Only (or others)—to reflect your service offerings. Each tier has its own pricing and description, allowing you to control the messaging.

• Adjust Pricing Instantly: Input your exact costs per square metre or foot for each finish. Clients see prices that are accurate for your business, not generic industry averages.
• Personalise Appearance: Match the widget’s default unit, text colours, and background to your website’s style, ensuring seamless brand alignment.

• Tailored Defaults: Set default and minimum sizes for estimates, so users start with values that best fit your portfolio or region.
• Customised Descriptions: Add explanatory text to each finish option, helping prospects understand what’s included and which level fits their needs—keeping you distinctly positioned in the market.

The configurator interface makes these adjustments quick and intuitive, requiring no development work. One click updates everything in real time.

Iframes and Embed Code

What is an iframe?

An iframe (inline frame) embeds external content in your page via HTML.

It behaves like a window within your site, displaying our estimator without redirecting users away.

What Is Embed Code?

Embed code is the complete HTML+JavaScript snippet that:

1. Loads the estimator inside an iframe.
2. Listens for messages from the iframe to auto-adjust its height.

This ensures the widget always fits its content, preventing scrollbars or cut-off displays.

How Embedding Works on Different Platforms

• Static HTML sites: Paste the snippet into your HTML file where you want the tool to appear.
• WordPress, Wix, Squarespace: Insert within a custom HTML or “code” block.
• React/Angular/Vue apps: Add to your component’s template using innerHTML or a similar binding.
• Headless/CMS frameworks: Inject the snippet into your page template or dynamic content region.

Step-By-Step Implementation Guide

Static HTML Sites

Locate your HTML file
Open the HTML file for the page where you want the estimator.

Paste the embed snippet
Within the body tag, insert the following code at the desired location.

1. • iframe tag: Loads the estimator URL.
   • style attributes: Ensures full-width responsiveness.
   • sandbox: Restricts iframe permissions to scripts, forms, and same-origin.
   • script: Listens for height messages and resizes the iframe automatically.
1. Save and deploy
   Upload the file to your server and publish.
2. Verify functionality
   Visit the page, select units and finish quality, enter a size, and confirm the total appears without scrollbars.

WordPress, Wix, and Squarespace

1. Open your page editor
   Go to the page or post where the estimator belongs.
2. Insert a custom HTML block
3. • WordPress: Add a Custom HTML block.
   • Wix: Add an Embed HTML element.
   • Squarespace: Insert a Code block.
3. Paste the full snippet
   Use the same iframe+script code from the Static HTML section.
4. Save and publish
   Click Update or Publish.
5. Test responsiveness
   Preview on desktop and mobile to ensure the estimator scales and auto-resizes correctly.

React, Angular, and Vue Apps

1. Identify the component
2. Add a placeholder element
3. - Inject the snippet on mount
4. Rebuild and deploy
   - Run your build command and push the changes.
5. Cross-browser test
   - Confirm the iframe loads, auto-resizes, and displays accurate estimates.

Headless CMS and Frameworks

1. Access template files
   Open your site’s theme or template repository.
2. Locate the insertion point
   Find the partial or layout file for the desired page.
3. Embed the snippet
   Directly paste the iframe+script code into the template where the calculator should appear.
4. Commit and trigger deployment
   Push changes to your CI/CD pipeline.
5. Verify live
   Navigate to the published page, interact with the tool, and ensure it resizes and calculates as expected.

Need Personalised Support?

If you need help with any embedding, customisation, or are wondering what values to set, contact our team at info@leanspace.org.uk.