Embed an Interactive Circuit in Your Lesson or Blog

Denny

May 7, 2026 8 min read

A webpage with an embedded interactive circuit iframe surrounded by lesson text content.

TL;DR: Any DigiSim template circuit has a clean iframe URL of the form https://digisim.io/circuits/embed/template/<slug>?theme=dark&toolbar=false&interact=true. Drop that into an <iframe> in your LMS, blog, or notes app and your readers get a live circuit they can poke at — no logins, no installs, no leaving the page.

If you’re teaching digital logic on the web, the gap between “here’s a screenshot of a circuit” and “here’s a circuit you can actually run” is enormous. Screenshots don’t toggle. PDFs don’t simulate. Sending students to a separate tab breaks the flow of a lesson.

Embedding fixes this. Every DigiSim template is available as an iframe-friendly URL designed to be dropped into other pages. This guide walks through the URL pattern, the query parameters that control the embed, and how to paste the resulting <iframe> into the major learning management systems and publishing platforms.

What is an embedded circuit?

The DigiSim app already runs in a browser. An embed is just the same simulator, served at a slightly different URL, with the chrome dialed back so it fits inside someone else’s page.

The URL pattern is:

https://digisim.io/circuits/embed/template/<template-slug>?theme=dark&toolbar=false&interact=true

Three things are happening here:

<template-slug> is the unique slug of any published template. For example, /template/basic-switch-and-light-demo becomes the embed URL https://digisim.io/circuits/embed/template/basic-switch-and-light-demo.
The embed segment in the path tells DigiSim to render the simulator without the full app shell — no top navigation, no sidebar, just the canvas.
The query string controls how the embed looks and behaves.

This is the exact same surface the DigiSim marketing site uses on its own template detail pages. If you’ve seen an interactive circuit on a DigiSim documentation page, you’ve already seen the embed in action.

The query parameters that matter

Three parameters control the embed:

theme=dark or theme=light. Forces the embedded simulator to use the dark or light color scheme. Pick whichever matches your host page. If omitted, the embed follows the user’s system preference.
toolbar=true or toolbar=false. Shows or hides the canvas toolbar (run, pause, step, reset). Set to false for a stripped-down read-only feel; set to true if you want students to control the simulation themselves. Recommended: true for interactive lessons, false for marketing screenshots.
interact=true or interact=false. Allows or blocks interaction with the canvas. With interact=true, viewers can toggle switches, drag components, and run the simulation. With interact=false, the canvas is frozen — useful when you want a live-running animation but don’t want anyone changing it.

A typical “lesson” embed: theme=light&toolbar=true&interact=true.

A typical “decorative banner” embed: theme=dark&toolbar=false&interact=false.

The minimal HTML

Every embed boils down to one HTML tag:

<iframe
  src="https://digisim.io/circuits/embed/template/basic-switch-and-light-demo?theme=light&toolbar=true&interact=true"
  width="100%"
  height="500"
  style="border: 1px solid #ddd; border-radius: 8px;"
  title="Interactive switch and light circuit"
  loading="lazy">
</iframe>

A few notes:

width="100%" lets the embed fill its container. Combined with a responsive container, the circuit stays readable on phones, tablets, and desktops.
height="500" is a sensible starting point for most circuits. Simple ones (a single AND gate, a 2-input switch) work at 350. A 4-bit ALU needs 600 or more.
title is the accessible name screen readers announce. Always set it.
loading="lazy" defers loading the iframe until the user scrolls near it. On a long article with several embeds, this saves significant bandwidth.

For perfectly responsive aspect-ratio behavior, wrap the iframe in a container:

<div style="aspect-ratio: 16 / 9; max-width: 100%;">
  <iframe
    src="https://digisim.io/circuits/embed/template/4-bit-binary-counter?theme=light&toolbar=true&interact=true"
    style="width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 8px;"
    title="Interactive 4-bit binary counter"
    loading="lazy">
  </iframe>
</div>

That keeps a clean 16:9 frame regardless of screen size.

Embedding in major learning management systems

Most LMSes treat HTML the same way. The trick is finding the right editor mode.

Canvas

Canvas’s Rich Content Editor has an HTML toggle in the lower-right corner (look for the </> icon). Click it, paste your <iframe> snippet, and switch back to the visual editor. The embed renders inline.

If your Canvas instance has the iframe filter enabled (some institutions restrict it), ask your admin to whitelist digisim.io. The whitelist is at the institution level and applies to all courses.

Moodle

In a Moodle page or label, click the source-code button (the < > icon) in the Atto editor. Paste the iframe and save. Moodle’s HTML purifier sometimes strips iframes by default; if your embed disappears on save, ask your admin to add digisim.io to Moodle’s allowed iframe domains under Site administration → Security → HTTP security.

Brightspace (D2L)

Brightspace’s HTML editor lets you switch to source view via the source-code icon. Paste the iframe and save. Brightspace usually allows iframes from any HTTPS source out of the box, so no admin coordination is typically needed.

Schoology

Schoology supports iframe embeds in pages and assignments via the “Insert Content” → “Embed” option. Paste the iframe HTML into the embed dialog. The preview renders immediately.

For all four, the same iframe snippet from earlier works without modification.

Embedding in blogs and publishing platforms

WordPress

In the block editor, add a Custom HTML block. Paste the iframe. Click “Preview” to verify the embed renders. Save the post.

