How to Embed a Flipbook in Squarespace

Adding an interactive flipbook to your Squarespace site transforms static PDF content into an engaging, page-turning experience for your visitors. Whether you're showcasing a product catalog, portfolio, or company brochure, embedding a FlipLink flipbook takes just a few minutes once you know the right approach.

This guide walks you through every step — from grabbing your embed code in FlipLink to pasting it into Squarespace and making sure it looks great on every screen size.

What You Need Before You Start

Before embedding a flipbook, make sure you have the following ready:

• A published FlipLink flipbook — Upload your PDF at go.fliplink.me and publish it. You'll need the embed code or share link from your dashboard.
• A Squarespace Business plan or higher — Code injection and custom code blocks require at least the Business plan. Personal and basic plans do not support embedding custom HTML or iframes.
• Access to your Squarespace site editor — You'll be editing pages directly in the Squarespace page builder.

If you haven't created your flipbook yet, check out our guide on sharing and distribution options to understand all the ways you can share your flipbook once it's ready.

Step 1: Get Your Embed Code from FlipLink

Once your flipbook is published in FlipLink, getting the embed code is straightforward:

1. Log in to your FlipLink dashboard at go.fliplink.me.
2. Open the flipbook you want to embed.
3. Click the Share button.
4. Select the Embed tab.
5. Copy the iframe embed code provided.

The embed code looks something like this:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen>
</iframe>

Keep this code handy — you'll paste it into Squarespace in the next step.

Step 2: Add a Code Block in Squarespace

Squarespace uses a block-based editor, and the Code Block is where you'll paste your flipbook embed code.

1. Open the page where you want the flipbook to appear.
2. Click Edit on the page.
3. Hover over the section where you want to place the flipbook and click the insert point (the line with a plus icon).
4. Select Code from the block options. If you don't see it, search for “Code” in the block picker.
5. Paste your FlipLink iframe embed code into the code block.
6. Uncheck the “Display Source” option — this is critical. If Display Source is checked, Squarespace will show the raw HTML as text instead of rendering the flipbook.
7. Click Save and then exit the editor to preview your page.

Your flipbook should now appear directly on the page, complete with interactive page-turning animations.

Step 3: Make the Flipbook Responsive

The default embed code works well on desktop, but you'll want to ensure it scales properly on tablets and mobile devices. Here's an improved version of the embed code with responsive styling:

<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allowfullscreen>
  </iframe>
</div>

The padding-bottom: 75% creates a 4:3 aspect ratio container. Adjust this value based on your flipbook's dimensions:

• 4:3 ratio (landscape): padding-bottom: 75%
• 16:9 ratio (widescreen): padding-bottom: 56.25%
• 3:4 ratio (portrait): padding-bottom: 133%
• 1:1 ratio (square): padding-bottom: 100%

This technique is called the “aspect ratio box” method. The iframe fills its container perfectly, and the container scales fluidly with the page width.

Step 4: Configure Domain Whitelisting

If you've enabled domain whitelisting on your flipbook for security, you need to add your Squarespace domain to the allowed list. Otherwise, the embed will be blocked from loading.

1. In your FlipLink dashboard, open the flipbook settings.
2. Navigate to the Domain Whitelisting section.
3. Add your Squarespace domain (e.g., www.yourdomain.com or yourdomain.squarespace.com).
4. Save the settings.

Domain whitelisting is optional but recommended if you want to prevent others from embedding your flipbook on unauthorized websites. It ensures your content only appears where you intend it to.

Using Squarespace Code Injection (Site-Wide)

If you want a flipbook to appear on every page — for example, in a footer or header area — you can use Squarespace's Code Injection feature instead of individual code blocks.

1. Go to Settings → Advanced → Code Injection.
2. Paste your embed code in the Footer field (or Header, depending on placement).
3. Wrap it in a container div with appropriate styling to control its position.
4. Click Save.

This approach is useful for site-wide banners or persistent flipbook widgets, though for most use cases, a code block on a specific page is the better choice.

Alternative Approaches

Not every situation calls for a full iframe embed. Here are two simpler alternatives that work on any Squarespace plan, including Personal:

Link Block with Thumbnail

Instead of embedding the flipbook directly, add a visual link that opens the flipbook in a new tab:

1. Take a screenshot of your flipbook's cover page.
2. Add an Image Block to your Squarespace page with the screenshot.
3. Add a link to the image pointing to your FlipLink share URL.
4. Set the link to open in a new window.

This approach works on every Squarespace plan and gives you full control over the visual presentation. Visitors click the cover image and get the full flipbook experience in a new tab.

Button Block

For a cleaner, call-to-action style approach:

1. Add a Button Block to your page.
2. Set the button text to something like “View Our Catalog” or “Read the Brochure.”
3. Link it to your FlipLink share URL.
4. Set it to open in a new tab.

This is the simplest method and works reliably across all plans and devices.

Troubleshooting Common Issues

The flipbook doesn't appear after saving

Make sure you unchecked “Display Source” in the code block settings. When this option is enabled, Squarespace renders the code as plain text rather than executing it.

The embed is blocked or shows a blank frame

Check your domain whitelisting settings in FlipLink. If whitelisting is enabled, your Squarespace domain must be on the allowed list. Also verify that your Squarespace plan supports code blocks — you need Business or higher.

The flipbook is cut off on mobile

Use the responsive wrapper shown in Step 3. The aspect ratio box technique ensures the iframe scales properly. If you're still seeing issues, try reducing the padding-bottom percentage slightly to fit the mobile viewport better.

Squarespace says “Upgrade to use custom code”

Code blocks and code injection are only available on Squarespace Business, Commerce Basic, and Commerce Advanced plans. If you're on a Personal plan, use the link block or button block alternatives described above.

Tips for the Best Experience

• Choose the right page placement. Place your flipbook in a full-width section for maximum impact. Avoid embedding it in narrow sidebars where the page-turning experience feels cramped.
• Set a meaningful height. If you're not using the responsive wrapper, set the iframe height to at least 600px for desktop. Anything less makes reading uncomfortable.
• Add context around the embed. Include a heading and brief description above the flipbook so visitors understand what they're looking at before they start flipping pages.
• Test on multiple devices. Preview your page on desktop, tablet, and mobile before publishing. Squarespace's built-in device preview makes this easy.

Related Resources

If you're embedding flipbooks on other platforms, these guides may help:

• How to Embed a PDF on Any Website
• How to Embed a Flipbook in WordPress
• How to Embed a Flipbook with an Iframe

Start Embedding Your Flipbook Today

Creating and embedding a flipbook on Squarespace takes just minutes with FlipLink. Upload your PDF, grab the embed code, and drop it into a Squarespace code block — your visitors get a polished, interactive reading experience without leaving your site.

Create your free flipbook on FlipLink and start embedding it on your Squarespace site today. Check out our pricing page to see what's included with every plan.