How to Embed PDFs on Your Website the Right Way

30 November 2025

Dropping a PDF into an iframe might technically “work”, but it rarely looks good. It’s clunky, hard to navigate on mobile, and offers almost no insight into how people actually read your content.

In this post, we’ll walk through how to turn a regular PDF into an interactive flipbook using FlowPaper, then embed it into a website (using Squarespace as an example). We’ll also look at how FlowPaper helps you protect your content and track how readers engage with your documents.

Why Not Just Embed a PDF in an iFrame?

Traditional PDF embedding usually means using an iframe or a built-in browser PDF viewer. That approach comes with a few big drawbacks:

• Limited control over the reading experience.
• Awkward behaviour on mobile and smaller screens.
• No meaningful analytics (you only know that someone opened the file).
• No built-in way to protect your content from being reused elsewhere.

FlowPaper takes a different approach by converting your PDF into a flipbook-style publication that you can embed as part of your page, with interactive navigation and reader analytics.

Step 1: Import Your PDF into FlowPaper

Start by opening FlowPaper and importing your PDF file. Once uploaded, FlowPaper converts it into an interactive publication using the template you’ve selected (for example, a flipbook layout).

You can tweak a range of settings at this stage, such as viewer style and behaviour. For this walkthrough, we’ll keep things simple and focus on getting your PDF online as a flipbook.

When you’re ready, head up to Publish and select Cloud hosted.

Step 2: Upload & Get Your Embed Code

Once you’ve chosen Cloud hosted, FlowPaper processes your publication and prepares it for online use.

1. Click Start upload to upload your publication to FlowPaper Cloud.
2. Wait for the upload to finish (this usually takes only a few seconds).
3. After processing, FlowPaper shows you:
   • A unique URL for your publication.
   • An HTML embed code you can use on your website.

Copy the embed code displayed beneath the publication URL—this is what you’ll paste into your website builder.

Step 3: Embed the Flipbook in Squarespace

For this example, we’ll embed the FlowPaper flipbook into a Squarespace page using a Code block.

1. Open the page in the Squarespace editor where you want your publication to appear.
2. Scroll down to the area where you’d like to add the flipbook.
3. Click Add section and choose Blank section for a clean layout.
4. Inside that section, click Add block and choose Code.
5. Squarespace will insert a code block pre-filled with Hello world. Resize the block if needed.
6. Go back to FlowPaper and copy the embed code for your publication.
7. Return to Squarespace, click Edit on the Code block, and replace the default text with your FlowPaper embed code.
8. Click outside the block or hit Apply, then Save and exit edit mode.

Once you view the page in preview or live mode, you should see your FlowPaper flipbook embedded below your main content, ready to scroll through and interact with.

Protecting Your Publications with “Protected Embed”

One of the major benefits of embedding via FlowPaper instead of a raw PDF is the option to protect where and how your content can be used.

In the FlowPaper publishing form, you’ll find a section called Publication protection. It offers:

• Password protection for restricting access.
• Protected embed, which ensures your flipbook can only be embedded from approved URLs.

Protected embed works by checking the URL where your publication is loaded. If it doesn’t match the URL(s) you’ve allowed, the publication won’t display. This prevents other sites from embedding your content or linking directly to it outside your website.

To enable protected embed for a Squarespace site, you would, for example:

1. Copy the first part of your Squarespace URL (your site’s base address).
2. Paste that into the Protected embed field in FlowPaper.
3. Re-upload your publication with the updated settings.

From that point on, your flipbook is protected and can only be used from the URL(s) you’ve specified.

Go Beyond Simple Views with Analytics & Heat Maps

Standard PDFs don’t tell you much. At best, you might know that someone clicked a link to your file—but you have no idea:

• How long they spent reading.
• Which pages they focused on.
• Which sections they clicked or interacted with.

FlowPaper provides a suite of document analytics so you can understand how people actually use your content. In your FlowPaper account you can access:

• Heat maps: Visual overlays that show where readers spend time and where they click inside your publication.
• Per-page reading time: See which pages hold attention and which are skimmed past.
• Clicks and reads per session: Understand engagement levels across all your publications.

This is particularly valuable for marketing materials, catalogues, reports, and any document where engagement and performance matter.

Bring Your PDFs to Life

Instead of treating PDFs as static downloads, FlowPaper turns them into interactive, embeddable experiences that look great inside your website, are harder to misuse, and give you real insight into reader behaviour.

Whether you’re adding a catalogue to a Squarespace site, publishing brochures on a marketing page, or embedding reports into a client portal, FlowPaper helps you:

• Deliver a smoother reading experience than a basic PDF viewer.
• Protect your publications with features like Protected embed.
• Track engagement with analytics and heat maps.