Embed the reading games
Free reading games for your own site: 550 ready-to-embed games across 277 word lists in six languages. The embedded game page loads no analytics and sets no cookies. Three ways to add one: a script tag, a web component or a React component.
A code builder with a live sample page is on dyslexiasteps.com/embed: pick a game and see the result before you paste anything.
Script tag
<div data-dys-game="listen" data-list="short-a"></div>
<script async src="https://dyslexiasteps.com/embed.js"></script>The script builds the iframe, keeps its height equal to its content and writes a visible credit line under the game into your page.
npm: web component
npm install dyslexiasteps-embed<script type="module">import "dyslexiasteps-embed";</script>
<dyslexiasteps-game game="listen" list="short-a" lang="en" size="standard"></dyslexiasteps-game>npm: React
import { Game } from "dyslexiasteps-embed/react";
<Game game="build" list="short-a" size="wide" />
<Game game="choice" lang="es" list="vaya-o-valla" />The wrapper registers the web component on the client only, so it is safe in server-rendered apps.
Plain iframe
For pages that block scripts. Add the credit line yourself.
<iframe src="https://dyslexiasteps.com/embed/en/listen/short-a" title="Reading game by Dyslexia Steps" width="480" height="560" style="border:0;width:100%;max-width:480px" loading="lazy"></iframe>
<p style="text-align:center;font:12px system-ui,sans-serif">Free reading games by <a href="https://dyslexiasteps.com/">Dyslexia Steps</a></p>Options
| Script | Component / React | Values |
|---|---|---|
data-dys-game | game | listen, build, choice, dictation |
data-list | list | An id such as short-a (English) or the list page name such as palabras-con-m (other languages) |
data-lang | lang | en (default), de, es, fr, nl, pt-br |
data-size | size | compact (360 px), standard (480 px, default), wide (720 px) |
Games and languages
| Game | What the child does | Languages | Ready to embed |
|---|---|---|---|
listen | Hears a word and taps the matching one out of four | en, de, es, fr, nl, pt-br | 254 |
build | Hears a word and builds it from letter or syllable tiles | en, de, es, fr, nl, pt-br | 245 |
choice | Fills a gap in a sentence with the right sound-alike word | de, es, fr, nl, pt-br | 25 |
dictation | Listens, writes and checks word by word | de, es, fr, nl, pt-br | 26 |
Not every list has every game. The full catalog, with list ids and page addresses, is machine-readable: embed-catalog.json.
Add it on your platform
Steps taken from each platform's own help pages (read 18 October 2026). Menus and plan limits change; if a platform removes scripts, use the plain iframe and add the credit line by hand.
| Platform | Where to paste | Good to know |
|---|---|---|
| WordPress.com | Add a block (+), search “HTML”, choose Custom HTML, Edit HTML, paste, then Update. | Scripts and frames only work on a paid plan with hosting features active; the free plan removes them when you save. If code disappears, re-enter it after activating hosting. |
| Wix | Add Elements → Embed Code → Embed HTML → Enter Code (or Embed a site → Enter Website Address), then Apply. | Only HTTPS addresses show once published. Set width and height to 100% so the game is not cropped. |
| Squarespace | Code block (set the mode to HTML), or an Embed block with a code snippet. | Code blocks need a Core, Plus or Advanced plan; Embed blocks are on all plans. Code can be hidden while you are logged in, so test in a private window. |
| Google Sites | Insert → Embed → Embed code, paste, Next, Insert, then Publish. | JavaScript must sit inside script tags. You only see the result after publishing; desktop editor only. |
| Carrd | Embed element, Type: Code, Style: Inline. | Needs Pro Standard or higher. Nothing shows in the builder; publish to see it. |
| Notion | Type /embed and paste the game address (the https://… link), not the code. | Notion takes an address only: no script, no pasted frame code. Some addresses fail to load there, so add a normal link to the game page as a fallback. |
| Webflow | Code Embed element inside a container; paste the code and preview. | Needs a paid site plan. Leave out html, body and head tags. Read from help-center snippets: check in your editor. (Not fully confirmed from the official page.) |
| Ghost | HTML card in the post editor. | The editor only shows a placeholder, so check the published page. Whether scripts run is not stated in the official page: check in your editor. (Not fully confirmed from the official page.) |
| Shopify, Blogger, Weebly | Custom HTML or Liquid sections (Shopify), an HTML/JavaScript gadget (Blogger), an Embed Code element (Weebly). | Steps and limits could not be confirmed from the official pages: check in your editor. (Not fully confirmed from the official page.) |
Height
The game posts its content height to the parent window and the iframe follows. The script and the web component handle it; with a plain iframe you can listen yourself.
window.addEventListener("message", (e) => {
if (e.origin !== "https://dyslexiasteps.com") return;
const m = e.data;
if (m && m.source === "dys-embed" && m.type === "resize") {
iframe.style.height = Math.ceil(m.height) + "px";
}
});The credit link
The script and the component write one small line under the game into your page: “Free reading games by Dyslexia Steps”, linking to the Dyslexia Steps home page. We ask that it stays visible. A link inside the frame would belong to the game's own document, which is why the line is written into your page.
Privacy
The embedded game page loads no analytics and sets no cookies, and has no sign-up or account. Audio files load from dyslexiasteps.com like any embedded file, so ordinary server request logs exist. The credit link on your page is only a link.
Terms
- Free to use on any website, including schools, tutoring businesses and commercial sites.
- Keep the credit line under the game visible. Do not hide it or restyle it to invisibility.
- Do not change the game or present it as your own. The games are practice with word lists: not a test, and not an assessment of any child.
Source: dyslexiasteps-embed.