How to Embed Calculators on Your Website

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.