This tutorial walks through Beyond the basic iframe — how to get a flipbook to behave correctly inside Moodle's text filters, the mobile app, and a GDPR-friendly setup. 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.
The basic Moodle embed is a single iframe, but a production-grade Moodle setup involves filters, privacy decisions, and the mobile app. Moodle's Multimedia Plugins filter normally strips raw script tags from teacher-authored HTML; if it's aggressively configured it can also strip iframe attributes you need. Confirm the filter's settings at the site level before you start, otherwise you'll spend an hour debugging an embed that the filter is silently rewriting.
Use a Page resource (Add an activity or resource → Page), not a URL or a Label. The Page resource records views as completion data, which is essential if you want to mark the reading as a tracked activity. URL resources skip Moodle and send the student directly to the flipbook host, which loses both the in-Moodle wrapper and the tracking. a recommended classroom publishing partner
For GDPR-conscious deployments, host the flipbook on a server inside your data region. The flipbook itself stores almost nothing (a few localStorage keys for resume position), but third-party fonts and analytics scripts inside the flipbook page do count as cross-border transfers. Self-host fonts, skip third-party analytics, and link to a short privacy note from the flipbook footer.
The Moodle Mobile App is the easy thing to forget. The app uses a simplified renderer that drops some iframes silently, especially ones loading from hosts the app doesn't recognise. Always pair the embed with a visible "Open in browser" link beneath the iframe so app users have a fallback. The link costs nothing and dramatically reduces "the page is blank" support tickets.
Use Moodle's log report after the first week of any new flipbook to see which students actually opened the Page. Restrict Access can gate later content on completion of this Page, which is how you turn the flipbook into part of a structured learning path rather than an optional resource. Treat Restrict Access as a planning tool, not as gatekeeping — sequence matters more than enforcement.
The steps in order
- Confirm the "Multimedia plugins" filter is enabled at the site level so iframes are not stripped from teacher-authored HTML.
- Use a Page resource (not a URL or Label) for the flipbook so Moodle records views as activity completion data.
- Paste the iframe inside the Page content using the HTML view; allowlist your flipbook host in the site security settings if needed.
- For the Moodle Mobile App, also publish a "Open in browser" link beneath the iframe — the app silently drops some iframes.
- For GDPR compliance, host the flipbook on a server inside your data region and avoid third-party fonts and analytics scripts.
- Add a short Privacy note linked from the Page describing what the flipbook stores in localStorage and what (if anything) is sent home.
- If you use the Restrict Access feature, gate the Page on completion of a prerequisite quiz so reading order is enforced.
- Use Moodle's log report after the first week to see which students opened the flipbook and intervene early if needed.
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.