Two Ways to Embed

CalcWidgets provides two embedding methods. Both are available in your Dashboard under Embed Codes.

Option 1: iframe Embed (Recommended)

The simplest method. Copy the iframe code and paste it into your website's HTML.

<iframe
  src="https://yoursubdomain.calcwidgets.com/embed?widgets=loan-repayment"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

Pros:

Works on any website platform
Fully isolated from your site's CSS
No JavaScript required

Option 2: JavaScript Snippet

For more control over the integration, use the JavaScript embed code.

<div id="calcwidgets-container"></div>
<script src="https://yoursubdomain.calcwidgets.com/embed.js"></script>

Pros:

Better responsive behaviour
Can interact with your page

Choosing Which Calculators to Show

Use the widgets parameter to specify calculators:

Single calculator: ?widgets=loan-repayment
Multiple calculators: ?widgets=loan-repayment,stamp-duty,borrowing-capacity

Display Modes

Control how multiple calculators are displayed using the view parameter:

?view=tab — Tabbed interface (default)
?view=stack — Stacked vertically
?view=single — One calculator at a time

Theme Options

Set light or dark theme with the theme parameter:

?theme=light (default)
?theme=dark

Responsive Design

All calculators are mobile-responsive by default. For the best experience on mobile, ensure your iframe has width="100%" and an appropriate height.

How to Embed Calculators on Your Website