How to Embed a Calculator on Your Website

Why Embedded Calculators Outperform Linked Ones

A calculator that opens in a new tab loses the majority of visitors who built up the intent to use it. Context switching breaks the flow. An embedded calculator — one that lives inside your landing page or blog post — keeps users in your environment, on your content, next to your CTA.

Embedded calculators also improve SEO metrics that matter: time on page goes up, bounce rate goes down, and returning visitors are more likely when you have a useful tool on the page.

Two Ways to Embed: iFrame vs JavaScript Script

The iFrame Approach

An iFrame embeds the calculator in a sandboxed container. It is simple, widely supported, and safe — the embedded content cannot access or modify your page's CSS or JavaScript.

<iframe
  src="https://ninjadoc.com/s/your-calculator-slug"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;"
></iframe>

The downside of iFrames is height management. If your calculator is taller than the fixed height, you get a scroll bar inside the frame — which looks broken. You either set a generous fixed height or use JavaScript to resize the iFrame dynamically based on content height.

The JavaScript Script Approach (Shadow DOM)

A script-based embed injects the calculator directly into your page's DOM, isolated inside a Shadow DOM. This eliminates the fixed-height problem and allows the calculator to resize naturally as users interact with it.

<div id="ninjadoc-calculator"></div>
<script
  src="https://ninjadoc.com/embed.js"
  data-experience="your-calculator-slug"
  data-target="ninjadoc-calculator"
  async
></script>

The Shadow DOM isolation means your page styles do not leak into the calculator and the calculator's styles do not affect your page — the same benefit as an iFrame, but without the height constraint.

NinjaDoc uses this approach by default. The generated embed snippet handles all of this automatically.

Step-by-Step: Embed a NinjaDoc Calculator

Step 1 — Build your calculator. In your NinjaDoc dashboard, create a new experience and use the AI prompt to generate your calculator. Review the fields and formulas, then publish it.

Step 2 — Copy the embed code. Open the experience settings and click "Embed." NinjaDoc generates a snippet optimized for your experience — either a script tag or iFrame depending on your preference.

Step 3 — Paste into your website. Place the snippet in your HTML where you want the calculator to appear. This works in:

• Static HTML sites
• WordPress (paste into a Custom HTML block)
• Webflow (add an Embed element)
• Framer, Squarespace, Wix (use their embed/code blocks)
• Next.js, React (use dangerouslySetInnerHTML or a wrapper component)

Step 4 — Test on mobile. Interactive calculators need to be fully usable on mobile. NinjaDoc's embed is responsive by default, but verify that all inputs are reachable and the results page renders correctly on a small screen.

Step 5 — Monitor submissions. NinjaDoc tracks all responses. Review the analytics dashboard to see completion rates, average values entered, and result distribution. Use this data to refine your calculator.

Common Embedding Problems and Fixes

The calculator is too short / shows a scrollbar. If you are using an iFrame, increase the height attribute or switch to the script embed which auto-sizes.

CSS conflicts are styling the calculator incorrectly. Switch to the script embed (Shadow DOM) if CSS from your site is leaking into the calculator.

The calculator does not appear in WordPress. Make sure you are using a Custom HTML block (not a text block or paragraph block) and that your theme is not stripping script tags.

The calculator loads slowly. The embed script loads asynchronously and should not block your page. If you are seeing slow load times, check if a content security policy (CSP) on your site is blocking scripts from ninjadoc.com. Add ninjadoc.com to your CSP script-src directive.

Tips for Maximum Impact

• Place the calculator above the fold or immediately after a compelling hook paragraph. Do not bury it below the page fold where users have to scroll to find it.
• Add a headline above the embed that frames the calculator's value: "Find out exactly how much you could save."
• Put your CTA below the embed — after someone gets their result, you want a natural next step immediately visible.
• Share the calculator URL directly in email campaigns and social posts. NinjaDoc gives every calculator a standalone page at /s/your-slug — share that when you want the calculator to be the full-page experience.

Ready to Build and Embed Your Calculator?

NinjaDoc generates your calculator from a description, handles all the embed complexity, and gives you clean code that works on any website. No developer needed.

Start building for free →