How to Add a Calculator to Your Website
A step-by-step guide for people who don’t write code. If you can copy and paste, you can do this — it usually takes about five minutes.
What you’re actually doing
If you have ever put a YouTube video on a page, you have already done this exact thing before.
You copy two short lines of text from us. You paste them into your page where you want the calculator to sit. You press Save. The calculator then appears on your live website, and it keeps working by itself — there is nothing to install, nothing to update, and nothing to maintain.
You do not need to understand the two lines, and you should never need to change them. Copy them exactly as they are.
What you need before you start
Only two things:
- A website you can log in to and edit.
- The ability to add a “Custom HTML” or “Code” block to a page. Most website builders have this. If yours doesn’t, there’s a note further down about why.
It’s free. There is no account to create, no payment, and no limit on how many people use it. The only thing we ask is that you leave the small “powered by yootils” credit visible underneath the calculator.
The three steps
This is the whole process. Everything after this section is just extra help.
Copy the code for the calculator you want
Go to the widget directory and find the calculator you’d like. Under each one is a grey box with a short piece of code in it, and a Copy button. Press Copy.
Here is what a typical one looks like — this example is the mortgage calculator:
Don’t worry about what any of it means. You just need it on your clipboard.
Paste it into your page
Open the page you want the calculator to appear on, and add a Custom HTML block (some website builders call it a Code block or Embed block) at the spot where you want it. Paste what you copied into that block.
The exact menu wording is different on every platform, so there are step-by-step instructions for the common ones in the next section.
The one thing to get right: it must go into a Custom HTML or Code block, not an ordinary text box. If you paste it into a normal text box, your visitors will just see the code written out as words instead of a working calculator.
Save, then look at the live page
Press Save, Update or Publish — whichever your site uses. Then visit the page as a normal visitor would.
The calculator should be sitting there, ready to use. Try typing a number into it to check it works. That’s the job done.
Editing screens often show an empty box or a grey placeholder where the calculator will be. That’s normal — it only appears properly on the real, saved page.
Where to paste it on your website
Find your website builder below. Menu names do get changed by these companies from time to time, so if the wording doesn’t match exactly, look for anything containing the words HTML, Code or Embed.
WordPress
- Edit the page or post.
- Click the + button to add a block.
- Search for Custom HTML and choose it.
- Paste the code into the box.
- Click Update.
Using the older “Classic” editor? Switch from the Visual tab to the Text tab first, then paste.
Wix
- Click Add Elements (the + on the left).
- Choose Embed Code, then Embed HTML.
- A box appears on your page — drag it where you want it.
- Click Enter Code and paste.
- Click Update, then Publish.
Drag the box a little taller than you think you need. Wix doesn’t resize embed boxes on its own, so a box that’s too short will cut the calculator off.
Squarespace
- Edit the page and click an insert point (+).
- Choose the Code block.
- Delete whatever sample text is already in it.
- Paste your code in.
- Click Apply, then Save.
If the Code block is missing or greyed out, it’s almost always because your Squarespace plan doesn’t include it.
Shopify
- Go to Online Store → Pages.
- Open the page you want to edit.
- In the content editor toolbar, click the < > button to show the HTML.
- Paste your code where you want the calculator.
- Click Save.
The < > button is usually at the right-hand end of the toolbar above the text box.
GoDaddy, Weebly, Webflow and others
- Edit your page.
- Look through the list of things you can add for one called HTML, Embed, Custom Code or Code.
- Drag it onto the page where you want the calculator.
- Paste your code into it.
- Save and publish.
Nearly every website builder has one of these, even if it’s tucked away under “Advanced” or “More”.
A hand-built website
- Open the page’s
.htmlfile in your editor. - Paste the first line exactly where you want the calculator to appear.
- Paste the second line just before the closing
</body>tag. - Save and upload the file.
Both lines can also sit together in the same spot — it works either way.
What the two lines actually do
You don’t need to read this to use the calculator. It’s here in case you like knowing what you’ve pasted onto your own website — which is a fair thing to want.
The first line marks the spot
Think of it as an X on the page saying “put the mortgage calculator here”. On its own it does nothing at all and shows nothing. It just reserves the space and names which calculator you want.
The second line goes and fetches it
This one tells your visitor’s web browser to come to yootils and collect the calculator. It arrives, finds the X, and puts the calculator there.
Because of this, the calculator is never really stored on your website — it’s delivered fresh each time somebody visits. That’s the reason you never have to update it. When we improve a calculator or correct a rate, your copy changes at the same time, without you doing anything.
Adding several calculators to one page? Each one needs its own first line. The second line only needs to be there once. Pasting it more than once won’t break anything, so don’t worry if you do.
Changing how it looks
The calculator is designed to fit in quietly with most websites, so you can happily skip this section. But if you’d like to adjust it, you can add a setting to the first line.
Light and dark look after themselves. By default the calculator matches whatever your visitor’s device is set to — light on a light phone, dark on a dark one. You only need the theme setting below if you want to override that, which is worth doing if your page is always one or the other.
To use one, type a space before the closing > of the first line, then the setting. For example, to show dollars instead of pounds:
| To do this | Add this | Notes |
|---|---|---|
| Change the currency | data-currency="USD" |
Also accepts GBP, EUR, JPY, CAD and AUD. Pounds are used if you don’t say. |
| Always use the dark version | data-theme="dark" |
Light text on a dark background, for everyone. |
| Always use the light version | data-theme="light" |
Stops the calculator going dark for visitors whose device is set to dark mode. Use this if your page is always light. |
| Make it more compact | data-layout="compact" |
Tightens the spacing. Handy in a narrow sidebar. |
You can use more than one at a time — just put a space between them. If you mistype a setting, the calculator quietly ignores it and carries on working normally, so there’s no harm in experimenting.
If something doesn’t look right
Nearly every problem is one of these five, and all of them are quick to fix.
Nothing appeared at all
Check these in order:
- Did you press Save or Publish? Changes don’t go live until you do.
- Are you looking at the live page, rather than the editing screen? Editors often show a blank box instead.
- Did it go into a Custom HTML or Code block, rather than a normal text box?
I can see the code as written-out text
Your visitors are seeing <div class=... as words on the page.
This means it landed in an ordinary text box, which treats everything as writing. Delete it, add a proper Custom HTML or Code block instead, and paste it in there.
There’s no Custom HTML option anywhere
Free plans on Wix, Squarespace and WordPress.com usually block custom code — it’s a paid feature.
If that’s the case, there is unfortunately no way around it from our end. Upgrading the plan is the only fix. In the meantime, you’re very welcome to link to the calculator on our site instead.
It’s cut off at the bottom
This is nearly always Wix, or another builder that puts embedded content into a fixed-height box.
Drag the bottom edge of the box downwards to make it taller until the whole calculator fits.
It looks squashed or too narrow
The calculator fills whatever space you give it, so a narrow sidebar makes for a narrow calculator.
Either move it into the main body of the page, or add data-layout="compact" to the first line to tighten it up.
Still stuck?
Get in touch and tell us which website builder you use and what you’re seeing. A screenshot helps enormously.
We’d genuinely rather hear from you than have you give up on it.
The one thing we ask
Underneath every calculator is a small line of grey text reading “powered by yootils”, next to a link through to the full version of that tool.
Please leave both of them visible. That credit is the entire price of the widgets — it’s how people find us, and it’s what lets us keep them free for everyone, on commercial websites included. Hiding or removing it isn’t permitted under our terms.
Beyond that, do what you like with them. Put them on as many pages as you want, on as many websites as you want.
Common questions
Do I need to know how to code?
No. You copy two short lines and paste them in, the same way you’d paste in a YouTube video. You never edit the code, and there’s nothing to install.
How much does it cost?
Nothing, on any website, including business ones. No sign-up, no account, no limit on visitors. Just leave the yootils credit visible.
Will it slow my website down?
No. The calculator loads after the rest of your page has finished, so nobody waits for it. There are no images, no fonts and no tracking cookies involved.
Can I have several on one page?
As many as you like. Each needs its own first line; the second line only needs to appear once, though repeating it does no harm.
Do I have to keep it updated?
No. The calculator is delivered fresh from us each time somebody visits, so improvements and corrections reach your page automatically.
Will it work on phones?
Yes. Every calculator adjusts itself to the space available, so it works on phones and tablets as well as desktop computers.
Does it track my visitors?
No. The calculators set no cookies, store nothing on your site and send no data anywhere. What people type stays in their own browser. The full details are here.
Is it accessible?
Yes. The calculators can be used entirely by keyboard, are labelled so screen readers can read them, show a clear outline on whatever you’ve selected, and tone down animation for anyone who’s asked their device to reduce it.