Install on almost any site

Add TradeCalcs to Your Website

Use hosted embeds when you want TradeCalcs to keep serving the calculator, or use the standalone customizer when you want a file you can download, host, and route leads through your own endpoint.

Customize a standalone calculator Build hosted embed code

Choose the Right Install Mode

TradeCalcs has two practical install paths. Pick based on how much control the buyer wants and where leads should go.

Hosted embed

Best when the buyer wants a quick iframe or hosted calculator link. TradeCalcs serves the calculator and can handle hosted lead delivery according to the plan.

  • Fastest install
  • Works in custom HTML/embed blocks
  • Good for nontechnical buyers

Standalone download

Best when the buyer wants ownership. Customize branding, colors, region, pricing assumptions, and lead destination, then download a self-contained HTML file.

  • Host on your own website
  • Route leads to your webhook or CRM
  • No owner API dependency in the exported calculator

Universal Install Steps

This is the same workflow for WordPress, Wix, Squarespace, Duda, Webflow, GoHighLevel, Shopify, and custom websites.

Hosted iframe embed

1
Pick the calculator.

Start from Products, Pricing, or the open hosted embed configurator.

2
Copy the iframe code.

Use /configure.html to set contractor branding, colors, lead destination, and a responsive iframe snippet. Example:

<iframe src="https://tradecalcs.com/kitchen_calculator_v1.html?company=Your%20Company&color=%23f97316" style="width:100%;height:760px;border:0;border-radius:12px;" loading="lazy"></iframe>
3
Paste into an HTML/embed block.

Publish, then check desktop and phone layouts.

4
Submit a test lead.

Confirm the lead destination, calculator type, and source metadata are correct.

Standalone file install

1
Open the standalone catalog.

Go to /standalone/ and click Customize on the calculator.

2
Set brand, region, colors, pricing, and lead route.

For no server dependency, choose your own webhook, Formspree endpoint, Make/Zapier hook, GoHighLevel inbound webhook, or no lead form.

3
Download the calculator HTML.

The downloaded file contains its own configuration and runs as a normal HTML page.

4
Upload or embed it.

Upload the file to your site, or paste the file contents into a page if your platform supports full custom HTML.

Platform Notes

WordPress

Use a Custom HTML block, shortcode plugin, Elementor HTML widget, or page template. If your theme strips scripts, use iframe mode.

Wix

Add an Embed HTML element, paste the iframe, stretch it full width, and test mobile height.

Squarespace

Use Code Block for iframe embeds. Some plans limit scripts, so iframe mode is the safest path.

Duda

Use HTML widget or a custom section. Duda is a good fit for agencies installing calculators across contractor clients.

Webflow

Use Embed component on paid sites. Publish to staging first and verify responsive width.

GoHighLevel

Use Custom JS/HTML or an iframe block on funnel/site pages. Standalone lead routing can point to a GHL inbound webhook.

Shopify

Use a Custom Liquid section or page template for iframe embeds. Keep calculators on service/quote pages, not product checkout pages.

Raw HTML

Paste the iframe directly, or upload the standalone HTML file and link to it from your navigation or CTA.

Lead routing note: hosted embeds can use TradeCalcs hosted delivery according to the plan. Standalone downloads should point to the buyer's own webhook or CRM when the buyer wants full ownership.

Need a Calculator to Test?

Start with the kitchen or roofing calculator, customize it, and test the published page on desktop and mobile before installing the rest.

Our Network

Cali Dream Construction RemodelSD Escondido Home Remodeling

Built by Cali Dream Construction · CSLB #1054602