Embedding in a custom website or static HTML

If you're building a site with raw HTML, or using a platform we don't have a dedicated guide for (Webflow, Framer, Shopify, Ghost, etc.), the embed code works the same way: paste it into an HTML/embed block.

The pattern

Most modern site builders have an "HTML embed" / "Custom code" / "Code block" element. Drop one onto your page and paste this:

<iframe
  src="https://yourname.calcwidgets.com/embed?widgets=loan-repayment&view=tab"
  width="100%"
  height="800"
  frameborder="0"
  id="calcwidgets-frame"
  title="Mortgage Calculators"
  style="border: none;">
</iframe>
<script>
window.addEventListener('message', function(e) {
  if (e.data && e.data.type === 'calcwidgets-height') {
    document.getElementById('calcwidgets-frame').style.height = e.data.height + 'px';
  }
});
</script>

Replace yourname with your subdomain and update the widgets= and view= parameters to match what you want to show.

Platform-specific notes

Webflow

• Use the Embed element (Layout panel → Embed).
• Paste the code and click "Save & Close". Webflow won't render embeds in the canvas preview; publish to see it live.

Framer

• Use the HTML Embed component.
• Paste the code. Framer renders embeds inline so you'll see the calculator in your editor.

Shopify

• Edit the page or theme template.
• Add a Custom Liquid section (theme editor) or a Custom HTML block (page editor).
• Paste the code.

Ghost

• In the editor, add an HTML card (/html).
• Paste the code.

Plain static HTML

• Just paste the code into your .html file where you want the calculator to appear.

Embedding the URL directly (no iframe)

You can also link to your subdomain URL as a normal link or button:

<a href="https://yourname.calcwidgets.com/embed?widgets=loan-repayment&view=single">
  Try our loan repayment calculator
</a>

The visitor leaves your site for the duration but lands on a full-page calculator with your branding. Useful if your platform doesn't allow embeds.

Content Security Policy (CSP)

If your site has a strict CSP, you need to allow CalcWidgets:

frame-src https://*.calcwidgets.com;

Without this, the iframe will silently fail to load.