How to Embed a PDF on a Website (Interactive Flipbook Method)

The standard way to embed a PDF shows a grey scrollable box. This guide shows you how to embed it as a beautiful, interactive flipbook instead.

Most website builders let you "embed" a PDF — but the result is usually a plain grey scroll box that looks broken on mobile. A better approach is to convert your PDF to a flipbook first, then embed the flipbook. The result is a full-width, interactive page-turn experience that works perfectly on phones, tablets, and desktops.

Step-by-step guide

1

Convert your PDF to a flipbook

Sign up at pdfonweb.com and upload your PDF. Within 60 seconds your PDF is a live flipbook at your own URL.

Free to start — no credit card required.
2

Get your embed code

From your dashboard, click the share icon on your flipbook card. Copy the iframe embed code — it looks like:

You can adjust the height value to fit your page layout.
3

Paste the embed code into your website

Go to your website editor. Find the section where you want the flipbook. Insert an HTML block (or custom code block) and paste the iframe code.

On WordPress: use a Custom HTML block. On Squarespace: use a Code block. On Wix: use an HTML iFrame element.
4

Publish your page

Preview your page to confirm the flipbook loads correctly, then publish. Your visitors will see the full interactive flipbook — no PDF download required.

Test on mobile too — the flipbook viewer is fully responsive.

Frequently asked questions

Does this work on WordPress?
Yes. Use the Custom HTML block in the Gutenberg editor and paste the iframe code. It works on all WordPress themes.
Does this work on Squarespace, Wix, or Webflow?
Yes. All three support custom HTML/code blocks where you can paste the iframe. The flipbook will display correctly on all screen sizes.
Will the embedded flipbook work on mobile?
Yes. The pdfonweb viewer is fully responsive and touch-friendly. It works in all modern mobile browsers.
What height should I set the iframe?
600px works well for most layouts. For landscape-oriented PDFs, 500px is a good starting point. You can use height:100vh for a full-screen embed.
Do my website visitors need to download anything?
No. The flipbook loads entirely in the browser — no PDF download, no plugin, no app required.

Try it free — no credit card needed

Create your first flipbook in under 2 minutes. 45-day free trial, no credit card.

Get started free