How to Embed Flipbooks on Your Website

Sharing a flipbook link is the simplest distribution method, but embedding a flipbook directly on your website gives you more control over the reader's experience. An embedded flipbook lives inside your page, surrounded by your branding and content, creating a seamless experience for visitors.

This guide covers every embedding option, from a quick iframe to advanced JavaScript integration.

Option 1: The Quick Embed (iframe)

The fastest way to embed a flipbook is with an iframe. ZenFlip provides a ready-to-use embed code for every published flipbook.

Getting Your Embed Code

1. Open the publication in your ZenFlip dashboard

2. Click Share in the top right

3. Select the Embed tab

4. Copy the embed code

The code looks like this:

Paste this into any HTML page, CMS editor, or website builder that supports custom HTML.

Making It Responsive

A fixed height works for simple use cases, but a responsive embed adapts to the reader's screen. Wrap the iframe in a container with a percentage-based aspect ratio:

The padding-bottom: 75% creates a 4:3 aspect ratio. Adjust to 56.25% for 16:9, or 100% for a square embed.

Option 2: The JavaScript Widget

For more control, use the ZenFlip JavaScript embed widget. This method gives you access to customisation options and event callbacks.

Basic Setup

Add the ZenFlip embed script to your page:

Configuration Options

The embed function accepts these options:

Listening to Events

The JavaScript widget fires events that you can use to trigger actions on your page:

This is useful for tracking custom analytics events, showing contextual content alongside specific pages, or triggering animations when the reader reaches a certain point in the publication.

Platform-Specific Guides

WordPress

1. Create or edit a page in WordPress

2. Add a Custom HTML block

3. Paste your ZenFlip embed code (iframe or JavaScript)

4. Preview and publish

If your WordPress theme restricts iframes, use the JavaScript embed method instead.

Webflow

1. Drag an Embed element onto your page in the Webflow Designer

2. Paste the iframe code

3. Adjust the element size in the Webflow layout panel

4. Publish your site

Shopify

1. Go to the page or product where you want the flipbook

2. Switch to the HTML editor view

3. Paste the embed code

4. Save

For Shopify product pages, consider embedding your product catalogue as a flipbook alongside your standard product photos. It gives customers a richer browsing experience.

React / Next.js

For React applications, use the JavaScript widget inside a useEffect hook:

Styling the Embed

The flipbook viewer inherits some styles from its container. You can control:

• Border radius: Add border-radius to the iframe or container for rounded corners

• Box shadow: A subtle shadow helps the flipbook stand out from the surrounding page

• Max width: Set a max-width on the container to prevent the flipbook from stretching too wide on large screens

Performance Considerations

Embedded flipbooks load asynchronously and do not block your page from rendering. However, keep these points in mind:

• Lazy loading: If the flipbook is below the fold, add loading="lazy" to the iframe so it only loads when the reader scrolls to it

• Single embed per page: Embedding multiple flipbooks on the same page is supported, but each one consumes resources. For pages listing multiple publications, consider linking to dedicated pages instead

• Mobile bandwidth: The viewer loads optimised assets based on the reader's device. On mobile connections, smaller viewport sizes receive lower-resolution page images to reduce load time

Analytics and Embedded Flipbooks

Embedded flipbooks track analytics identically to directly viewed ones. Views, read depth, page engagement, and lead captures all work the same way regardless of how the reader accesses the publication. The referring domain is recorded in your analytics, so you can see which pages on your website drive the most flipbook engagement.