Setting up the floating widget

The floating widget is a small button anchored to the bottom-right of every page on your site. When a visitor clicks it, your calculator opens in an overlay. It's the easiest way to put a calculator on every page without redesigning any of them.

When to use it

• You want calculators available on every page but don't want to redesign any of your existing pages.
• You'd rather not embed the calculator inline on certain pages but still want it accessible.
• You're testing whether visitors actually use the calculator before committing to a fuller integration.

The embed code

Paste this once, in your site footer or global template:

<script>
(function() {
  var iframe = document.createElement('iframe');
  iframe.src = 'https://yourname.calcwidgets.com/embed?widgets=loan-repayment&view=floating';
  iframe.style.cssText = 'position:fixed;bottom:0;right:0;width:100%;height:100%;border:0;z-index:9999;pointer-events:none;background:transparent;';
  iframe.id = 'calcwidgets-float';
  document.body.appendChild(iframe);
})();
</script>

Replace yourname with your subdomain and loan-repayment with whichever calculator you want.

Multiple calculators in the floating widget

Pass a comma-separated list in widgets= and the floating widget will show tabs (for ≤5 calculators) or a dropdown (6+):

?widgets=loan-repayment,stamp-duty,lmi&view=floating

Platform-specific instructions

WordPress (easiest: WPCode plugin)

1. Install WPCode plugin (free)
2. Code Snippets → Add Snippet → "Add Your Custom Code"
3. Paste the floating widget code, set location to Site Wide Footer, save and activate

Wix

Settings → Custom Code (requires Wix Premium) → Add Custom Code → paste the floating widget code → placement: Body - end, apply to All pages

Squarespace

Settings → Advanced → Code Injection → paste the floating widget code into the Footer section → save

Custom HTML / other

Paste the code into your site footer template or just before </body> in any layout that's used site-wide.

Why the iframe is full-screen

You'll notice the iframe is sized to fill the whole viewport with pointer-events: none. That's intentional — it lets the floating button and the overlay panel be positioned correctly without you having to predict screen sizes. Clicks only register on the button and overlay; the rest of the iframe passes clicks through to your underlying page.