Widgets

How to Add a Collision Simulator to Your Website

LK Forge · 4 min read · Updated September 2026

You can add a full collision simulator 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 send two bodies sliding along a line, pick how bouncy the impact is, and watch momentum stay put while kinetic energy drains away. This guide covers the fastest way to embed the tool, what it shows, and where it works.

The quickest way: paste one embed snippet

An embed is just an <iframe> that loads the simulator 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/collision-simulator/"
        width="100%" height="960" loading="lazy"
        style="border:0;max-width:560px"
        title="Collision Simulator by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/collision-simulator/">Collision Simulator</a>
   by <a href="https://lkforge.com/">LK Forge</a></p>

The <iframe> is the live simulator; 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 simulator sets up two bodies on a track, ready to launch, so a visitor can collide them straight away and then tune the setup:

  • Mass for each body: sliders set how heavy body A and body B are, so a light cart meeting a heavy one behaves visibly differently from an even match.
  • Signed speeds: each body gets its own speed, positive to the right and negative to the left, so you can aim a head-on hit or a catch-up chase.
  • Elasticity slider: dial the coefficient of restitution from 1.00 (a perfectly elastic bounce) down to 0 (a dead-stick inelastic hit where the bodies move off together).
  • Momentum and energy readouts: total momentum, total kinetic energy and the percentage energy change update through the impact, so you watch momentum hold and energy fall in real time.

Pick the right height

The snippet uses height="960", which fits the track, the launch controls, all five sliders 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/collision-simulator/ 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 momentum, energy or elastic and inelastic collisions needs carts students can actually crash together.

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

Open the Collision Simulator

Frequently asked questions

Is embedding the collision simulator free?
Yes. It is free to embed on any site, with no account, no API key and no usage limits. The whole simulation runs in your visitor’s own browser, so there is no server cost — we only ask that you keep the small "Collision Simulator by LK Forge" credit line that comes with the embed code.
What can visitors do with the embedded simulator?
They set a mass and a signed speed for each of the two bodies — a positive speed sends one to the right, a negative speed the other to the left — and dial a restitution (elasticity) slider from a perfectly elastic bounce down to a dead-stick inelastic hit. On launch the total-momentum readout holds steady through the impact while the kinetic-energy readout drops for anything less than a perfectly elastic collision.
Does the embed show that momentum is conserved but energy is not?
Yes — that is its main teaching point. Whatever elasticity you pick, the signed total momentum before the impact equals the total after it, so that readout does not budge. Kinetic energy holds only at a perfectly elastic collision (e = 1); turn the elasticity down and some energy is lost to heat and deformation, so the energy readout falls the moment the bodies meet.
What iframe height should I use, especially on mobile?
The snippet ships with height="960", which is tall enough that the track, the launch controls, the mass, speed and elasticity sliders 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. You can lower the height if you want it shorter, but 960 is the safe default across screen sizes.