Embed a helper · Show The Steps

The quick way

Open a helper and put in the problem, like 47 + 38 on the Carry Column. The embed shows the problem that's on screen.
Press Embed at the bottom of the page, beside Copy link (or press E).
Choose what visitors see, the layout, the height and the colors. The preview shows the result.
Press Copy code and paste it into your page, or copy the address for Google Sites.

The choices

Choice	What it does
Visitors see	All the steps worked out; One step at a time, with arrows to go on; or Check my answer: the student types an answer first, and the work shows once it's right or they ask for it.
Layout	Just this problem: the problem, the answer and the steps, nothing else. The whole helper also has its title, the problem maker, the examples and the buttons to switch modes, so students can try their own problems.
Height	Grows to fit: the frame becomes as tall as the steps (the code has a few lines of script for that). Fixed: the height you give; anything longer scrolls inside the frame.
Colors	Light, dark, or the visitor's own setting.

Either way there's no site menu or footer inside the frame, just a small Show The Steps ↗ link that opens the full page in a new tab. Other links in the helper (to the Word List, or another helper) open in a new tab too.

Examples

A fixed height

The simplest code: one line, and it works anywhere that takes an <iframe>.

<iframe src="https://showthesteps.org/helpers/addition?q=47%2B38&amp;practice=step&amp;embed=site"
  title="The Carry Column · Show The Steps" width="100%" height="700"
  style="border:0;width:100%;max-width:100%;height:700px" loading="lazy"></iframe>

Growing to fit

The frame is marked data-fit-height, and a few lines of script after it set its height each time the helper says how tall it is. Put the script on the page once, even with several helpers on it; a frame without data-fit-height keeps its own height.

<iframe src="https://showthesteps.org/helpers/algebra?mode=solve&amp;q=3x%2B2%3D11&amp;practice=check&amp;embed=site"
  title="The Balance Scale · Show The Steps" data-fit-height width="100%" height="700"
  style="border:0;width:100%;max-width:100%;height:700px" loading="lazy"></iframe>
<script>
/* Show The Steps: an embedded helper says how tall it is; a frame marked data-fit-height is made that tall */
window.addEventListener("message", function (e) {
  if (e.origin !== "https://showthesteps.org" || !e.data || e.data.type !== "helper:height") return;
  var f = document.getElementsByTagName("iframe");
  for (var i = 0; i < f.length; i++)
    if (f[i].contentWindow === e.source && f[i].hasAttribute("data-fit-height")) f[i].style.height = Math.max(150, Math.min(5000, Math.ceil(e.data.h))) + "px";
});
</script>

If your site removes scripts, the frame just keeps the height it starts with, and anything longer scrolls inside it.

Where to paste it

Google Sites

Choose Insert → Embed, stay on the By URL tab and paste the address (the Google Sites / Canvas tab of the Embed dialog has it, with Copy address). If it asks how to show it, choose Whole page. Press Insert, then drag the box's edges to the size you want: Google Sites sets the height itself.

Canvas

In a page, assignment or quiz, open the editor's HTML editor (the </> button), paste the code where you want it and save. Canvas removes scripts, so the frame keeps its starting height: choose Fixed and a height that fits, or use the height the preview shows.

A class website or a blog

Use the block or widget that takes HTML: it's called something like Custom HTML, HTML, Code or Embed (in Blogger, a post's HTML view or an HTML/JavaScript gadget). Some site builders and plans don't allow frames or scripts; if the frame doesn't appear, share the link instead, or the QR code from the QR button.

The address, in detail

An embed is the helper's own link with three settings added. You can write one by hand:

Setting	Values
`embed`	`site` for just this problem, `site-full` for the whole helper. This is what marks a helper as embedded on another website.
`practice`	`all`, `step` or `check`.
`theme`	`light` or `dark`; leave it out to follow the visitor's setting.
the problem	Whatever the helper's address already has, like `q=47%2B38`. The Help page says what each helper can read.

For web developers: after every change, the helper posts { type: "helper:height", h: <pixels> } to the page around it, which is what the script above listens for. In Check my answer each check also posts { type: "helper:checked", detail }, with the verdict (right, wrong, simplify or shown). The site's own practice sets use the same messages.

Privacy and credit

An embedded helper works in the visitor's browser, just as on this site: nothing they type is sent anywhere, and there are no accounts, ads or cookies. Embedded pages aren't counted in the site's visit numbers. See the privacy page.
Please keep the Show The Steps ↗ link in the frame: it's the credit the CC BY-NC 4.0 license asks for. Embedding is free for classes and any other non-commercial use.

If something's wrong

The frame is empty or says it refused to connect. Your site's editor may not allow frames; use the link or the QR code instead.
It's cut off at the bottom. Add the script (Grows to fit), or choose a taller fixed height.
It shows a different problem. The embed has the problem that was on screen when you copied the code: put in the problem and copy it again.

Something else? Tell us on GitHub.