How to Add a Particle Collider Simulator to Your Website
LK Forge · 4 min read · Updated September 2026
You can add a full particle collider 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 slide the collision energy and fire two counter-rotating beams, then read the collision products by how their tracks curve in the detector. 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/particle-collider/"
width="100%" height="800" loading="lazy"
style="border:0;max-width:640px"
title="Particle Collider Simulator by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/particle-collider/">Particle Collider 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 widget lays out a full experiment — an accelerator ring on one side and a layered detector on the other — so a visitor can run collisions right away:
- Accelerate and collide: an electron and a positron counter-rotate around the ring and cross head-on at the interaction point when you fire.
- Slide the energy √s: the collision energy sets what can be produced — back-to-back muons, jets of hadrons, or two photons — since a particle needs √s above twice its mass.
- Read the tracks: charged products curve with radius r = p/(|q|·B) and opposite charges bend opposite ways, while neutral photons fly straight and light only the calorimeter.
- The Z⁰ resonance and readout: crank √s to 91 GeV and a real Z⁰ boson spikes the production rate shown in the readout, beside the last event and the running collision count.
Pick the right height
The snippet uses height="800", which fits the ring-and-detector canvas, the energy slider, the legend and the readout without clipping even on a narrow phone, where they stack into one column. On a wider page the widget centres within its max-width:640px. 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/particle-collider/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 lesson or a blog post on particle physics, E = mc² or the Z⁰ boson needs a collider students can actually fire.
Grab the embed code from the LK Forge widget gallery — free, no sign-up.
Open the Particle Collider SimulatorFrequently asked questions
- Is embedding the particle collider 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 "Particle Collider Simulator by LK Forge" credit line that comes with the embed code.
- What can visitors do with the embedded collider?
- They slide the collision energy √s and fire the beams: an electron and a positron counter-rotate around the accelerator ring and cross at the interaction point, spraying products into the detector. A legend labels the e⁻ and e⁺ beams, muons, hadron jets and photons, while a readout shows the energy, the last event, the collision count and the live production rate.
- Is this really how a collider works?
- The visible mechanics are real. Two counter-rotating beams are held on the ring by bending magnets; a head-on collision turns energy into matter by E = mc², but only particles light enough that √s clears twice their mass. Each charged track then curves in the detector field with radius r = p/(|q|·B), so the bend measures momentum and its direction gives the charge sign, while neutral photons fly straight and only light the calorimeter. Tune √s to 91 GeV and a real Z⁰ resonance spikes the rate.
- What iframe height should I use, especially on mobile?
- The snippet ships with height="800", which is tall enough that the ring-and-detector canvas, the energy slider, the legend and the readout 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 640px. You can lower the height if you want it shorter, but 800 is the safe default across screen sizes.