Add Financial Calculators to Webflow
Webflow powers 1% of all websites
Add NexTool calculators to your Webflow site using custom embed components. Perfect for designers who want interactive financial tools without breaking their design system.
Step-by-Step Installation Guide
Follow these steps to add NexTool calculators to your Webflow site. Most users are done in under 2 minutes.
Open the Webflow Designer
Log in to Webflow and open your project in the Designer. Navigate to the page where you want to add the calculator.
Add an Embed Component
From the Add Elements panel (A key), scroll to Components or search for "Embed". Drag the Embed element onto your canvas where you want the calculator.
<class="code-tag">iframe
src=class="code-string">"https:class="code-commentclass="code-string">">//getnextool.com/embed/mortgage-calculator"
width=class="code-string">"100%"
height=class="code-string">"450"
frameborder=class="code-string">"0"
style=class="code-string">"border: none; border-radius: 8px;"
title=class="code-string">"Mortgage Calculator"
loading=class="code-string">"lazy"
></class="code-tag">iframe>Style with Webflow Classes
Wrap the embed in a Div Block and apply Webflow classes for consistent spacing, max-width, and responsive behavior.
class=class="code-string">"code-comment"><!-- Webflow structure -->
<class="code-tag">div class=class="code-string">"calculator-wrapper">
class=class="code-string">"code-comment"><!-- Add these styles via Webflow's style panel:
max-width: 800px
margin: 0 auto
padding: 2rem 1rem
-->
<class="code-tag">iframe
src=class="code-string">"https:class="code-commentclass="code-string">">//getnextool.com/embed/mortgage-calculator"
width=class="code-string">"100%"
height=class="code-string">"450"
frameborder=class="code-string">"0"
style="border: none; border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"
title=class="code-string">"Mortgage Calculator"
loading=class="code-string">"lazy"
></class="code-tag">iframe>
</class="code-tag">div>Make It a Reusable Symbol
Right-click the calculator wrapper and select "Create Symbol". Name it "NexTool Calculator". Now you can reuse it across pages and update all instances at once.
Add Custom Code for Auto-Resize (Optional)
Go to Project Settings > Custom Code and add a script to the footer for dynamic height adjustment.
class=class="code-string">"code-comment"><!-- Add to Project Settings > Custom Code > Footer -->
<class="code-tag">script>
window.addEventListener(class="code-string">'message', function(event) {
if (event.data && event.data.type === class="code-string">'nextool-resize') {
document.querySelectorAll(class="code-string">'iframe[src*=class="code-string">"nextool"]')
.forEach(function(iframe) {
iframe.style.height = event.data.height + class="code-string">'px';
});
}
});
</class="code-tag">script>Live Preview
This is how a NexTool calculator will look on your Webflow site.
<iframe
src="https://nextool.dev/embed/mortgage-calculator"
width="100%"
height="450"
frameborder="0"
title="Mortgage Calculator"
></iframe>Customization Options
Tailor the calculator to match your Webflow site.
Size
Set custom width and height. Default is 100% width, 450px height. The calculator is fully responsive.
Theme
Choose light or dark theme to match your site. Paid tiers support custom brand colors.
Tools
Choose from 326+ calculators: mortgage, BMI, salary, loan, tax, investment, retirement, and more.
Pricing
Get started for free. Upgrade as you grow.
Frequently Asked Questions
Common questions about using NexTool calculators with Webflow.
Does it work with Webflow CMS collections?
Yes. You can add an Embed element inside a CMS collection template to show different calculators for different collection items. Use CMS fields to dynamically set the calculator slug if needed.
Can I style the calculator with Webflow?
You can style the container around the calculator using Webflow's visual designer — adding borders, shadows, padding, and responsive rules. The calculator itself renders inside the iframe with its own styles.
Will it work on my published Webflow site?
Yes. Embed elements work on all published Webflow sites, whether hosted on Webflow's servers or exported and self-hosted. The calculator loads from NexTool's servers via the iframe.
Can I use interactions/animations with it?
You can apply Webflow interactions to the container Div Block (e.g., fade-in on scroll), but not to content inside the iframe. This is a standard browser security behavior for iframes.
Ready to Add Calculators to Webflow?
Start with our free tier — no credit card required. Upgrade anytime for more calculators and white-label branding.