Embedding a flipbook on your website turns static PDFs into interactive, page-turning experiences that keep visitors engaged far longer. This article walks you through the exact steps to grab your embed code, paste it into WordPress, Wix, Squarespace, or any custom HTML site, resize it for mobile, troubleshoot common issues, and go live in minutes.
Pasting a PDF download link into a webpage footer is not a content strategy. Visitors skip it, mobile browsers mishandle it, and you get zero data on whether anyone actually read the document. Embedding a flipbook directly on your page solves all three problems at once, turning a passive file into a live, interactive reading experience that stays inside your site. Flipbooks AI makes the entire process possible in minutes, without writing a single line of custom code.
This article covers exactly how the embed code works, step-by-step instructions for creating and embedding your flipbook, how to do it on WordPress, Wix, Squarespace, and custom HTML sites, responsive sizing tricks, real-world use cases, and the common issues people run into after pasting the code.
Most website owners underestimate how much friction a PDF link creates. A visitor clicks the link, waits for the browser to launch a viewer, potentially gets a download dialog instead of an inline preview, and then has to navigate an entirely different interface to read the content. On mobile, the experience is consistently worse. A significant portion of that audience simply closes the tab.
Inline content, content that lives on the page rather than requiring a separate app or download, gets read far longer and more deeply than linked files. When someone has to leave your website to view a document, you lose control of the experience entirely. You also lose visibility into their behavior. You cannot tell if they read one page or all twenty, whether they stopped at the pricing section, or whether they bounced immediately.
Every visitor who clicks a PDF link and leaves your site is a visitor whose session data, scroll behavior, and return probability disappears from your analytics. An embedded flipbook keeps them on your domain. Their behavior is trackable. If you are running paid traffic to a landing page and that page links to a PDF brochure, every click to that PDF is a conversion signal lost.
An embedded flipbook sits inside your page layout. The visitor never leaves. They flip through pages without any plugin, app, or download. You can track which pages they reached, how long they spent, and whether they completed a lead capture form. That data is available on the Professional plan and changes how you think about your content performance entirely.
| Format | Mobile Experience | Analytics | Stays on Page | Interactive |
|---|---|---|---|---|
| PDF download link | Poor | None | No | No |
| Embedded PDF viewer | Variable | None | Yes | No |
| Embedded Flipbook | Excellent | Full (Pro plan) | Yes | Yes |
| Image gallery | Moderate | Partial | Yes | Limited |
When you publish a flipbook on Flipbooks AI, the platform generates a unique embed snippet for that document. The snippet is a short block of HTML that you copy once and paste wherever you want the flipbook to appear on your site.
The most common embed type uses an iframe element. It creates a sandboxed window inside your page that loads the flipbook from Flipbooks AI's servers. Your page handles the surrounding layout and the iframe handles everything inside the viewer. The code looks like this:
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
width="100%"
height="600"
frameborder="0"
allowfullscreen>
</iframe>
Setting width="100%" tells the iframe to fill its parent container, which is the correct default for almost every layout. The height value is what most people need to adjust based on their specific page design and document proportions.
Some platforms and security configurations block raw iframes in their page editors but allow JavaScript embeds. Flipbooks AI's share panel also provides a script tag version of the embed code that injects the viewer dynamically. Both outputs are available from the Share panel of any flipbook. If the iframe code is blocked by your CMS, switch to the script tag version.
đź’ˇ Always test the embed on a real mobile device or browser DevTools immediately after publishing. What looks correct on a 1440px desktop can overflow or collapse on a 375px phone screen if the parent container has a fixed pixel width.
The process below uses Flipbooks AI. From PDF upload to live embed takes less than five minutes.
Go to flipbooksai.com and create an account if you haven't yet. From the dashboard, click New Flipbook and upload your PDF. The conversion runs automatically. Within seconds you have a page-turning flipbook with your document's full content intact.
At this stage you can customize the flipbook before embedding it:
None of these customizations are required before embedding. Anything you adjust here will reflect in the live embed automatically, even after the embed code is already on your site.
From the flipbook editor, open the Design tab. Options available here include:
This is also where you enable lead capture forms if you are on the Professional plan. The form appears when the reader reaches a specific page you designate, collects name and email, and logs responses to your analytics dashboard automatically.
Open Share from your flipbook's action menu. Select the Embed tab. You will see the iframe code pre-generated for that specific document. Click Copy. The full snippet is now on your clipboard, ready to paste anywhere.
You can adjust the default display dimensions directly in this panel before copying if you already know the size the embed needs to be on your page.
Open your website editor, navigate to the page where the flipbook should appear, and paste the embed code into an HTML block, custom code section, or text editor in source/HTML mode. Save the page and publish. The flipbook is live.
The same embed code works on every platform. The only variable is how you access the HTML editor in each one.
WordPress uses the Gutenberg block editor by default. To embed a flipbook:
If you are using the Classic Editor, switch to the Text tab (not Visual) and paste the code directly into the body at the exact position where you want the flipbook to appear.
âś… Use the Custom HTML block, not the Embed block. The Embed block is designed for social media URLs and video services, not custom iframe code.
⚠️ Squarespace's free plan restricts custom code blocks. If the Code block is grayed out or locked, you will need a Business plan or above to use it.
In Webflow, drag an Embed element from the components panel onto your canvas and paste the code inside it. In any custom HTML site, paste the snippet directly into the page's <body> wherever you want the flipbook to render. No additional configuration is needed on either platform.
| Platform | Where to Find HTML Editor | Block or Element Type |
|---|---|---|
| WordPress | Gutenberg block editor | Custom HTML block |
| Wix | Add panel, Embed section | Custom Embeds widget |
| Squarespace | Section block menu | Code block |
| Webflow | Components panel | Embed element |
| Custom HTML | Page source directly | Paste inside body tag |
| Shopify | Theme code editor | Liquid section or HTML block |
Getting the dimensions right is where most first-time embeds go wrong. The flipbook loads correctly but ends up too small to read or overflows on mobile.
Setting width="100%" is almost always the correct choice. It tells the iframe to fill whatever container it sits inside, which means it adapts automatically to sidebar layouts, full-width sections, and narrow mobile columns.
Height is different. Height does not scale automatically with an iframe by default. A fixed height like height="600" works well on desktop but can leave excessive empty space or clip the flipbook on small screens. The practical options are:
padding-bottom: 56.25% and set the iframe to absolute fill inside it. This scales the height proportionally with width at all screen sizes.For the most reliable mobile behavior, use the aspect ratio padding technique:
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://flipbooksai.com/view/your-flipbook-id"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
This wrapper produces a 16:9 viewer that scales perfectly at every screen width from 320px to 2560px.
Embedding performs better in some contexts than others. These are the use cases that consistently drive the strongest results.
Retailers embed seasonal catalogs, product lookbooks, and collection brochures directly on category pages or landing pages. A visitor browsing a furniture site can flip through the full spring collection without ever leaving the product page. The Digital Catalog Maker and Catalog Flipbook Creator tools on Flipbooks AI are built specifically for this workflow, with templates optimized for product photography layouts.
A PDF menu link buried in the footer is one of the most consistently poor decisions in hospitality web design. Embedding the menu directly on the homepage or a dedicated menu page means visitors see it the moment they arrive, without any additional clicks or downloads. The Restaurant Menu Creator and Menu Flipbook Designer produce templates designed around food photography and clear pricing layouts.
Designers, photographers, and fashion brands embed portfolio flipbooks and editorial lookbooks on their contact or work pages. The interactive page-turn effect makes the presentation feel intentional and polished in a way a static image grid simply cannot replicate. The Interactive Lookbook Designer and Digital Portfolio Creator offer ready-made templates for creative professionals.
Real estate agents embed property brochures directly on listing pages so prospective buyers can flip through floor plans and photography without downloading anything. Corporate marketing teams embed annual reports and investor presentations on their IR pages, creating a more professional impression than a PDF link. The Real Estate Brochure Creator and Annual Report Creator produce publish-ready flipbooks for both use cases.
| Use Case | Recommended Tool | Best Page for the Embed |
|---|---|---|
| Product catalog | Digital Catalog Maker | Products or Shop page |
| Restaurant menu | Restaurant Menu Creator | Menu or Home page |
| Fashion lookbook | Lookbook Flipbook Builder | Collections page |
| Creative portfolio | Digital Portfolio Creator | Work or About page |
| Real estate brochure | Real Estate Brochure Creator | Property listing page |
| Annual report | Annual Report Creator | Investor Relations page |
| Event program | Event Program Maker | Event details page |
| Training manual | Training Manual Flipbook | Resources or HR page |
The most common cause is a mixed content error. If your site runs on HTTPS and the embed URL begins with HTTP, the browser blocks it silently with no visible error message. All Flipbooks AI embed URLs use HTTPS, so this only becomes a problem if you manually altered the src attribute after copying. Double-check the URL starts with https://.
A second common cause is iframe blocking enforced by a WordPress security plugin. Plugins like Wordfence or iThemes Security can restrict iframes from external sources by default. Check your Content Security Policy settings or add Flipbooks AI as a trusted source in your plugin's configuration panel.
If the embed looks correct on desktop but broken on mobile, the parent container likely has a fixed pixel width. Open your browser's DevTools, inspect the element wrapping the iframe, and change its width from a fixed pixel value to 100%. Then confirm the iframe itself also has width="100%".
đź’ˇ Use your browser's DevTools responsive view to simulate phone screen sizes before publishing. It takes thirty seconds and catches sizing problems instantly.
The frameborder="0" attribute in the iframe removes the default browser border. If spacing still appears around the embed, the issue is usually margin or padding set on the parent container in your page's CSS. Use DevTools to identify the element and set margin: 0; padding: 0; on it directly.
Embedding the flipbook is the final step, but the platform gives you significant control over what happens inside the reader once it is live on your site.
| Feature | Free Plan | Standard Plan | Professional Plan |
|---|---|---|---|
| Flipbooks per month | Limited | Unlimited | Unlimited |
| Watermark on viewer | Yes | No | No |
| Custom branding | No | Yes | Yes |
| Password protection | No | Yes | Yes |
| Embed on website | Yes | Yes | Yes |
| Analytics | No | Basic | Full |
| Lead generation forms | No | No | Yes |
| Offline downloads | No | No | Yes |
| Video and audio inside flipbook | No | Yes | Yes |
| Mobile-responsive viewer | Yes | Yes | Yes |
All plans support embedding on your website. The difference is what the experience looks like and what data you collect from it. The Standard plan removes watermarks and adds full branding. The Professional plan adds the analytics dashboard and lead capture features that turn your embedded flipbook from a static display into a measurable conversion asset.
See the full breakdown at flipbooksai.com/pricing to find the right plan.
Embedding a flipbook is one of the fastest, highest-impact changes you can make to a content-heavy page. The setup takes a few minutes, the result works on every device and platform, and the visitor experience is dramatically better than a PDF link.
Get started for free on Flipbooks AI, upload your first PDF, and embed it on your site today. If you already have a specific use case in mind, browse the full tools directory to find the template built for your content type. When you are ready to add analytics, lead capture, and custom branding, compare plans and choose the one that fits your goals.
