How to Add a Bohr Model Simulator to Your Website
LK Forge · 4 min read · Updated September 2026
You can add a full Bohr model of hydrogen 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 move an electron between energy levels, watch it emit a photon of exactly the right colour, and build up hydrogen's emission spectrum. This guide covers the fastest way to embed the Bohr Model simulator, what it teaches, 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/bohr-model/"
width="100%" height="1000" loading="lazy"
style="border:0;max-width:560px"
title="Bohr Model of Hydrogen by LK Forge"></iframe>
<p><a href="https://lkforge.com/tools/physics/bohr-model/">Bohr Model of Hydrogen</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 opens on the hydrogen atom, so a visitor sees the orbits and can then take control:
- Labelled energy levels: the orbits are marked with their energies Eₙ = −13.6/n², showing the quantised ladder.
- Jumps you choose: set the starting and ending levels, then emit a photon and watch the electron drop.
- The Balmer series in one click: fire all four visible hydrogen lines at once to see its fingerprint appear.
- A live spectrum: every transition adds a coloured line at its wavelength, from ultraviolet Lyman lines to the visible Balmer lines, with the wavelength and series shown in the panel.
Pick the right height
The snippet uses height="1000", which fits the atom, the controls, the readouts and the spectrum 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/bohr-model/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 or chemistry lesson on atomic structure, energy levels or spectra needs an atom students can actually excite.
Grab the embed code from the LK Forge widget gallery — free, no sign-up.
Open the Bohr Model SimulatorFrequently asked questions
- Is embedding the Bohr model 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 "Bohr Model of Hydrogen by LK Forge" credit line that comes with the embed code.
- What can visitors do with the embedded simulator?
- They can set the level an electron starts on and the level it falls to, press "Emit photon" to watch it drop and release light, or press "Balmer series" to fire the whole visible set of hydrogen lines. Each transition adds a coloured line to an emission spectrum below the atom, and a live panel shows the transition, the photon energy ΔE, the wavelength, the series name and whether the light is ultraviolet, visible or infrared.
- Does the embed teach energy levels and spectra?
- Yes — that is its purpose. The orbits are labelled with their energies Eₙ = −13.6/n², so students see the quantised ladder directly, and every jump emits a photon whose wavelength comes from λ = 1240/ΔE. Dropping electrons to level 2 paints the red, cyan and violet Balmer lines exactly where they appear in a real hydrogen spectrum, connecting the model to the measurement.
- What iframe height should I use, especially on mobile?
- The snippet ships with height="1000", which is tall enough that the atom diagram, the controls, the readouts and the emission spectrum 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 1000 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/bohr-model/ URL as an embed. On a plain HTML page or an intranet, paste the snippet straight into the markup.
- Does the embedded simulator 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.