You can add a free graphing calculator to a class page, a blog post or a course site without an account or an API key. Your readers plot functions, inequalities, polar and parametric curves inside your page, and with one small change to the code the calculator opens showing the graph you are teaching. We tested every step below on a real page before writing it up.
On this page
The code to paste
This is the code the WideMath widget gallery gives you for the graphing calculator, unchanged:
<iframe src="https://widemath.com/embed/graphing-calculator/" title="Graphing Calculator by WideMath" width="100%" height="600" style="border:0;max-width:1100px" loading="lazy" allow="clipboard-write; fullscreen"></iframe>
<p style="margin:6px 0 0;font:14px/1.4 sans-serif"><a href="https://widemath.com/graphing-calculator/">Graphing Calculator</a> by WideMath</p>Paste it wherever your site accepts raw HTML, publish, and the calculator appears where you pasted it. The first line is an iframe that loads the tool from widemath.com/embed/graphing-calculator/, a page built for frames: the calculator alone, with no menus, articles or ads. The second line is a credit link to the full graphing calculator. Please keep it: the widget is free, and that link is how readers find the full tool.
The graphing calculator widget page shows a live preview and lets you change the height and width before you copy the code.
What your readers get
The widget is the same graphing calculator that runs on WideMath, so readers can:
- Plot
y = f(x), implicit curves such asx^2 + y^2 = 25, shaded inequalities, and polar and parametric graphs. - Click any curve to see its roots, turning points and intersections.
- Drag to pan, scroll or pinch to zoom, switch between radians and degrees, and download the graph as a PNG.
It runs in the reader's own browser, and because the frame always loads the current version, every fix we make reaches your page without you changing anything.
Open it with your own graph already drawn
A blank calculator suits a general resources page. For a lesson, you usually want the graph you are talking about to be there when the page opens. The calculator's Share link does this, and the embed address accepts the same link code.
- Open the graphing calculator on WideMath and type your equations, one per line. If the lesson uses trigonometry in degrees, press DEG.
- Press Share. A link is copied to your clipboard. It ends in
#e=followed by a long code. - In the embed code, paste everything from
#e=onwards straight after/embed/graphing-calculator/, inside the quotes ofsrc="...". - Paste the edited code into your page and publish.
Here is a worked example. We graphed the parabola y = x^2 - 4x + 3 and the line y = x - 1, which cross at x = 1 and x = 4. Share gave this link:
https://widemath.com/graphing-calculator/#e=eyJ2IjoxLCJlIjpbInkgPSB4XjIgLSA0eCArIDMiLCJ5ID0geCAtIDEiXSwiZCI6MH0So the embed code becomes:
<iframe src="https://widemath.com/embed/graphing-calculator/#e=eyJ2IjoxLCJlIjpbInkgPSB4XjIgLSA0eCArIDMiLCJ5ID0geCAtIDEiXSwiZCI6MH0" title="Graphing Calculator by WideMath" width="100%" height="600" style="border:0;max-width:1100px" loading="lazy" allow="clipboard-write; fullscreen"></iframe>
<p style="margin:6px 0 0;font:14px/1.4 sans-serif"><a href="https://widemath.com/graphing-calculator/">Graphing Calculator</a> by WideMath</p>We placed exactly this code on a page on another website, and the calculator opened with both lines plotted.
Three things to know about the link code:
- It stores your equations and the RAD or DEG setting, not the zoom. The graph opens at the standard view, so choose examples whose interesting part sits near the origin, or ask readers to zoom out.
- Readers can change everything. They can edit your lines, add their own and zoom. Their changes stay in their own browser tab. The next visitor, or the same one after a reload, sees your original graph again.
- One graph per frame. To show two different graphs, paste the code twice with two different
#e=codes.
The same trick for 3D graphs
The 3D graphing calculator works the same way. Its Share link also ends in #e=, and for 3D the code keeps the viewing box (the x, y and z ranges) as well as the equations. We tested z = x^2 - y^2, the saddle shape, on the x and y range from -3 to 3, and the embedded copy opened with it drawn. Get the starting code from the 3D graphing calculator widget page; its default size is the same as the 2D one.
Frame sizes that work
The code sets the width to 100% with a maximum of 1100 px, so the frame shrinks on a phone and stops growing on a wide screen. Only the height is fixed, because a page cannot measure the content of a frame that comes from another website. We measured how much height the graphing calculator needs at different frame widths:
| Frame width | Layout | Height that shows everything |
|---|---|---|
| Wider than about 860 px | Equation list on the left, graph on the right | 600 px (the default) |
| About 480 to 860 px, a typical blog column | Graph on top, list underneath | About 750 px |
| About 375 px, a phone | Graph on top, list underneath | About 850 px |
With a smaller height nothing breaks: readers scroll inside the frame to reach the list. If most of your readers are on phones, try a height of 850. The trade-off is some empty space under the tool on a laptop. In the stacked layout, each extra equation line adds roughly 50 px.
To centre the frame in a wide column, add display:block;margin:0 auto to its style attribute.
Where to paste it on your platform
- Google Sites: embed a calculator in Google Sites.
- WordPress: add a calculator to WordPress, including the WordPress.com plan rules.
- Canvas and Moodle: embed a calculator in Canvas or Moodle.
- Blogger, Wix, Squarespace and Notion: the complete guide to adding a calculator to your website.
Questions people ask
Is there a free graphing calculator I can embed on my website?
Yes. The WideMath graphing calculator widget is free for schools, personal sites and business sites, with no account, no API key and no usage limit. We only ask that you keep the short credit line and its link under the frame.
Can the embedded graphing calculator open with my own equations?
Yes. Plot your equations on the full graphing calculator, press Share, and copy the part of the link that starts with #e=. Add it straight after /embed/graphing-calculator/ in the iframe address, and the widget opens with your graph.
Does the share link save the zoom level?
For the 2D graphing calculator, no: it saves the equations and the RAD or DEG setting, and the graph opens at the standard view. For the 3D graphing calculator, yes: the link also keeps the x, y and z ranges.
Can students change the graph inside the embed?
Yes. They can edit the lines, add their own and zoom. Their changes stay in their own browser tab, so the next visitor, or the same student after a reload, sees your original graph.
Does the embedded graphing calculator work on phones?
Yes. On a narrow screen the graph sits on top and the equation list moves underneath. The default height of 600 px still works, with a scroll inside the frame. A height of about 850 px shows everything on a phone.
Are there ads inside the graphing calculator widget?
No. The embedded version shows only the calculator and a small bar with its name and a link to the full page. The ads that pay for WideMath appear on widemath.com itself, never inside the widgets.