How to Add a Flipbook to Wix with the Embed HTML Element

You have a PDF catalog, menu or brochure, and you want visitors to flip through it right on your Wix page instead of downloading a heavy file. The good news: it takes about ten minutes. Create the flipbook with Flipbooks AI, copy its embed code, and drop it into Wix with the Embed HTML element. This tutorial walks through every click, plus the sizing and troubleshooting details most tutorials skip.

Why Use a Flipbook on Wix

Wix handles text, galleries and shops very well. PDFs are a weaker spot. A visitor who clicks a PDF link leaves your site, waits for a download, and often never comes back. A flipbook keeps them on the page, with realistic page turns, zoom and fast loading.

Here is what you gain by embedding instead of linking:

• Visitors stay on your site, which keeps your pages working for you.
• Pages load progressively, so a 60 page catalog opens fast on mobile.
• You can update the flipbook without touching your Wix page again.
• No watermarks, so your brand stays front and center.

Who Benefits Most

💡 Pro tip: Pick one page and one flipbook for your first attempt. Once the process feels familiar, repeating it for other pages takes two minutes.

What You Need Before You Start

Gather these items first so you do not stop halfway:

1. A Wix site with edit access (any plan that allows custom embeds).
2. A finished PDF, ideally under 50 MB, with pages in a consistent size.
3. A free account on Flipbooks AI.
4. Ten minutes and a browser window open to both tools.

Prepare Your PDF

A clean source file gives a better flipbook. Check these points before uploading:

• Export at a sensible resolution. 150 DPI is plenty for screens.
• Keep fonts embedded so text stays crisp.
• Use single pages, not spreads, unless you want a book layout.
• Compress large images first. A lighter file converts faster.

Create Your Flipbook

This part happens outside Wix. You turn the PDF into a shareable flipbook and grab the embed code.

Upload and Convert

1. Sign in at Flipbooks AI.
2. Choose to create a new flipbook and upload your PDF. The PDF to Flipbook Converter turns it into pages with realistic turn effects.
3. Wait for processing. Short files finish in seconds, long catalogs take a little longer.
4. Preview the result and flip through a few pages to confirm nothing looks off.

Customize the Look

Before embedding, set the details that make it feel like part of your brand:

• Branding and colors to match your Wix theme.
• Page effects such as the turn animation and shadows.
• Multimedia like videos and audio on specific pages.
• Password protection if the content is private.

✅ Best practice: Match the flipbook background to your Wix section background. The embed then blends in instead of looking like a box dropped on the page.

Copy the Embed Code

Open the share options and find the embed code. It is a short snippet, usually an iframe tag. Copy the whole thing, from the opening bracket to the closing tag. The Embed Flipbook on Website tool explains the options in more detail.

Add the Embed HTML Element in Wix

Now switch to your Wix editor. The wording differs slightly between the classic Wix Editor and Wix Studio, so both paths are listed.

Steps in the Wix Editor

1. Open the page where the flipbook should appear.
2. Click Add Elements (the plus icon) on the left.
3. Select Embed Code, then choose Embed HTML.
4. A placeholder box appears on your page. Click Enter Code.
5. In the settings panel, choose Code (not Website Address).
6. Paste your flipbook embed code into the box.
7. Click Update and wait for the preview to load.

Steps in Wix Studio

1. Open the page and click Add Elements.
2. Go to Embed & Social, then choose the HTML embed option.
3. Click the element, then open its settings and choose Code.
4. Paste the snippet and apply it.

Code Versus Website Address

Wix gives you two modes inside the element. Choosing the right one avoids most errors.

If you have the embed code, use Code. If you only have a link, Website Address works too, although you get less control over the frame.

Size the Flipbook Correctly

A flipbook that is too small feels cramped, and one that is too large pushes content off screen. Wix lets you drag the element handles, and the embed code also carries width and height values.

Recommended Dimensions

Tips for a Clean Layout

• Place the element inside a strip and stretch it to full width for the biggest impact.
• Leave some padding above and below so the flipbook has breathing room.
• Add a short heading above it, such as "Browse the Catalog".
• Avoid stacking two embeds back to back on the same screen.

💡 Pro tip: Use the mobile editor in Wix to set a separate height for phones. A flipbook that looks perfect on desktop can feel tall on a small screen.

Check It on Every Screen

Clicking Preview in the editor is the first test. Do not stop there. Publish the page, then open the live link on a phone and a second browser.

Run through this short checklist:

1. Does the first page appear without a blank frame?
2. Do the page turns work with a swipe on mobile?
3. Does zoom work and return cleanly?
4. Are videos or links inside the flipbook responding?
5. Does the page still load fast?

If you answered yes to all five, you are done.

Fix Common Problems

Even a clean setup can hit small snags. These are the issues people report most, with the fix for each.

The Frame Is Blank

The most likely reason is that you used Website Address with a code snippet, or pasted part of the code. Reopen the element, switch to Code, and paste the full snippet again. Also confirm the flipbook itself is published and not set to private.

The Flipbook Is Cut Off

Increase the height of the Embed HTML element on the canvas. The iframe cannot be larger than its container, so a short element crops the bottom of the book.

It Works in Preview but Not Live

Publish the site after saving your changes. Preview and live versions can differ until you publish. Clear your browser cache if you still see the old state.

It Looks Too Small on Mobile

Switch to the mobile editor and resize the element separately. Wix stores mobile layouts on their own.

⚠️ Warning: Do not paste embed code into a plain text box or a text element. It will show up as visible code instead of rendering. Always use the HTML element.

Real Examples You Can Copy

Seeing how others use the same method makes it easier to picture your own page.

A Photographer's Portfolio

A wedding photographer exports a 30 page portfolio and builds it with the Photography Portfolio tool. On Wix, the flipbook sits in a full width strip on the portfolio page. Visitors see the work in a book format that feels closer to a printed album than a scrolling gallery.

A Cafe Menu

A cafe owner uploads the weekly menu using the Restaurant Menu Creator. When prices change, they replace the PDF in the flipbook dashboard and the Wix page updates by itself. No need to edit the site.

A Boutique Catalog

A small shop publishes a seasonal lookbook with the Interactive Lookbook Designer and places it on the shop landing page above the product grid. Shoppers browse the styled pages first, then click through to buy.

Which Tool Fits Which Page

Extra Features Worth Using

Once the basic embed works, a few options add real value to your Wix page:

• Password protection for client only documents or member content.
• Offline downloads so visitors can save a copy.
• Embedded video and audio inside the pages.
• Analytics and lead generation on the Professional plan, so you see who reads what and capture contacts.
• Unlimited flipbooks on the Standard plan and above, handy if you run many pages.

See the pricing plans to compare what each tier includes.

Keep Your Wix Page Fast

A flipbook should add value, not weight. A few habits keep things quick:

1. Keep PDFs lean by compressing images before upload.
2. Place the flipbook below the fold when the page already has large banners.
3. Use one embed per page whenever possible.
4. Test the page speed after publishing, especially on mobile data.

Ready to Publish Yours

You now have the full routine: prepare the PDF, build the flipbook, copy the embed code, add the Embed HTML element in Wix, paste in Code mode, size it, and test on a phone. Each later flipbook repeats the same few clicks.

Ready to put your first one live? Get started for free on Flipbooks AI, browse all available tools and templates, or compare pricing plans to pick what works for your site.