Add it to your website with two lines
A script that loads the calculator, and a placeholder that says where it goes. Any website that lets you add your own HTML will do.
<!doctype html><html lang="en"> <head> <title>Example Heat Pumps</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <header>…your logo and menu…</header> <main> <h1>Air source heat pumps in Leeds</h1> <p>See what a heat pump would cost for your home.</p> <!-- xenfront: the calculator appears here --> <div id="xenfront-1a2b3c4d"></div> </main> <footer>…</footer> <!-- xenfront: loads the calculator --> <script src="https://widget.xenfront.com/v1/loader.js" data-site-key="pk_live_…" async></script> </body></html>The script
Paste it once, just before </body>. It loads the calculator in the background (async), so it never holds up your page.
The placeholder
Paste it exactly where the calculator should appear: in your page content, a sidebar or its own section.
Using the Floating button style? Skip this line: the button pins itself to the corner of every page the script is on.
No website? A hosted quote page needs no code at all.
Live in about 10 minutes
- 1
Copy your two lines
In the console, open your calculator's Install tab. Both lines are there, already filled in with your own site key and ID.
- 2
Allow your website
On the same tab, add your website's address (for example yourcompany.co.uk; the www. version is included). The calculator only runs on the websites you list.
- 3
Paste them into your page
The script goes once, just before </body>. The placeholder goes exactly where you want the calculator to appear.
- 4
Publish and check
Open the page: the calculator appears within a second or two, and the console marks it Live once it's been seen on your site.
Where to paste it
Most site builders have a block for your own HTML. Paste both lines into it, in the spot where the calculator should appear.
WordPress
Add a Custom HTML block where the calculator should go, and paste both lines into it.
Squarespace
Add a Code block to the page and paste both lines into it.
Webflow
Drag an Embed element onto the page and paste both lines into it.
Hand-built or other
Anywhere you can add HTML to the page itself. Both lines can sit together, as long as they're where the calculator should appear.
Some builders put custom code in a separate frame on another address. The calculator won't run there, because it checks it's on your website.
If yours does this, use the hosted quote page instead, or ask us.
The small print
Change it once, updated everywhere
Any change to your calculator's branding, look and feel, words or prices in the console shows on your website straight away. You never need to touch the code again.
Won't slow your page
The script loads in the background after your page, and the calculator only fetches what it needs as the homeowner goes.
Won't clash with your styles
The calculator draws itself in its own sealed-off area of the page (a shadow root), so your CSS can't break it and its styles can't leak into your site.
Only on your websites
The site key in the script is public, like any embed code. It only works on the websites you allow, so it's safe in your page's HTML.
Not showing?
You'll see an “ASHP Estimate Not Enabled” card instead. Open your browser's developer console for a message starting [xenfront]: usually the website isn't in your allowed list yet, or your plan doesn't cover this calculator.
Using a Content Security Policy? Allow scripts from widget.xenfront.com, connections to api.xenfront.com, inline styles, and fonts from fonts.googleapis.com and fonts.gstatic.com.