Is embedding the free body diagram maker free?

Yes. It is free to embed on any site, with no account, no API key and no usage limits. The whole tool runs in your visitor’s own browser, so there is no server cost — we only ask that you keep the small "Free Body Diagram Maker by LK Forge" credit line that comes with the embed code.

What can visitors do with the embedded tool?

They can load a standard scenario — a block on the ground, a block on a frictionless incline, a sign hanging from two ropes, a box pushed at constant velocity, or an accelerating elevator — or add their own force arrows. Dragging an arrowhead changes a force’s size and direction; a selected force can also be tuned with magnitude and direction sliders. A live panel shows ΣFx, ΣFy, the resultant net force and its direction, whether the body is in equilibrium, and the acceleration a = Fnet/m.

Does the embed teach net force and equilibrium?

Yes — that is its whole purpose. Every force is drawn as a coloured arrow and the net force appears as a dashed white arrow, so students see the vector sum, not just numbers. Balance the arrows and the resultant vanishes and the equilibrium flag reads yes; unbalance them and the net force points the way the body accelerates, with a = Fnet/m shown directly.

What iframe height should I use, especially on mobile?

The snippet ships with height="1080", which is tall enough that the diagram, the scenario and mass controls, the selected-force panel and the readouts all fit without clipping even on a narrow phone where everything stacks into a single column. On a wider page the widget simply centres within its max-width of 560px. If you want it shorter you can lower the height, but 1080 is the safe default across screen sizes.

Where can I embed it — WordPress, Wix, Squarespace, Notion?

Anywhere you can add HTML, because it is a standard iframe. In WordPress use a Custom HTML block; in Squarespace a Code/Embed block; in Wix an Embed HTML element; in Ghost an HTML card; in Notion paste the /embed/free-body-diagram/ URL as an embed. On a plain HTML page or an intranet, paste the snippet straight into the markup.

Does the embedded tool track visitors or set cookies?

No. Everything runs locally in the visitor’s browser — nothing is uploaded. The embed sets no tracking cookies and sends no analytics, so it is safe to place on a privacy-sensitive site, an intranet, or a page for students.

Widgets

How to Add a Free Body Diagram Maker to Your Website

LK Forge · 4 min read · Updated September 2026

You can add a full free body diagram maker to any website, blog, or classroom page with a single line of code — free, with no sign-up, no plugin, and no script to install. Visitors load a classic scenario or add their own forces, drag the arrows, and watch the net force, equilibrium and acceleration update live. This guide covers the fastest way to embed the Free Body Diagram Maker, what it teaches, and where it works.

The quickest way: paste one embed snippet

An embed is just an <iframe> that loads the tool from lkforge.com, plus a small credit line. Copy this into your page’s HTML where you want the widget to appear:

<iframe src="https://lkforge.com/embed/free-body-diagram/"
        width="100%" height="1080" loading="lazy"
        style="border:0;max-width:560px"
        title="Free Body Diagram Maker by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/free-body-diagram/">Free Body Diagram Maker</a>
   by <a href="https://lkforge.com/">LK Forge</a></p>

The <iframe> is the live tool; the <p> underneath is a plain credit link. Keep that line — the visible link is what keeps the widget free to embed. You can also copy this exact code straight from the LK Forge widget gallery.

What the widget shows

The tool opens with a worked scenario, so a visitor sees a correct diagram immediately and can then take control:

Scenario presets: load a block on the ground, a block on a frictionless incline, a hanging sign, a box pushed against friction, or an accelerating elevator.
Drag to size and aim: grab any arrowhead to change a force’s magnitude and direction, or select it and use the sliders for precision.
Add your own forces: press Add force to place a new arrow and build any situation from scratch.
Live resultant: the panel shows ΣFx, ΣFy, the net force and its direction, the equilibrium flag, and the acceleration a = Fnet/m, with the resultant drawn as a dashed white arrow.

Pick the right height

The snippet uses height="1080", which fits the diagram, the controls, the selected-force panel and the readouts without clipping even on a narrow phone, where they stack into one column. On a wider page the widget centres within its max-width:560px. That single height works across screen sizes, so there is nothing to tweak for mobile.

Where it works

Because it is a standard iframe, the embed works anywhere you can add HTML:

WordPress: add a Custom HTML block and paste the snippet.
Squarespace: use a Code / Embed block.
Wix: add an Embed HTML / iframe element.
Ghost: insert an HTML card.
Notion: paste the /embed/free-body-diagram/ URL and choose "Create embed".
Plain HTML, an intranet, or a lesson page: paste the snippet straight into the markup.

That’s the whole job. Copy the embed code from the widget gallery and paste it wherever a physics lesson or a blog post on forces, Newton’s laws or equilibrium needs a diagram students can actually build.

Grab the embed code from the LK Forge widget gallery — free, no sign-up.

Open the Free Body Diagram Maker

Frequently asked questions

Is embedding the free body diagram maker free?: Yes. It is free to embed on any site, with no account, no API key and no usage limits. The whole tool runs in your visitor’s own browser, so there is no server cost — we only ask that you keep the small "Free Body Diagram Maker by LK Forge" credit line that comes with the embed code.
What can visitors do with the embedded tool?: They can load a standard scenario — a block on the ground, a block on a frictionless incline, a sign hanging from two ropes, a box pushed at constant velocity, or an accelerating elevator — or add their own force arrows. Dragging an arrowhead changes a force’s size and direction; a selected force can also be tuned with magnitude and direction sliders. A live panel shows ΣFx, ΣFy, the resultant net force and its direction, whether the body is in equilibrium, and the acceleration a = Fnet/m.
Does the embed teach net force and equilibrium?: Yes — that is its whole purpose. Every force is drawn as a coloured arrow and the net force appears as a dashed white arrow, so students see the vector sum, not just numbers. Balance the arrows and the resultant vanishes and the equilibrium flag reads yes; unbalance them and the net force points the way the body accelerates, with a = Fnet/m shown directly.
What iframe height should I use, especially on mobile?: The snippet ships with height="1080", which is tall enough that the diagram, the scenario and mass controls, the selected-force panel and the readouts all fit without clipping even on a narrow phone where everything stacks into a single column. On a wider page the widget simply centres within its max-width of 560px. If you want it shorter you can lower the height, but 1080 is the safe default across screen sizes.
Where can I embed it — WordPress, Wix, Squarespace, Notion?: Anywhere you can add HTML, because it is a standard iframe. In WordPress use a Custom HTML block; in Squarespace a Code/Embed block; in Wix an Embed HTML element; in Ghost an HTML card; in Notion paste the /embed/free-body-diagram/ URL as an embed. On a plain HTML page or an intranet, paste the snippet straight into the markup.
Does the embedded tool track visitors or set cookies?: No. Everything runs locally in the visitor’s browser — nothing is uploaded. The embed sets no tracking cookies and sends no analytics, so it is safe to place on a privacy-sensitive site, an intranet, or a page for students.