FC FlipCraft Guide Start a flipbook
← All tutorials Workflow · 9 min · Beginner

How to embed a flipbook on your website without a developer

Iframe and JavaScript embeds for WordPress, Webflow, Squarespace and plain HTML.

Every flipbook tool gives you an embed code, but the way to drop that code into your CMS without breaking the layout differs slightly per platform. This tutorial covers the four most common cases — WordPress, Webflow, Squarespace and plain HTML — plus the responsive-iframe trick that keeps the flipbook looking good on phones.

What you need before you start

  • A published flipbook URL from any of the major platforms
  • Editor access to the page where you want to embed
  • Five minutes per page

The walkthrough

  1. Grab the embed code. Open the flipbook on its host platform and click Share → Embed. You will get an iframe snippet roughly 30 lines long. Copy it whole.
  2. Wrap it in a responsive container. Most embeds use fixed pixel widths that break on mobile. Wrap the iframe in a div with the classic responsive trick: position:relative and a padding-bottom of 56.25% (for a 16:9 aspect ratio), with the iframe set to position:absolute, top:0, left:0, width:100%, height:100%.
  3. WordPress: paste into a Custom HTML block. Block editor: add a Custom HTML block, paste, save. Classic editor: switch to the Text tab, paste, switch back.
  4. Webflow: paste into an Embed component. Add an Embed component on the page, paste the snippet, publish. Webflow's responsive defaults usually preserve the iframe's aspect ratio.
  5. Squarespace: use a Code block. Add a Code block, paste the snippet, save. Squarespace will warn that custom HTML is required — accept it.
  6. Plain HTML: paste anywhere in the body. Drop the responsive container plus the iframe wherever you want the flipbook to appear. No additional libraries required.
  7. Test on a phone. Open the page on a real phone, not just the browser developer tools. The flipbook should fill the available width without horizontal scroll, and the page-flip gestures should work.
Worth reading next: an independent walkthrough of the same workflow on a different platform from our recommended editorial partners.

Common mistakes to avoid

  • Forgetting the responsive wrapper — fixed-pixel iframes break on mobile
  • Pasting into a Markdown block instead of an HTML block (WordPress) — the iframe gets escaped
  • Embedding a flipbook on a page with restrictive Content-Security-Policy headers — open the browser console and you will see frame-ancestors errors

Once it's published

Once embedded, watch your existing analytics for the page that hosts the flipbook. Compare against the analytics inside the flipbook tool — the difference between page views and flipbook opens tells you how many readers actually engaged with the content.

Compare alternatives: a recent independent benchmark of flipbook tools is worth reading if you are still picking a platform.

Other tutorials in this library

Find your audience hub →