If you’re using the classic editor, switch the editor to “Text” mode (next to “Visual”) and paste the iframe inline.

A note on caching: some WordPress security plugins (Wordfence, certain configurations of Cloudflare) strip iframes by default. Test in a private window after publishing — if the embed is missing for unauthenticated visitors, check your plugin’s iframe rules.

Medium

Medium does not allow arbitrary iframe embeds. The platform restricts embeds to a curated list of providers. As of writing, DigiSim is not on that list.

The best workaround on Medium is a hyperlink to the live circuit URL. Use the template page directly: /template/basic-switch-and-light-demo opens a full-page interactive view. Combine it with a static image (a screenshot of the circuit) so readers see something visual before they click.

Notion

In Notion, type /embed and select the Embed block. Paste the embed URL (just the URL — Notion handles the iframe wrapping for you). Notion will render the live circuit inline.

For circuits with toolbars and interaction, Notion respects all three query parameters. The block is resizable; drag its bottom edge to fit the circuit.

Ghost

Ghost’s editor has an HTML card. Type /html to insert one, paste the iframe, and save. Ghost renders the embed natively in published posts. Self-hosted Ghost installations support all standard iframe attributes; Ghost(Pro) also allows iframes by default.

Why embedding beats linking

The strongest argument for embedding rather than linking is attention. When a student opens a separate tab, three things happen:

Context switches. They lose their place in the lesson. The next paragraph reads cold instead of warm.
Distraction. The tab next to DigiSim might be Discord, YouTube, or their email.
Asymmetry. The instructor can’t see what circuit the student is looking at. With an embed, the circuit on the student’s screen is identical to the one in the lesson — same template, same starting state.

Embedding closes that gap. The circuit lives in the lesson. The lesson scrolls naturally past it. Students poke at it and keep reading.

This is the same reason classrooms moved from textbooks to interactive whiteboards: physical proximity of artifact and explanation matters. We covered the broader case for browser-based simulation in the end of the breadboard: why virtual labs are here to stay.

Privacy and cookies

The DigiSim embed loads a small amount of JavaScript and renders the simulator. It does not require the viewer to be logged in. Anonymous viewers can interact with the circuit fully — running the simulation, toggling switches, dragging components within the embedded canvas — without creating an account.

If a viewer is signed in to DigiSim in another tab, the embed will read their session cookie to enable signed-in features (like saving). For LMS integration this is usually fine; if your institution requires a strict no-cookies policy, instruct students to use private browsing on the host page.

The embed does not set any third-party tracking cookies. Telemetry is limited to anonymous performance metrics on the DigiSim domain.

Accessibility recommendations

Three small touches make embeds work for everyone:

Always set the title attribute. Screen readers announce the iframe’s title when the user navigates onto it. A clear name like “Interactive 4-bit binary counter circuit” is much more useful than the default “iframe.”
Provide a fallback link. Below or above the embed, include a plain hyperlink to the same template’s full page. If the iframe fails to load (due to an LMS filter, an old browser, or a network issue), the link is the lifeboat. Example: “View this circuit at /template/4-bit-binary-counter.”
Caption the embed. A one-sentence caption describing what the circuit does helps readers who skim, readers using assistive technology, and readers who can’t run the simulation in their current environment.

Together, these three habits make an embed work as well in a printed PDF (where it becomes a static link) as in a live browser.

Three templates worth embedding first

If you’re new to embedding, start with these three:

Basic switch and light demo. The “hello world” of digital logic. One switch, one light. Perfect first circuit for a lesson on inputs and outputs. Pairs nicely with digital logic 101: your first steps with AND, OR, and NOT gates.
4-bit binary counter. A classic example of sequential logic. The counter ticks through 0–15 and resets. Great for a lesson on flip-flops, clocks, and binary numbers.
4-bit ALU demonstration. A small arithmetic logic unit. Lets students see addition, subtraction, AND, and OR all in one circuit. Best embedded with toolbar=true so students can switch operations.

For more on grading what students build with these embedded circuits, see grading circuits in seconds: the DigiSim workflow.

A complete worked example

Here’s the iframe code for a counter embed, ready to paste:

<figure>
  <div style="aspect-ratio: 16 / 9; max-width: 100%;">
    <iframe
      src="https://digisim.io/circuits/embed/template/4-bit-binary-counter?theme=light&toolbar=true&interact=true"
      style="width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 8px;"
      title="Interactive 4-bit binary counter circuit"
      loading="lazy">
    </iframe>
  </div>
  <figcaption>
    A 4-bit binary counter. Press play and watch it count from 0000 to 1111.
    <a href="https://digisim.io/circuits/template/4-bit-binary-counter">Open in full editor</a>.
  </figcaption>
</figure>

Drop that into a Custom HTML block, save, and you have a live, interactive, accessible circuit embed.

Where to go next

If you’re building a course around DigiSim, the next step is sequencing your embeds into a learning path. A future post on SimCast lessons — step-through, narrated tutorials that go deeper than a single embed — will cover that. In the meantime, see your first 5 minutes with DigiSim.io for a beginner’s tour you can adapt straight into your own lessons.

Ready to embed your first circuit? Pick a template — /template/basic-switch-and-light-demo is a perfect starting point — copy the iframe pattern from this post, and paste.