How to Embed a Flipbook on Your Website

One of the most effective ways to use a flipbook is to embed it directly on your website. Rather than sending readers to a separate link, you can place an interactive publication right inside your existing pages - on a landing page, a blog post, a resource library, or a product page.

This guide covers how to get your ZenFlip embed code and how to use it on the most popular website platforms.

Getting Your Embed Code

Every ZenFlip publication has an embed code you can copy from your dashboard:

1. Go to your ZenFlip dashboard

2. Click on the publication you want to embed

3. Click the "Share" button

4. Select the "Embed" tab

5. Copy the iframe code

The embed code looks something like this:

You can adjust the width and height values to fit your page layout. The flipbook viewer is responsive and will adapt to the container you give it.

Embedding on WordPress

Using the Block Editor (Gutenberg)

1. Open the page or post where you want the flipbook

2. Click the "+" button to add a new block

3. Search for "Custom HTML" and select it

4. Paste your ZenFlip embed code into the HTML block

5. Click "Preview" to see how it looks

6. Publish or update your page

Using the Classic Editor

1. Open your page or post

2. Switch to the "Text" tab (not "Visual")

3. Paste your embed code where you want the flipbook to appear

4. Switch back to "Visual" to preview

5. Publish or update

WordPress Tips

• If your theme has a narrow content area, set the iframe width to "100%" so it fills the available space

• For a full-width flipbook, consider using a page builder like Elementor or a full-width page template

• Some security plugins may strip iframe tags. If your embed disappears after saving, check your security plugin settings

Embedding on Webflow

1. Open your Webflow project in the Designer

2. Drag an "Embed" element from the Add panel onto your page

3. Paste your ZenFlip embed code into the code field

4. Close the embed editor

5. Adjust the size of the embed element using the Style panel

6. Publish your site

Webflow gives you precise control over sizing. You can set the embed container to a specific pixel height or use viewport height (vh) units for a more dynamic layout.

Embedding on Squarespace

1. Open your page in the Squarespace editor

2. Click the "+" button where you want to add the flipbook

3. Select "Code" from the content blocks

4. Paste your ZenFlip embed code

5. Click "Apply"

6. Save and publish your page

Squarespace wraps embeds in a container. If the flipbook appears too small, increase the height value in your iframe code (try 700 or 800 pixels).

Embedding on Wix

1. Open your site in the Wix Editor

2. Click "Add" in the left menu

3. Select "Embed Code" then "Embed HTML"

4. A code widget will appear on your page

5. Click "Enter Code" and paste your ZenFlip embed code

6. Click "Update"

7. Drag and resize the widget to fit your layout

8. Publish your site

Wix requires you to manually size the embed widget on the canvas. Make sure it is large enough for comfortable reading.

Embedding on Custom HTML Sites

If you manage your own HTML, paste the embed code directly into your page source:

The wrapping div centers the flipbook and sets a maximum width. Adjust these values to suit your design.

Making Your Embed Responsive

For a flipbook that scales smoothly across screen sizes, use the responsive wrapper technique:

The padding-bottom: 75% creates a 4:3 aspect ratio. For a landscape publication, try padding-bottom: 56.25% (16:9 ratio). For a portrait publication, try padding-bottom: 125%.

Best Practices for Embedded Flipbooks

Give it enough height. A flipbook that is too small forces readers to squint. On desktop, 600 pixels is a reasonable minimum height. On landing pages where the flipbook is the main content, consider 700-800 pixels or even full viewport height.

Add a title attribute. Including title="Your Publication Name" in the iframe tag improves accessibility. Screen readers use this to describe the embedded content.

Consider page load time. The flipbook loads asynchronously, so it will not slow down your page. However, placing the embed below the fold (further down the page) means it loads after your visitor sees the initial content.

Provide a fallback link. Some corporate networks block iframes. Below your embed, consider adding a text link: "Having trouble viewing? Open in a new tab."

Test on mobile. The ZenFlip viewer is responsive and supports touch gestures, but check that your page layout does not constrain the embed to an unusably small size on phones.

Embed Settings on Paid Plans

On the Starter plan and above, you have additional embed options:

• Remove ZenFlip branding from the viewer

• Custom domain - embed from your own domain (e.g., publications.yourcompany.com)

• Password protection - require a password before the flipbook loads (Professional plan)

Troubleshooting

The embed shows a blank space: Check that your publication is set to "Public" visibility. Private publications cannot be embedded.

The iframe is being stripped: Some CMS platforms or security plugins remove iframe tags. Look for an "HTML" or "Code" block option rather than pasting into a rich text editor.

The flipbook is too small on mobile: Set the iframe width to "100%" and ensure your page container is not constraining the width. The responsive wrapper technique above helps.

The embed is blocked by a corporate firewall: Provide a direct link to the flipbook as a fallback so readers can open it in a new tab.