Embeddable Calculator Widgets

Add powerful calculators to your website with just a few lines of code. Choose from our collection of professional widgets below.

Easy to Embed

Choose between a full iframe embed or a lightweight button popup

Customizable Themes

Choose between light and dark themes to match your site

Fully Responsive

Works perfectly on desktop, tablet, and mobile devices

BMI Calculator

Health

Calculate Body Mass Index with metric and imperial units

Widget Code:

<div style="position: relative; width: 100%; max-width: 500px; margin: 0 auto;">
  <iframe 
    src="http://localhost:3000/widgets/bmi?theme=light" 
    style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px;" 
    frameborder="0"
    loading="lazy">
  </iframe>
  <p style="font-size: 12px; line-height: 1.4; margin: 8px 0 0; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #64748b;">
    Calculator by <a href="https://simplycalculators.co.uk/bmi-calculator" target="_blank" rel="noopener" style="color: #059669; text-decoration: none;">SimplyCalculators.co.uk</a>
  </p>
</div>

Loan Calculator

Financial

Calculate monthly payments and total interest for loans

Widget Code:

<div style="position: relative; width: 100%; max-width: 500px; margin: 0 auto;">
  <iframe 
    src="http://localhost:3000/widgets/loan?theme=light" 
    style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px;" 
    frameborder="0"
    loading="lazy">
  </iframe>
  <p style="font-size: 12px; line-height: 1.4; margin: 8px 0 0; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #64748b;">
    Calculator by <a href="https://simplycalculators.co.uk/" target="_blank" rel="noopener" style="color: #059669; text-decoration: none;">SimplyCalculators.co.uk</a>
  </p>
</div>

Tip Calculator

Financial

Calculate tips and split bills among multiple people

Widget Code:

<div style="position: relative; width: 100%; max-width: 500px; margin: 0 auto;">
  <iframe 
    src="http://localhost:3000/widgets/tip?theme=light" 
    style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px;" 
    frameborder="0"
    loading="lazy">
  </iframe>
  <p style="font-size: 12px; line-height: 1.4; margin: 8px 0 0; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #64748b;">
    Calculator by <a href="https://simplycalculators.co.uk/" target="_blank" rel="noopener" style="color: #059669; text-decoration: none;">SimplyCalculators.co.uk</a>
  </p>
</div>

Percentage Calculator

Math

Perform various percentage calculations quickly

Widget Code:

<div style="position: relative; width: 100%; max-width: 500px; margin: 0 auto;">
  <iframe 
    src="http://localhost:3000/widgets/percentage?theme=light" 
    style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px;" 
    frameborder="0"
    loading="lazy">
  </iframe>
  <p style="font-size: 12px; line-height: 1.4; margin: 8px 0 0; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #64748b;">
    Calculator by <a href="https://simplycalculators.co.uk/percentage-calculator" target="_blank" rel="noopener" style="color: #059669; text-decoration: none;">SimplyCalculators.co.uk</a>
  </p>
</div>

Mortgage Calculator

Financial

Calculate mortgage payments, total cost, and interest

Widget Code:

<div style="position: relative; width: 100%; max-width: 500px; margin: 0 auto;">
  <iframe 
    src="http://localhost:3000/widgets/mortgage?theme=light" 
    style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px;" 
    frameborder="0"
    loading="lazy">
  </iframe>
  <p style="font-size: 12px; line-height: 1.4; margin: 8px 0 0; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #64748b;">
    Calculator by <a href="https://simplycalculators.co.uk/mortgage-calculator" target="_blank" rel="noopener" style="color: #059669; text-decoration: none;">SimplyCalculators.co.uk</a>
  </p>
</div>

VAT Calculator

Financial

Add VAT to a net price or strip it out of a gross one

Widget Code:

<div style="position: relative; width: 100%; max-width: 500px; margin: 0 auto;">
  <iframe 
    src="http://localhost:3000/widgets/vat?theme=light" 
    style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px;" 
    frameborder="0"
    loading="lazy">
  </iframe>
  <p style="font-size: 12px; line-height: 1.4; margin: 8px 0 0; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #64748b;">
    Calculator by <a href="https://simplycalculators.co.uk/" target="_blank" rel="noopener" style="color: #059669; text-decoration: none;">SimplyCalculators.co.uk</a>
  </p>
</div>

Compound Interest Calculator

Financial

Project savings growth from a lump sum and monthly deposits

Widget Code:

<div style="position: relative; width: 100%; max-width: 500px; margin: 0 auto;">
  <iframe 
    src="http://localhost:3000/widgets/compound-interest?theme=light" 
    style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px;" 
    frameborder="0"
    loading="lazy">
  </iframe>
  <p style="font-size: 12px; line-height: 1.4; margin: 8px 0 0; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #64748b;">
    Calculator by <a href="https://simplycalculators.co.uk/" target="_blank" rel="noopener" style="color: #059669; text-decoration: none;">SimplyCalculators.co.uk</a>
  </p>
</div>

Calorie Calculator

Health

Estimate daily calorie needs from BMR and activity level

Widget Code:

<div style="position: relative; width: 100%; max-width: 500px; margin: 0 auto;">
  <iframe 
    src="http://localhost:3000/widgets/calorie?theme=light" 
    style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px;" 
    frameborder="0"
    loading="lazy">
  </iframe>
  <p style="font-size: 12px; line-height: 1.4; margin: 8px 0 0; text-align: center; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #64748b;">
    Calculator by <a href="https://simplycalculators.co.uk/" target="_blank" rel="noopener" style="color: #059669; text-decoration: none;">SimplyCalculators.co.uk</a>
  </p>
</div>

How to Use

1Choose a calculator widget from the options above
2Select "Widget" for a full embed or "Button" for a popup modal
3Select your preferred theme (light or dark)
4Click the "Copy Code" button to copy the embed code
5Paste the code into your website's HTML where you want the calculator to appear

A note on attribution

The embed code includes a small credit line under the calculator linking back to SimplyCalculators.co.uk. The widgets are free to use and always will be, and that link is how people find us. If it does not suit your layout you are welcome to remove it, or pass attribution: false to the button embed.