Embedding a calculator

One script tag, one div, no iframe.

The snippet

<div data-exactcalcs-widget="mortgage" data-api-key="YOUR_API_KEY"></div>
<script src="https://exactcalcs.com/exactcalcs-widget.js" async></script>

The script tag only needs to appear once per page, no matter how many calculators you embed — it finds every [data-exactcalcs-widget] element on the page and mounts into each one. The calculator renders inside a shadow root, so its styles can't leak onto your page and your page's styles can't leak into it.

Picking a calculator

data-exactcalcs-widget takes any calculator ID from GET /v1/calculators — bmi, mortgage, breast-cancer-risk, and 46 others.

What happens on load

The widget calls POST /v1/widget/verify with your API key, the page's own domain, and the calculator ID. If that's allowed, it renders the calculator — themed and field-configured however you set it up in the dashboard, and pre-filled from your webhook if you've configured one. If it's not allowed (invalid key, unregistered domain, quota exceeded, expired trial), it renders a small "Calculator Offline" message instead of the calculator — see Errors for what each reason means.

Theming

Pick a theme, chart style, and which fields are visible from the "Widget Customizer" panel of your dashboard — it's saved per calculator against your API key, so the embed itself never needs any of that configuration in its markup.