Home › Install Guide

How to Install TradeCalcs

Step-by-step embed instructions for every major website platform. 5 minutes or less.

On This Page

Quick Start (Any Site)

Every TradeCalcs product works the same way: copy a code snippet, paste it into your website. No plugins, no installs, no developer needed.

For Calculators

Calculators use an <iframe> embed. Copy this code and paste it where you want the calculator to appear:

<iframe src="https://tradecalcs.com/calculators/kitchen_calculator_v1/" width="100%" height="700" frameborder="0" title="Kitchen Remodel Calculator"> </iframe>

Replace kitchen_calculator_v1 with the calculator you purchased. The full list is in your Customer Portal.

For Widgets

Widgets use the TradeCalcs loader script. One line of code:

<script src="https://tradecalcs.com/embed/loader.js" data-widget="google_reviews"> </script>

Replace google_reviews with your widget name. The widget renders automatically where you place the script tag.

Tip: Both embed types are responsive and will fill the width of their container. Place them inside a section, column, or div on your page.

WordPress

📜 WordPress (Block Editor / Gutenberg)

  1. Open the page or post where you want the calculator/widget
  2. Click the + button to add a new block
  3. Search for "Custom HTML" and select it
  4. Paste your embed code into the HTML block
  5. Click "Preview" to verify it shows up, then Publish/Update

📜 WordPress (Classic Editor)

  1. Open the page/post in the editor
  2. Switch to the "Text" tab (not "Visual")
  3. Paste your embed code where you want it
  4. Click Update/Publish
Note: Some page builders (Elementor, Divi, Beaver Builder) have their own "HTML" or "Code" widget. Use that instead of the WordPress block.

Wix

🌐 Wix

  1. In the Wix Editor, click Add (+) in the left panel
  2. Select "Embed Code" → "Embed HTML"
  3. A code box appears on your page. Click "Enter Code"
  4. Select the "Code" tab and paste your embed code
  5. Click "Update" and resize the element as needed
  6. Publish your site
Tip: For calculators on Wix, set the embed element height to at least 700px for the best experience.

Squarespace

■ Squarespace

  1. Edit the page where you want the embed
  2. Click "Add Block" (or the + icon)
  3. Select "Code" from the block menu
  4. Paste your embed code in the code block
  5. Make sure the toggle is set to "HTML" (not Markdown)
  6. Save the page
Note: Squarespace Code blocks only render on the live site, not in the editor preview. Preview your page to see the embed.

Duda

🛠 Duda

  1. In the Duda editor, click "Widgets" in the left panel
  2. Drag an "HTML" widget onto your page
  3. Click the widget and select "Edit HTML"
  4. Paste your embed code
  5. Click "OK" and adjust sizing
  6. Publish your changes

Webflow

🌱 Webflow

  1. In the Webflow Designer, add an "Embed" component from the Add panel
  2. The embed code editor opens automatically
  3. Paste your embed code
  4. Click "Save & Close"
  5. Publish your site

Shopify

🛒 Shopify

  1. Go to Online Store → Pages (or the page you want)
  2. In the content editor, click the </> (Show HTML) button
  3. Paste your embed code
  4. Click "Save"

For theme-wide embeds (like chat widgets), go to Online Store → Themes → Edit Code and paste the code before </body> in your theme.liquid file.

Raw HTML / Any Site

💻 Any HTML Site

Just paste the embed code directly into your HTML where you want it to appear:

<!-- Calculator embed --> <div style="max-width: 800px; margin: 0 auto;"> <iframe src="https://tradecalcs.com/calculators/kitchen_calculator_v1/" width="100%" height="700" frameborder="0" title="Kitchen Remodel Calculator"> </iframe> </div>

Universal Loader (Advanced)

For developers or sites needing multiple widgets, use the TradeCalcs Universal Loader. One script loads any product:

Auto-Init (simplest)

<script src="https://tradecalcs.com/embed/loader.js" data-widget="google_reviews" data-token="YOUR_EMBED_TOKEN" data-color="#2563eb"> </script>

Manual Init (more control)

<script src="https://tradecalcs.com/embed/loader.js"></script> <div id="my-calculator"></div> <script> TradeCalcs.load('kitchen_calculator_v1', { container: 'my-calculator', token: 'YOUR_TOKEN', color: '#2563eb', brand: 'Your Company' }); </script>

Available data attributes

Troubleshooting

Widget not showing up?

Calculator too small or cut off?

Widget shows on desktop but not mobile?

Need help?

Email [email protected] with your website URL and the product you're trying to install. We'll get you set up.