Step-by-step tutorial for placing a page-turning flipbook on any Squarespace page using a Code Block. Covers plan requirements, embed code, responsive sizing, password protection, mobile testing, and fixes for the most common display problems.
You have a catalog, a menu, or a portfolio sitting in a PDF, and your Squarespace site shows it as a plain download link that nobody clicks. A flipbook fixes that. Visitors read right on the page, turn pages with a swipe, and never leave your site. The tool that makes it work is the Squarespace Code Block, and with a flipbook built in Flipbooks AI, the whole job takes about ten minutes.
This tutorial walks through every step: what you need, where the code goes, how to size it, and how to fix the problems that trip people up.
A Code Block is a content block that accepts raw HTML. Instead of typing text or dropping in an image, you paste a snippet, and Squarespace renders it exactly as written. An embed code from a flipbook platform is one of those snippets. It tells the browser to load your flipbook inside a frame on your page.
A linked PDF opens in a new tab or downloads to the device. On a phone, that often means pinch-zooming a tiny page. An embedded flipbook stays inside your layout, scales to the screen, and keeps people on your site longer.
| Method | Reading experience | Stays on your site | Mobile friendly |
|---|---|---|---|
| PDF download link | Opens separate file | No | Poor |
| Image gallery of pages | Manual scrolling | Yes | Average |
| Embedded flipbook | Page-turning view | Yes | Excellent |
Code Blocks are available on the Business plan and above. Personal plans cannot run custom code. Check this before you build anything, because it is the number one reason the block seems to be missing.
⚠️ If you only see the Markdown block and no Code option, your plan likely does not include custom code. Upgrade under Settings, then Billing.
Gather three things first. This saves backtracking later.
Export at a sensible resolution. For most catalogs, a file between 5 and 25 MB looks sharp and loads quickly. Keep pages in a consistent size, because mixed page sizes make the flip animation look uneven.
Decide whether the flipbook takes the full width of the page or sits beside text. Full width suits catalogs and magazines. A half-width placement works for a sample preview next to a sign-up form.
The embed code does not exist until the flipbook does. The process is short.
💡 Match the flipbook background color to your Squarespace section color. The frame then disappears and the flipbook looks native to the page.
Changes you make after embedding update automatically, so you can fix typos later. Still, set the basics now: logo, color, and the starting page. If your PDF has links or videos, the platform keeps them active, and you can also add audio and video inside pages.
This is the heart of the process. Follow it in order.
The Embed Flipbook on Website tool explains the options if you want to see them before choosing.
✅ Best practice: leave Display Source off. If it stays on, visitors see the raw code instead of your flipbook.
Here is a quick troubleshooting view of what each setting does.
| Setting | What it does | Recommended value |
|---|---|---|
| Display Source | Shows code as text | Off |
| Block width | Sets how wide the frame is | 100% |
| Block height | Sets how tall the frame is | 600 to 800 px desktop |
| Section background | Colors the area around the frame | Match flipbook color |
A frame that is too short crops the pages. One that is too tall leaves a gap. Both look careless.
Squarespace does not auto-resize iframes. Set a fixed height in the embed code, such as height="700". A good rule is to take the width of your content area and multiply by 0.65 for a spread view.
Wrap the iframe in a container with a percentage width, so it shrinks on phones. Many people also add a taller height for mobile using a short style block in Custom CSS.
💡 Open your page on a real phone, not only the browser's preview mode. Real devices reveal toolbar overlap that the preview misses.
| Use case | Placement | Suggested height |
|---|---|---|
| Product catalog | Full-width section | 750 px |
| Restaurant menu | Centered, 80% width | 650 px |
| Photography portfolio | Full-bleed section | 800 px |
Seeing real use cases makes the decision easier.
A restaurant can embed a seasonal menu built with the Restaurant Menu Creator. When the menu changes, they edit the flipbook once and the Squarespace page updates itself, with no new code.
A real estate agent can place a property brochure from the Real Estate Brochure Creator on each listing page. Buyers flip through floor plans and photos without a download.
A photographer can build a gallery with the Photography Portfolio tool, then drop it into a portfolio page. A boutique can use the Product Catalog maker for a wholesale lookbook.
Not every flipbook should be public. Wholesale price lists, client proposals, and internal manuals need protection.
In Flipbooks AI, turn on password protection in the share settings. Visitors enter the password before the pages load. Pair this with a Squarespace member area or a hidden page for extra privacy.
On the Professional plan you can collect emails before readers open the flipbook, and see which pages get the most attention. Review the pricing plans to compare what each tier includes.
| Feature | Standard | Professional |
|---|---|---|
| Unlimited flipbooks | Yes | Yes |
| No watermark | Yes | Yes |
| Password protection | Yes | Yes |
| Analytics | Basic | Detailed |
| Lead generation | No | Yes |
| Offline download | Yes | Yes |
Even a simple embed can misbehave. These are the usual suspects.
Display Source is switched on. Open the block, turn it off, and save.
Check that you copied the entire snippet, including the closing tag. A partial paste produces an empty frame. Also confirm the flipbook is published and not set to private without a password.
Increase the height value, or reduce the number of toolbar buttons in your flipbook settings. Fewer buttons leave more room for the page itself.
Squarespace sometimes hides embeds while editing. Preview the page or visit the live URL. The flipbook loads there.
An embedded frame is not read the same way as page text, so surround it with real words. Add a heading above the flipbook, two or three sentences describing the content, and a text link to the PDF for readers who prefer it.
💡 A flipbook without surrounding text gives search engines little to index. A short intro paragraph solves that in under a minute.
The best part of this setup is maintenance. Because the Code Block loads your flipbook from a live link, you never touch Squarespace again when content changes. Replace the PDF in Flipbooks AI, and the page reflects it at once. Seasonal menus, quarterly catalogs, and updated price lists all stay current with one upload.
Ready to put your first flipbook on your site? Create a free account on Flipbooks AI, upload your PDF, and paste the embed code into a Squarespace Code Block. Browse the full list of flipbook tools to find the right template for your content, and compare pricing plans when you are ready for analytics and lead capture.
