How to add a calculator to your website: every route, and the fastest one

You run a class site, a blog or a business website, and your readers need to calculate something: a quadratic, a standard deviation, a dilution, a subnet. You could send them to another site, but they may not come back. Putting the calculator on your own page keeps them where your explanation is. We build the free WideMath calculators, and we wrote this guide to cover every route, including the ones that do not involve us.

Four ways to add a calculator

Embedding means pasting a small piece of code that shows someone else's calculator in a frame on your page. Copy-paste code means HTML and JavaScript from a tutorial that you host yourself; it is quick to paste and slow to trust, because you now own every bug in it. Plugins and apps (WordPress plugins, Wix apps) suit calculators built around your own numbers. Building your own gives full control and costs the most time.

Why an embed is usually the fastest

• Nothing is installed. There is no plugin to update and no script added to your other pages.
• It works almost everywhere. Any platform that accepts HTML can show a frame.
• Fixes arrive by themselves. The frame always loads the current version, so when the provider fixes a bug, your page gets the fix.
• It is isolated. A frame from another site cannot read or change your page, and your page's styles cannot break it.

The trade-offs are real. You depend on the provider staying online, you cannot restyle what is inside the frame, and the frame has a fixed height that you set. For a standard calculator those costs are small. For a calculator that must match your brand exactly or use your own formula, a plugin or your own code is the better route.

The embed code, line by line

This is the code for the WideMath Scientific Calculator, exactly as the calculator widget gallery hands it out. Every one of our 24 widgets uses the same pattern.

<iframe src="https://widemath.com/embed/scientific-calculator/" title="Scientific Calculator by WideMath" width="100%" height="760" style="border:0;max-width:460px" loading="lazy" allow="clipboard-write; fullscreen"></iframe>
<p style="margin:6px 0 0;font:14px/1.4 sans-serif"><a href="https://widemath.com/scientific-calculator/">Scientific Calculator</a> by WideMath</p>

• <iframe src="https://widemath.com/embed/scientific-calculator/" loads the calculator from a page built for frames: the tool alone, with no menus, no articles and no ads. The full tool pages refuse to load inside frames on other sites, so the address must contain /embed/.
• title="Scientific Calculator by WideMath" is the frame's name for screen readers. Keep it.
• width="100%" lets the frame fill your content column.
• height="760" is the height in pixels. A page cannot measure the content of a frame from another site, so you set it.
• style="border:0;max-width:460px" removes the default border and stops the frame growing wider than the tool needs.
• loading="lazy" tells the browser not to load the frame until the reader scrolls near it.
• allow="clipboard-write; fullscreen" lets the tool copy results to the clipboard, such as the graphing calculator's share link, and go full screen where it offers that.
• The <p> line is the credit: a normal link to the full tool with the words "by WideMath". It uses your page's own link colour. Please keep it. The widgets are free, and that link is how readers find the full tools and how we keep building them.

Sizing, and how it looks on phones

Because the width is 100% with a maximum, the frame shrinks on a phone and stops at a sensible width on a laptop. Only the height needs thought. These are the defaults for some popular widgets; the calculator widget gallery lists all 24, and each widget has its own page with a live preview and a size picker.

• Something is cut off at the bottom: raise the height by 50 to 100 px.
• Empty space under the tool: lower the height, but leave room for results, which make some tools grow.
• Phones: wide tools stack their panels on narrow screens. The graphing calculator, for example, needs about 750 px in a typical blog column and about 850 px on a phone. Check your page on a phone after publishing.
• Centring: add display:block;margin:0 auto to the iframe's style.

Speed

A frame loads as its own document, separate from your page's HTML. With loading="lazy", which current versions of the major browsers support for iframes (see MDN's iframe reference), a calculator further down the page costs almost nothing until the reader scrolls near it. Two habits keep pages fast: place the calculator after your opening text rather than at the very top, and use one or two widgets per page rather than ten.

Accessibility

The title attribute is what a screen reader announces when it reaches the frame; the W3C describes this as technique H64 for WCAG. Keep it, and add one sentence above the frame saying what the calculator is for. The credit link and the "Open on WideMath" link inside the widget's top bar give readers who zoom or use magnifiers a way to open the full page in its own tab.

Privacy and ads

The calculations run in your reader's browser. We count how often widgets load with Google Analytics, as described in our privacy policy. WideMath shows Google AdSense ads on widemath.com itself, which pay for the free tools, but the embedded widgets carry no ads. If your own privacy notice lists third-party services, add WideMath to it.

Steps for each platform

First press Copy code on a calculator in the widget gallery. Then:

Google Sites

1. Click Insert, then Embed, then the Embed code tab.
2. Paste, click Next, then Insert, resize the box and Publish.

Source: Google Sites help. Full guide: embed a calculator in Google Sites.

WordPress (self-hosted)

1. Add a Custom HTML block (type /html), click Edit HTML on WordPress 7.0 or later, paste and click Update.
2. In the classic editor, paste into the Text tab.

Only Administrators and Editors (Super Admins on Multisite) can save iframes. Source: WordPress.org documentation. Full guide: add a calculator to WordPress.

WordPress.com

Same Custom HTML block, but iframes need a paid plan with hosting features activated; the Free plan removes them. Source: WordPress.com support.

Canvas

In the Rich Content Editor, click the HTML Editor icon, paste and Save. Canvas keeps every attribute the code uses. Source: Canvas Instructor Guide. Full guide: embed a calculator in Canvas or Moodle.

Moodle

Add a Page or a Text and media area, open View source code in the editor, paste and save. Moodle strips iframes in forums, wikis and other activities every student can post in, and an administrator's settings can strip them elsewhere. Source: MoodleDocs.

Blogger

In the post editor, click HTML at the top left, paste the code where the calculator should go, and publish. Source: Blogger help.

Wix

In the Wix Editor, click Add Elements, Embed Code, Popular Embeds, then Embed HTML. Click Enter Code, paste and click Apply, then drag the element to size. In Wix Studio the path is Add Elements, Embed & Social, Embed Code. Sources: Wix Editor help, Wix Studio help.

Squarespace

Edit the page, click Add block and choose Code. Paste, make sure the mode is HTML and Display Source is off. Squarespace's help says iframes in code blocks need the Core, Plus or Advanced plan, and code sometimes does not show while you are logged in; check with Preview in Safe Mode. Source: Squarespace help.

Notion

Notion takes a web address, not HTML. Type /embed, paste only the address from inside src="...", for example https://widemath.com/embed/scientific-calculator/, and resize by dragging the bars at the sides. Notion drops the credit line, so add a normal link to the tool under the embed. Source: Notion help.

Teachers choosing between subjects can start with free calculator widgets for teachers.

Opening a ready-made problem

The graphing calculators can open with your own equations. Press Share on the full tool, then add the part of the link that starts with #e= to the end of the embed address. Readers see your graph first and can change it. The steps and a tested example are in how to embed a graphing calculator.

If you decide to build your own

• Use a maths library, not eval. Libraries such as math.js parse expressions safely and handle precedence for you.
• Plan for floating point. Computers store most decimals approximately, which is why naive code prints 0.1 + 0.2 = 0.30000000000000004.
• Test the edge cases. In degree mode, sin(180) must be exactly 0 and tan(90) must be an error. Our six tests that expose a broken calculator take 30 seconds to run on yours.

If that list sounds like more than you want to maintain, the scientific calculator widget has already been through those tests.

Questions people ask