Add a calculator to Wix
Wix keeps custom code inside a dedicated element rather than letting it sit in the page text, so the calculator goes into an Embed. It behaves like any other element once placed: drag it, resize it, set which pages it appears on.
Step by step
- 1
Copy the snippet
Choose a widget and set the colour and theme first, so the code you copy already matches your site.
- 2
Add an Embed element
In the editor, click Add Elements, then Embed Code, then Embed HTML. A box appears on the page with a Enter Code button.
- 3
Paste the code
Click Enter Code, choose the Code option rather than Website address, and paste the snippet. Click Update.
- 4
Size the box to the calculator
This is the step people miss. A Wix embed is a fixed-size frame and does not grow with what is inside it, so drag the handles until the whole calculator is visible with a little room to spare. Check it on mobile in the editor, where the frame needs to be taller.
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 Wix.
When it goes wrong
The calculator is cut off at the bottom
The embed frame is too short. Wix does not resize it automatically. Drag the bottom handle down until everything fits, then switch to the mobile view and do the same again, because mobile keeps its own size.
Nothing shows in the editor
Wix often does not run embedded code inside the editor. Use Preview, or publish and check the live page.
Can I use this on a free Wix plan?
The Embed HTML element needs a paid Wix plan. On a free site, link to the calculator instead.