What's Inside
- 1. Quick Start — Embed in 60 Seconds
- 2. Live Demo — See It Working
- 3. Platform-Specific Instructions (WordPress, Webflow, Squarespace, Wix)
- 4. All Available Calculators
- 5. Customization Options
- 6. Troubleshooting Common Issues
- 7. Performance Impact — Real Numbers
- 8. Use Cases and Examples
- 9. Frequently Asked Questions
Quick Answer
Copy this code and paste it anywhere on your website:
<iframe src="https://calciq.app/app?calc=sip" width="100%" height="500" style="border:none;border-radius:8px;" title="SIP Calculator"></iframe>
<p style="font-size:12px;text-align:center;margin:8px 0 0">Powered by <a href="https://calciq.app" target="_blank" rel="noopener" style="color:#10b981;font-weight:600;text-decoration:none">CalcIQ</a></p>
Replace sip with: emi, fd, bmi, coffee, rent-vs-buy, age, or loan-comparison. Free, no signup, no API key needed.
1. Quick Start — Embed in 60 Seconds
Adding a calculator to your website requires no technical knowledge. It's a single HTML tag that works everywhere:
Step 2: Copy the iframe code
Step 3: Paste into your website's HTML editor
Step 4: Done. Calculator appears immediately.
The embed is:
- Free forever — no registration, no monthly fees, no limits on page views
- Responsive — automatically adjusts to mobile, tablet, and desktop
- Privacy-first — zero cookies, zero tracking, GDPR-compliant by default
- Fast — hosted on Cloudflare's global CDN, loads in under 1 second
- No maintenance — we handle updates, you just paste once and forget
loading="lazy" to delay loading until the user scrolls to it.2. Live Demo — See It Working
This is a real, working calculator embedded on this page using the exact same iframe code you'd paste on your site. Try it — enter any numbers and watch it calculate in real time:
Powered by CalcIQ
The code that produced the calculator above:
<iframe src="https://calciq.app/app?calc=sip" width="100%" height="550" style="border:none;border-radius:8px;" title="SIP Calculator" loading="lazy"></iframe>
<p style="font-size:12px;text-align:center;margin:8px 0 0">Powered by <a href="https://calciq.app" target="_blank" rel="noopener" style="color:#10b981;font-weight:600;text-decoration:none">CalcIQ</a></p>
That's it. One tag. The calculator handles responsive sizing, touch inputs, currency detection, and sharing — all without any work on your end.
loading="lazy" attribute means the iframe only starts loading when you scroll near it — zero impact on your above-the-fold content.3. Platform-Specific Instructions
📖 Detailed Platform Guides
We've written in-depth, step-by-step guides for the most popular website builders — covering gotchas, page builder variations, and troubleshooting. Pick yours:
WordPress (Block Editor / Gutenberg)
- Open the page/post where you want the calculator
- Click "+" to add a new block
- Search for "Custom HTML" and select it
- Paste the iframe code into the block
- Click "Preview" to see it rendered
- Publish — done
No plugin required. This works with any WordPress theme, any hosting provider. The iframe is standard HTML that WordPress renders natively.
👉 Full WordPress guide — covers Elementor, Divi, Beaver Builder, WPBakery, Oxygen, Classic Editor, and common troubleshooting.
Webflow
- In the Webflow Designer, add an "Embed" element from the components panel (left sidebar → "+" → search "Embed")
- Paste the iframe code into the embed component
- Adjust sizing in the style panel if needed
- Publish your site
👉 Full Webflow guide — covers responsive breakpoints, per-device sizing, and the Designer canvas limitation.
Squarespace
- Edit the page → click "+" to add a section
- Choose "Code" block
- Paste the iframe code
- Save and publish
⚠️ Important: Code blocks require a Business plan or above. Personal plan users cannot add custom HTML.
👉 Full Squarespace guide — covers plan requirements, Markdown block alternative, and the HTML vs Markdown gotcha.
Wix
- Add an "Embed HTML" element from the Wix editor (Add → Embed → Embed a Widget → HTML iframe)
- Click "Enter Code" and paste the iframe
- Resize the element to fit your page layout
⚠️ Important: Wix iframes don't auto-expand to content height. You need to set a fixed height (500-700px recommended). The mobile editor is separate — check sizing there too.
👉 Full Wix guide — covers frame sizing, the separate mobile editor, and domain connection requirements.
Notion
- Type
/embedin any Notion page - Paste the URL:
https://calciq.app/app?calc=sip - Notion renders it as an inline embed automatically
Plain HTML / Any CMS
Just paste the iframe tag anywhere in your page's <body>. It works in any HTML context — no dependencies, no JavaScript requirements, no build steps.
4. All Available Calculators
Replace the calculator type in the URL to switch between calculators:
| Calculator | Embed URL | Best For |
|---|---|---|
| SIP Calculator | app?calc=sip | Investment blogs, financial planning sites |
| EMI Calculator | app?calc=emi | Real estate sites, loan comparison pages |
| FD Calculator | app?calc=fd | Banking blogs, savings content |
| Rent vs Buy | app?calc=rent-vs-buy | Real estate blogs, housing guides |
| Loan Comparison | app?calc=loan-comparison | Loan aggregator sites, finance portals |
| Coffee Calculator | app?calc=coffee | Lifestyle blogs, spending awareness content |
| BMI Calculator | app?calc=bmi-new | Health blogs, fitness sites, wellness portals |
| Age Calculator | app?calc=age | Fun/viral content, birthday sites |
| Fuel Calculator | app?calc=fuel | Auto blogs, commute cost content |
| Tip Calculator | app?calc=tip | Restaurant/travel blogs |
5. Customization Options
Size and Layout
Adjust the width and height attributes:
- Full width:
width="100%"(default, recommended) - Fixed width:
width="600px"(for sidebars) - Height:
height="500"(default) — use 600-700 for mobile-heavy audiences
Border and Style
Add visual polish with CSS in the style attribute:
- Rounded corners:
border-radius: 8px(default) - Shadow:
box-shadow: 0 4px 12px rgba(0,0,0,0.1) - Border:
border: 1px solid #e5e7eb
Lazy Loading (Recommended for Performance)
<iframe src="https://calciq.app/app?calc=sip" width="100%" height="500" style="border:none;border-radius:8px;" title="SIP Calculator" loading="lazy"></iframe>
The loading="lazy" attribute defers loading until the user scrolls near the calculator — improving initial page speed for long-form content where the calculator is below the fold.
6. Troubleshooting Common Issues
Most embed problems fall into 5 categories. Here's how to fix each one:
Calculator Not Showing (Blank Space)
| Cause | Fix |
|---|---|
| Content Security Policy (CSP) blocks iframes | Add frame-src https://calciq.app to your CSP header |
| WordPress "Text" mode not selected | Switch from "Visual" to "Text" tab before pasting iframe code |
| Page builder stripping HTML | Use a "Raw HTML" or "Custom Code" widget, not a text widget |
| Browser extensions blocking iframe | Test in incognito mode — ad blockers sometimes block all iframes |
| HTTPS/HTTP mismatch | Your site must use HTTPS. CalcIQ serves over HTTPS only. |
Calculator Too Short (Content Cut Off)
The calculator needs at least 500px height to display results without scrolling. If results are cut off:
height="700" — Use 700px for financial calculators (SIP, EMI, FD) which have detailed resultsheight="500" — Works for simpler calculators (BMI, Age, Tip)height="850" — Use for Rent vs Buy (largest output of all calculators)
Calculator Looks Squished on Mobile
Always use width="100%" — never a fixed pixel width. If you set width="600px", it overflows on phones. The calculator's internal CSS handles mobile responsiveness, but it needs room to work.
Double Scrollbars Appearing
This happens when the iframe height is too small for the content. Two fixes:
- Increase height — bump to 700px or 800px
- Hide overflow — add
overflow: hiddento the iframe's style attribute (not ideal — cuts off content)
Webflow: Embed Shows Blank in Designer
This is normal Webflow behavior — embed elements don't render in the Designer canvas for security reasons. Your calculator will appear correctly when you click "Preview" or publish your site. Not a bug.
Wix: Calculator Doesn't Resize with Window
Wix iframes use a fixed frame size — they don't dynamically resize like regular responsive elements. Set your frame to at least 700px height and test in both desktop and mobile Wix editors separately (they're independent in Wix).
7. Performance Impact — Real Numbers
The most common concern with embeds: "Will it slow down my site?" Here's measured data:
| Metric | Without Embed | With Embed (lazy) | Impact |
|---|---|---|---|
| First Contentful Paint | 1.2s | 1.2s | 0ms (lazy = no impact) |
| Largest Contentful Paint | 1.8s | 1.8s | 0ms (iframe not LCP element) |
| Time to Interactive | 2.1s | 2.1s | 0ms (iframe loads independently) |
| Total Page Weight | Varies | +0 KB initially | 0 KB until scrolled to |
| Iframe Load Time | — | 180-350ms | Only when visible |
Why zero impact on Core Web Vitals:
loading="lazy"means the browser doesn't fetch the iframe until the user scrolls near it- The iframe runs in an isolated browsing context — its JavaScript doesn't touch your page's main thread
- CalcIQ serves from Cloudflare's CDN (300+ edge locations worldwide) — sub-200ms response globally
- No external dependencies: no fonts loaded, no analytics scripts, no third-party tracking
Comparison: Embed vs. JavaScript Widget vs. Plugin
| Method | Setup Time | Page Speed Impact | Maintenance | Privacy |
|---|---|---|---|---|
| CalcIQ iframe embed | 60 seconds | ~0ms (lazy) | Zero | ✅ No tracking |
| JavaScript widget (typical) | 5-15 min | 200-800ms (blocks render) | Updates needed | ⚠️ Usually tracks |
| WordPress plugin | 5-10 min | 300-1200ms | Monthly updates | ⚠️ Varies by plugin |
| Build your own | 20-80 hours | Depends | Ongoing | ✅ You control it |
loading="lazy", your Performance score shouldn't change at all. If it does, the iframe is above the fold — either move it down or remove the lazy attribute (which adds ~200ms load time).8. Use Cases and Examples
Personal Finance Blog
Writing about "how to start investing with ₹5,000/month"? Embed the SIP calculator right after your explanation. Readers plug in their own amount and immediately see projected returns. Engagement jumps because they're interacting with YOUR content, not leaving your site to find a calculator elsewhere.
Real Estate Website
Property listing pages with an embedded EMI calculator keep visitors on-page longer. They can check affordability for each listing instantly. The rent-vs-buy calculator works great on "should I buy?" guide pages — visitors answer the question without leaving your site.
Financial Advisor Website
Add calculators to your client-facing pages. Prospects explore SIP projections, EMI scenarios, or FD comparisons — then book a consultation with you to discuss their specific situation. The calculator pre-qualifies leads by showing them the math before they contact you.
Online Course (Udemy, Teachable, Notion)
Financial literacy courses become interactive when students can calculate real numbers. Embed the relevant calculator in each lesson module. "Calculate YOUR SIP growth" is far more engaging than "read about compound interest."
HR Portal / Employee Benefits Page
Help employees understand their compensation better. Embed the EMI calculator on loan benefit pages, the SIP calculator on investment benefit pages, or the age calculator for retirement planning sections.
9. Frequently Asked Questions
Will the embed slow down my website?
No. The iframe loads asynchronously — your page renders first, then the calculator loads inside. CalcIQ is hosted on Cloudflare's CDN with global edge caching. Typical load addition: less than 200ms. Use loading="lazy" to eliminate even that for below-fold placements.
Do I need to update the embed code?
Never. We handle all updates on our end. Your iframe code stays the same forever. When we add new features or fix bugs, they appear automatically in all embeds without any action from you.
Can I remove the "Powered by CalcIQ" link?
The free embed includes a small "Powered by CalcIQ" attribution link below the calculator. This is the only requirement for free usage — it helps us keep the service free and drives brand awareness. For white-label embeds without branding, contact us about Pro embedding options.
What about mobile responsiveness?
All calculators are built mobile-first with touch-friendly inputs (48px buttons, 16px fonts). Set width="100%" and the calculator adapts to any screen size automatically. No additional responsive CSS needed on your end.
Can I embed on multiple pages/sites?
Yes, unlimited. Same code works on as many pages and domains as you want. No domain restrictions, no page-view limits, no registration required.
Ready to Embed?
Browse all 19 calculators with copy-paste embed codes. Pick one, paste it, done.
Article Tags
Last Updated: August 8, 2026 | Author: CalcIQ Team