Adding a calculator to your site is a paste. Whether your plan shows it is the question
· 4 min read
Adding a calculator to your website is a paste: two lines of HTML, into the one block your site builder has for HTML. That part takes a few minutes. The part that catches people is that 2 of the 5 site builders below only show a pasted frame on certain plans, and when yours does not, you may get no warning. The calculator just fails to appear.
How do I add a calculator to my website?
The problem is the same on every site: a visitor wants to know what something will cost, or convert, or come to, and a page of text cannot work it out for them. There are four ways to fix that.
- Build one. It is yours to style, and yours to keep correct when a tax year or a rate changes.
- Install a plugin. Only where your site builder has plugins, and each one is more code running on your site.
- Paste a widget script. It can match your page, and it runs someone else’s code on it with access to everything there.
- Paste a frame. A window onto a calculator hosted elsewhere. It cannot read your page, and it cannot be restyled to match it.
The rest of this page is about the fourth, because it is the one that works the same way everywhere. This is the code for our mortgage calculator:
<iframe src="https://plainnumber.com/embed/finance/mortgage" title="Mortgage payment calculator" width="100%" height="820" loading="lazy" style="border:0;max-width:100%"></iframe>
<p>Calculator by <a href="https://plainnumber.com/finance/mortgage" target="_blank" rel="noopener">Plain Number</a></p>The first line is the calculator. The second is a credit that links back. The code for the other calculators is on the embed page.
Where does the code go?
Every site builder has one place for pasted HTML. It is named differently in each.
- WordPress: a Custom HTML block. The steps for WordPress.
- Squarespace: a Code block, set to HTML. The steps for Squarespace.
- Wix: an Embed HTML element. The steps for Wix.
- Shopify: the HTML view of a page's content. The steps for Shopify.
- Google Sites: the Insert menu: Embed, then Embed code. The steps for Google Sites.
- A page you wrote by hand: anywhere in the body. What to check.
The steps come from each builder’s own help page, which every steps page links to with the date we read it. We read them; we have not tested them on every plan. Builders move their menus, and when they do, their page is right and ours is out of date.
Will it work on my plan?
This is the question worth answering before you paste anything.
- WordPress. On a site hosted by WordPress.com, the help page says a frame needs a paid plan with hosting features activated; on other plans the code is removed when you save. A WordPress site you host yourself has the Custom HTML block as standard.
- Squarespace. Squarespace lists frames in a Code block as a premium feature, not included in its Basic plan. Its help also says code sometimes does not appear while you are logged in to edit, even though visitors can see it.
The other 3 do not tie frames to a plan in the help pages we read. Two of them, Wix and Google Sites, put pasted HTML in a box of their own, so the size of that box on your page limits the calculator as much as the height in the code does.
The sign that a plan has removed the frame is always the same: you paste the code, save, and the published page shows nothing where the calculator should be, or shows the credit line alone.
How tall should it be?
The code asks for 820 pixels. A calculator with a long table under the answer needs more than that on a phone, and one with two fields needs less. Change the number in the code. If you give it too little, the calculator scrolls inside its own box; nothing is lost.
Which calculator?
Each one has its own page with the code, a preview and where it tends to be useful:
The embed page lists all 24.
What this does not tell you
- Whether your theme leaves room for it. A narrow sidebar will squeeze any calculator. It is built for a column at least as wide as a phone.
- What your own privacy notice should say. Nothing your visitors type is collected, but our host does log the request for the frame. The privacy page says exactly what that is.
- That it will always be there. We may change a calculator, move it or stop offering embeds.
- Anything about advice. Every calculator gives an estimate and says so under the answer. It is not a quote or an offer from you or from us.