Add a calculator to WordPress
WordPress needs no plugin for this. A calculator widget is one script tag and one div, and the block editor has a block built for exactly that. Nothing is installed on your server, so there is no plugin to keep updated and nothing new to go wrong when WordPress updates.
Step by step
- 1
Copy the snippet
Pick a widget, set the colour and theme to match your site, and copy the code. It is two lines: a div where the calculator appears, and a script tag that fills it.
- 2
Add a Custom HTML block
Edit the page or post, click the plus button where the calculator should sit, and search for Custom HTML. It is under Formatting. Paste the snippet straight into the block.
- 3
Preview rather than trusting the editor
The block editor shows the raw code rather than the calculator. Use Preview, or just publish and look at the page. That is normal and does not mean the snippet is wrong.
- 4
Using the Classic editor instead
Switch from Visual to Text using the tab at the top right of the editor, then paste the snippet where you want it. Do not switch back to Visual before saving, because the Visual editor can strip script tags.
- 5
Using Elementor, Divi or another builder
Every builder has an HTML widget: in Elementor it is called HTML, in Divi it is Code. Drag it into the layout and paste the snippet in. The calculator sizes itself to the column it lands in.
What you are pasting
Every widget is the same two lines. A div marking the spot, and a script that fills it. The builder on each widget page writes the attributes for you.
<div class="cc-mortgage-calculator"
data-theme="light"
data-accent="#0e7490"></div>
<script src="https://calculatorcastle.com/embed/mortgage.js" async></script>The class decides which calculator appears. The data attributes are optional, and anything you leave out falls back to a sensible default. Change data-accent to your brand colour and the calculator picks it up for buttons, highlights and the result panel.
Speed, and what it does to your SEO
The script is around 12 KB, roughly 4.5 KB compressed over the wire, and it loads with the async attribute so it never blocks the page from rendering. There are no libraries behind it, no web fonts and no images, which is why it stays that small.
It will not move your Core Web Vitals in a way you can measure. The calculator renders into a div that already occupies its space, so nothing shifts on the page as it arrives and your Cumulative Layout Shift is untouched. Because the script is async, Largest Contentful Paint is decided by your own content rather than by the widget.
For search, a calculator is the kind of thing that keeps someone on the page and gives them a reason to come back, which is worth more than the small amount of script it costs. The calculator itself is not indexed as your content, since it renders in a shadow root, so it will not compete with your writing or create duplicate text.
Pick a calculator
Each has a builder for the colours and options, and gives you the snippet to paste into WordPress.
When it goes wrong
The calculator does not appear after I publish
Almost always a security plugin or a caching plugin. Wordfence and similar can strip script tags from post content, and a cache may still be serving the old version of the page. Clear the cache first, and if it still does not show, use the standalone version of the snippet, which carries its code inside itself.
It works for me but not for a logged-out visitor
That is caching. Purge the page cache after you publish, and if you use Cloudflare, purge there too.
WordPress.com keeps removing the code
Free and Personal plans on WordPress.com do not allow custom scripts. Business plans do. On a plan that blocks them, link to the calculator instead of embedding it.
Do I need a plugin like WP Calculator Builder?
No. Those plugins exist to let you build a calculator from scratch, which is a different job. If the calculation you need already exists as a widget, a Custom HTML block does it with nothing installed.