How to Embed Flipbooks on Your Website

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. For a broader overview of embedding strategies, see our complete guide to embedding flipbooks on websites.

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.

Embedding on Popular Platforms 

Beyond the developer-focused platforms covered above, many website builders and CMS platforms support flipbook embeds. Here are specific instructions for the most common ones. 

WordPress 

WordPress is the most widely used CMS, and embedding a flipbook works with both the block editor (Gutenberg) and the classic editor. In the block editor, add a Custom HTML block to your page or post and paste your ZenFlip embed code (either iframe or JavaScript). In the classic editor, switch to the Text tab and paste the code directly. If your WordPress theme or security plugin strips iframes, the JavaScript embed method avoids this issue entirely. For WordPress.com sites on the Business plan or higher, custom HTML blocks are supported. Lower-tier WordPress.com plans may restrict custom code. 

Webflow 

Webflow's visual designer includes a dedicated Embed element for custom code. Drag the Embed element from the Add panel onto your page canvas, then paste your iframe or JavaScript embed code. Use the Webflow layout settings to control the element's width and height within your page design. Webflow renders the embed in preview mode, so you can verify the flipbook displays correctly before publishing. For responsive behaviour, wrap the iframe in the responsive container code described earlier in this guide. 

Squarespace 

Squarespace supports custom code through its Code Block element. In the page editor, add a Code Block where you want the flipbook to appear and paste your iframe embed code. Set the display option to HTML. Squarespace applies its own styling to embedded elements, so you may need to add a max-width or margin styling to the container to ensure the flipbook aligns with your page layout. On Squarespace Business and Commerce plans, you also have the option of injecting code through the site-wide Code Injection settings, which is useful if you want to load the ZenFlip JavaScript embed script globally. 

Wix 

Wix provides an HTML iFrame element for embedding external content. In the Wix Editor, click Add, then select Embed Code and choose HTML iFrame. Paste your ZenFlip iframe code into the element and resize it on the canvas. Wix's Editor X (the responsive editor) gives you more control over how the embed behaves at different breakpoints. For Wix sites built with the standard editor, set the iframe dimensions to match your page width and test on mobile preview to ensure the flipbook displays correctly. 

Responsive Embed Tips

A well-embedded flipbook should look polished on every screen size. Here are the technical details that ensure your embed adapts properly. 

Container Sizing 

The most reliable responsive technique is the aspect ratio container. Wrap your iframe in a div with relative positioning and a padding-bottom value that represents the aspect ratio of your publication. For landscape publications, use padding-bottom: 66.67% (3:2 ratio). For portrait publications, use padding-bottom: 141.42% (A4 ratio). The iframe sits inside with absolute positioning, filling the container completely. 

Aspect Ratio Considerations 

Choose an aspect ratio that matches your publication's page dimensions. A mismatch causes letterboxing (blank bars around the content), which looks unprofessional. If your publication uses standard A4 or US Letter dimensions, a 3:4 aspect ratio ( padding-bottom: 133.33% ) is a close fit. For presentations or landscape layouts, 16:9 ( padding-bottom: 56.25% ) works well. The ZenFlip viewer handles minor mismatches gracefully, but matching the ratio to your content produces the cleanest result. 

Mobile Considerations 

On mobile devices, embedded flipbooks should take the full width of the screen to maximise the reading area. Set the container to width: 100% with no fixed maximum width on small screens. Consider using a CSS media query to adjust the container height on mobile, since the optimal aspect ratio for a desktop embed may feel too tall or too short on a phone. Adding loading="lazy" to the iframe ensures that flipbooks below the fold do not consume bandwidth until the reader scrolls to them, which is especially important on mobile connections. 

Tracking Embedded Flipbook Performance 

One of the common concerns about embedding flipbooks is whether analytics still work. The answer is yes - embedded flipbooks track engagement identically to standalone ones. 

What Gets Tracked 

Every interaction with an embedded flipbook is recorded in your ZenFlip analytics dashboard: total views, unique readers, session duration, page-level engagement, read depth, geographic data, and device information. Lead capture forms embedded within the flipbook function exactly the same in an embed as they do in the standalone viewer. 

Referral Source Tracking

When a flipbook is embedded on your website, the referring domain is recorded in your analytics. This means you can see which pages on your site drive the most flipbook engagement. If you embed the same flipbook on multiple pages or multiple websites, you can compare performance across each placement. This data helps you decide where to feature flipbook content for maximum impact. 

Combining With Your Site Analytics 

Embedded flipbooks load within an iframe, which means they operate in their own browsing context. Your site's Google Analytics or other tracking tools will register the page view for the page containing the embed, and ZenFlip's analytics will track the flipbook engagement separately. Together, these two data sources give you a complete picture: your site analytics show how visitors arrive at the page, and ZenFlip analytics show what they do with the flipbook once they get there. 

Frequently Asked Questions 

Does embedding a flipbook slow down my website? 

No. ZenFlip flipbooks load asynchronously, meaning the embed does not block the rest of your page from rendering. Adding loading="lazy" to the iframe further improves performance by deferring the flipbook load until the reader scrolls to it. The viewer also serves optimised assets based on the reader's device, so mobile users receive appropriately sized page images. 

Can I embed the same flipbook on multiple websites? 

Yes. There is no limit to where you can embed a ZenFlip flipbook. The same embed code works on your main website, partner portals, landing pages, or any other site. Each embed location is tracked separately in your analytics through the referral source data, so you can compare engagement across different placements. 

Do lead capture forms work inside embedded flipbooks? 

Lead capture forms function identically in embedded and standalone flipbooks. When a reader reaches the page with a lead form, they see the same form and can submit their details. The captured leads appear in your ZenFlip dashboard alongside leads from standalone views, with the referral source indicating which embed location generated each submission. 

Can I control which page the embedded flipbook opens to? 

Yes. Both the iframe and JavaScript embed methods support a start page parameter. In the iframe method, append ?page=5 to the source URL to open on page five. In the JavaScript widget, use the startPage configuration option. This is useful when you want to embed a flipbook on a product page and have it open directly to the relevant product section.

Will my embedded flipbook update automatically when I republish? 

Yes. When you update a publication in ZenFlip and republish it, every existing embed of that flipbook automatically displays the updated content. You do not need to change or update the embed code on your website. This makes flipbooks ideal for content that is revised regularly, such as product catalogues, price lists, or policy documents. 

Ready to create your first embeddable flipbook? See how it works or explore our plans and pricing.

visit: https://zenflip.io/en