How to Embed a Mathify Calculator on Your Website

Short answer: pick a calculator on the Mathify embed generator, copy the iframe snippet it produces, and paste it into your page's HTML. The widget loads from an address of the form https://mathify.one/embed/category/calculator. Only calculators registered for embedding work this way. Others show a short "not available" message with a link to the full page.

What does an embedded calculator give my readers?

A reader on your page can type numbers and see the result without leaving. That suits a blog post about mortgages, a school page about percentages, or a shop page that explains discounts. You keep the explanation and context. The widget handles the arithmetic.

The embed generator describes the widgets as responsive and free to add with a copy-and-paste snippet. Read Mathify's terms page for the conditions that apply to your use.

How do I embed one?

1. Open the embed generator.
2. Choose a calculator from the list. The default is the percentage calculator.
3. Choose a theme (light or dark), a width and a height. The defaults are a width of 100 percent and a height of 540 pixels.
4. Check the live preview in the generator.
5. Copy the snippet and paste it where you want the calculator to appear in your page's HTML.
6. Publish and test on desktop and on a phone.

If your site editor does not allow raw HTML, look for a custom HTML or embed block. Some hosted site builders restrict iframes on certain plans.

What does the snippet look like?

The address pattern is https://mathify.one/embed/ followed by the calculator's category and name. For the percentage calculator, a minimal version looks like this:

<iframe src="https://mathify.one/embed/math/percentage" width="100%" height="540" title="Percentage Calculator Widget - Powered by Mathify" style="border: 0; border-radius: 12px; overflow: hidden; width: 100%; min-height: 540px;" loading="lazy"></iframe>

The generator's own snippet also appends a small "Powered by" line under the iframe that links to the full calculator page, and adds a theme setting to the address. Keep the attribution line. It tells readers where the calculator comes from and gives them a way to open the full version.

A few attributes are worth keeping:

• title gives screen-reader users a name for the frame.
• loading="lazy" delays loading until the reader scrolls near it, which helps page speed if the calculator sits low on the page.
• min-height stops the content from being cut off. If the calculator has more fields than the height allows, increase the number.

Which calculators can be embedded?

Not all of them. Embedding works for the calculators listed in an embed registry, which includes popular ones such as the Percentage Calculator, Compound Interest Calculator, Loan Calculator, Mortgage Calculator, Age Calculator and Tip Calculator. The registry covers a selection of finance, investment, math, health, conversion and date calculators and may expand. We do not quote a total, because it changes.

The generator's dropdown lists calculators from Mathify's wider catalogue. If you pick one that is not registered, the preview and your live page will show a message that the widget is not available and, where the calculator exists, a link to open the full calculator instead. Check the preview before you paste.

Worked example: add a discount helper to a shop guide

Suppose you run a guide called "How to work out a sale price" and want readers to try numbers.

1. Embed the Percentage Calculator with the snippet above and a height of 540.
2. Under it, write the worked example in plain text: 15 percent of 850 is (15 divided by 100) times 850, which is 127.5, so the sale price is 850 minus 127.5, or 722.5.
3. After publishing, open your page and enter 15 and 850 in the mode for a percentage of a number. You should see 127.5. If you do, the widget has loaded correctly.

We confirmed the 127.5 with the repository's percentage function. The sale price follows from simple subtraction.

What should I check on my own site?

• Frame restrictions. If your site sends a Content Security Policy, it must allow mathify.one as a frame source. Otherwise the browser will block the widget and show an empty box.
• Mobile layout. Test on a small screen. A fixed height that is fine on desktop can clip a taller form on a phone.
• Privacy notice. Your visitors' browsers will load content from mathify.one, so mention the embed if your site lists third-party content.
• Placement. Put the widget near the text that explains it. A calculator with no context is less useful to a reader.

How does embedding work on the Mathify side?

Mathify allows framing only for embed addresses. Its normal pages send a header that stops other sites from framing them, while the embed routes leave that header out so third-party pages can show the widget. The embed pages are marked so that search engines do not index them, which stops them competing as duplicate copies of the main calculator pages. The widget footer links back to the full calculator, opening in a new tab.

Standard calculations in the widget run in the visitor's browser. The embed does not provide an API key or a way to send results back to your server. If you need results in your own code, see the REST API guide.

Common mistakes

• Using the wrong address. The widget lives under /embed/, not the normal calculator address. The normal page will refuse to load inside a frame.
• Setting the height too small. Content gets clipped with scrollbars inside the frame.
• Removing the title attribute. That hurts accessibility.
• Embedding a calculator that is not registered. Check the preview first.
• Assuming the widget fits your colours. You choose light or dark, but you cannot restyle the contents from the outside.

Key takeaways

• Use the embed generator and paste the iframe snippet.
• The address format is https://mathify.one/embed/category/calculator.
• Only registered calculators work, and the preview tells you right away.
• Keep the attribution line, a descriptive title and a height that fits.

FAQ

Is embedding free?

The embed page describes the widgets as free to add. Check the terms page for the conditions.

Will an embedded calculator hurt my page speed?

It loads a separate page inside your page. Lazy loading helps if the widget is below the fold. Measure on your own site.

Can I change the calculator's colours or text?

You can pick a light or dark theme in the generator. The inside of the frame cannot be restyled from your page.

Does the widget work in other languages?

The widget picks its language from the request. Test with your own audience's settings, since we do not list which languages each embedded calculator supports.

Can I read the result from my own page?

No. The iframe is a self-contained display. For results in code, use the API.

Calculators give estimates for general information. They are not financial or professional advice.