This tutorial walks through Use a single iframe snippet to drop your published flipbook into any modern LMS or classroom site. The steps below are written for the workflow most educators actually use: starting from a finished course PDF, pushing it through one of the free HTML5 flipbook templates in the PageFlip Guide gallery, and ending with a link you can hand to a class.
Moodle, Canvas, and Google Sites are all happy to host an iframe, but each one has small quirks worth knowing. Moodle's text filters can strip script tags from raw HTML if Multimedia Plugins isn't enabled; Canvas requires the Rich Content Editor's HTML view, not the visual editor; Google Sites limits iframe height in some templates and silently truncates the rest.
The good news is that the iframe markup itself is identical across all three. <iframe src="https://your-flipbook-url" width="100%" height="640" allowfullscreen></iframe> works everywhere. a recommended classroom publishing partner The differences live in how you paste it and in the surrounding policies, not in the markup.
We strongly recommend serving your flipbook over HTTPS even if your LMS is also HTTPS — mixed-content blockers are quietly aggressive in 2026 and a flipbook that loads in your browser may simply not appear in a student's. The easiest fix is to publish to a host that serves HTTPS by default; GitHub Pages, Netlify, and Cloudflare Pages all qualify.
Add a fallback link beneath every embedded flipbook. Some districts ship Chromebooks with iframe-blocking extensions; some students use browsers that prompt before loading third-party content. A single "Open in a new tab" link converts those failures from "the assignment is broken" to "the assignment opened in a new tab," which is a vastly better UX.
Track opens through whatever activity log your LMS already provides — Moodle's log report, Canvas's New Analytics, Google Classroom's stream. You don't need fancy flipbook-side analytics for this; the LMS already knows who visited the page that contains the embed, and that's usually enough signal.
The steps in order
- Publish your flipbook so it has a public HTTPS URL — GitHub Pages and Netlify Drop both work great for this.
- Open your Moodle/Canvas page in HTML edit mode (or use the "Embed" block in Google Sites and Notion).
- Paste an iframe pointing at your flipbook URL. Use width="100%" height="640" and allowfullscreen attributes.
- Test on a real student device — phones, school Chromebooks, and tablets — to make sure controls remain reachable.
- Add a fallback "Open in new tab" link below the iframe for browsers that block third-party iframes by policy.
Why this approach works
The reason we recommend this exact order, instead of jumping straight to the polished version, is that each step produces a working flipbook. If you lose your planning period halfway through, you can hand out what you have, finish the rest tomorrow, and the learners are no worse off. Most online tutorials assume you have unlimited time and a perfect environment — this one assumes neither.
"The hardest part of any classroom tech project is finishing it. Tutorials that produce something usable at every step are the only ones that actually ship." — Editorial principle behind every PageFlip Guide walkthrough.
What to do if something goes wrong
If you get stuck on any step, the most useful thing to do is open the demo of the template you chose and compare its <code>config.json</code> to yours line by line. 90% of issues come from a single mistyped path or a missing trailing slash — not from anything fundamental about the flipbook engine.
Pair this tutorial with a template
Open the template gallery and pick a starter that matches the subject and reading rhythm you're aiming for. The library comparison page is helpful if you haven't picked an engine yet.