Skip to main content
How to Embed a Flipbook on Your Website

How-To, Flipbooks, WebsiteHow to Embed a Flipbook on Your Website
Robert Soares By: Robert Soares     |    

← Go Back

Three Ways to Get a Flipbook on Your Website

You've created a flipbook. Now you want it on your site. There are three approaches, and the right one depends on how much control you need.

  1. iFrame embed - Simplest. Works everywhere.
  2. JavaScript embed - Responsive by default. More control.
  3. Direct link - No code at all, just a URL.

Each has tradeoffs. The biggest one that catches people off guard? Mobile. An embed that looks perfect on your laptop can break badly on a phone. More on that in a minute.

From a technical perspective, this is standard web embed work: iframe behavior is covered in MDN's iframe reference, and tap usability should follow WCAG target-size guidance.

Method 1: iFrame Embed (Easiest)

An iFrame is a window into another webpage. You paste a few lines of code, your flipbook appears.

Get Your Embed Code

In Flipbooker, open your flipbook and click "Share." Find the "Embed" tab. You'll see code that looks like:

<iframe
  src="YOUR_FLIPBOOK_URL"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

Paste It Into Your Website

On your website, find where you want the flipbook. In most page builders, add an "HTML" or "Custom Code" block. Paste the code. Save and preview.

Adjust Dimensions

The default is 100% width (fills container) and 600px height. Adjust as needed:

  • Full width, taller: height="800"
  • Fixed size: width="800" height="600"
  • Full page: width="100%" height="100vh"

Pros: Works everywhere. No dependencies. Simple. Cons: Fixed dimensions can be tricky on mobile. More on this below.

Method 2: JavaScript Embed (Responsive)

JavaScript embed gives you more control and better responsive behavior. If you've ever fought with an iFrame that looks great on desktop and terrible on a phone, this is the fix.

Get the JavaScript Code

In Flipbooker's Share > Embed tab, select "JavaScript" instead of "iFrame." You'll see:

<div id="flipbooker-embed-abc123"></div>
<script src="YOUR_EMBED_SCRIPT_URL"></script>
<script>
  Flipbooker.embed({
    container: '#flipbooker-embed-abc123',
    flipbook: 'abc123',
    responsive: true
  });
</script>

Add to Your Page

Paste this code where you want the flipbook. The <div> is the container, the scripts do the work.

Configure Options

The JavaScript embed supports options:

Flipbooker.embed({
  container: '#flipbooker-embed-abc123',
  flipbook: 'abc123',
  responsive: true,
  minHeight: 400,
  maxHeight: 800,
  startPage: 1,
  showToolbar: true
});

Pros: Responsive by default. More control. Better mobile behavior. Cons: Slightly more complex. Requires JavaScript enabled.

Method 3: Direct Link

Sometimes embedding isn't needed. Just send people to the flipbook page.

When Direct Links Make More Sense

  • Email campaigns (embed doesn't work in email)
  • Social media posts
  • QR codes on print materials
  • Any situation where your CMS restricts custom code

Get Your Link

In Flipbooker, click Share and copy the direct URL:

YOUR_FLIPBOOK_URL

Use this in emails, social posts, or anywhere you share links.

Pros: Works everywhere. No code needed. Full-screen experience. Cons: Readers leave your website.

Platform-Specific Instructions

WordPress

Block Editor (Gutenberg): Add a "Custom HTML" block, paste your embed code, preview and publish.

Classic Editor: Switch to the "Text" tab (not "Visual"), paste embed code, then switch back to Visual to verify it rendered.

Elementor: Add an HTML widget, paste embed code, and adjust widget size.

Squarespace

Add a "Code" block to your page. Paste the embed code. For full-width, wrap it in a full-width section.

Squarespace tip: Their responsive handling can be finicky. In practice, iFrame embeds that look fine on desktop can still break layout on some mobile templates. Test on a real phone before publishing.

Wix

Add an "Embed" or "HTML iFrame" element, choose "Code" and paste your embed. Resize the element to fit your layout.

Wix tip: You may need to set specific pixel dimensions rather than percentages.

Webflow

Add an "Embed" element, paste the code, and style the container for responsive behavior.

Webflow tip: Use the JavaScript embed for better responsive control. Webflow forum threads show that iFrame embeds can push content off-screen on mobile.

Shopify

Edit your page or product. In the content editor, click "Show HTML" or <>. Paste embed code and save.

For theme integration, edit theme files and add to a section.

The Mobile Problem (And How to Fix It)

Here's the thing that surprises most people: an iFrame embed that looks perfect on your laptop can completely break on mobile. This isn't a bug in your flipbook. It's how iFrames work.

As Embeddable's engineering team puts it: "Mobile browsers add an extra layer of pain by zooming into the frame and disabling momentum scrolling." The result? Your users see a tiny, zoomed-in rectangle where a flipbook should be. Or double scrollbars.

The iFrame Responsive Fix

Wrap your iFrame in a responsive container:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="YOUR_FLIPBOOK_URL"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

The padding-bottom: 75% creates a 4:3 aspect ratio. Adjust for your needs:

  • 16:9 → padding-bottom: 56.25%
  • 4:3 → padding-bottom: 75%
  • Square → padding-bottom: 100%

Or Just Use the JavaScript Embed

Set responsive: true and it handles sizing automatically. No wrapper div needed, no aspect ratio math.

Flipbooker.embed({
  container: '#flipbooker-embed',
  flipbook: 'abc123',
  responsive: true,
  minHeight: 400
});

If you're building on WordPress, Squarespace, or any platform where you can't easily control the CSS, this is the safer choice.

Common Issues and Fixes

Flipbook doesn't load

  • Check that the URL is correct
  • Verify the flipbook is published (not draft)
  • Make sure your website allows iFrames

Wrong size or cropped

  • Adjust width/height values
  • Use the responsive wrapper technique
  • Test on actual mobile devices, not just browser resize

Scrollbars appearing

  • Add frameborder="0" and scrolling="no" to iFrame
  • Check your container isn't restricting size

Not loading on mobile

  • Some mobile browsers restrict iFrames in certain contexts
  • Try the JavaScript embed instead
  • Provide a direct link as fallback

The most common mistake? Embedding, checking it on your laptop, and calling it done. Pull out your phone. Open the page. If the flipbook looks wrong there, your visitors will see the same thing. The JavaScript embed handles most of this automatically, but even then, a quick phone check takes ten seconds and saves you from the silent problem where half your audience sees a broken page.

FAQs