How to Embed a PDF in Squarespace
Learn how to embed a PDF in your Squarespace website using code blocks, file links, and third-party viewers. Step-by-step guide.
Squarespace does not have a native PDF embed block, but there are several reliable ways to display a PDF directly on your Squarespace page. Embedding a PDF is useful for a wide range of purposes: photographers and designers use it to showcase portfolios, restaurants display menus that update seasonally, businesses publish return policies or terms of service, and retailers share product catalogs. Rather than forcing visitors to download a file and open it separately, an embedded PDF keeps them on your site and lets them read the content immediately.
Method 1: Use a Code Block with an Iframe
This is the most common approach. You need a publicly accessible URL for your PDF.
- Upload your PDF to a hosting service like Linkyhost to get a direct link
- In your Squarespace page editor, add a Code Block
- Paste this code:
<iframe src="YOUR_PDF_URL" width="100%" height="600px" style="border: none;"></iframe>
- Replace
YOUR_PDF_URLwith your actual PDF link - Save and publish
Method 2: Use Google Docs Viewer
If you have the PDF hosted somewhere, you can use Google's document viewer:
<iframe src="https://docs.google.com/viewer?url=YOUR_PDF_URL&embedded=true" width="100%" height="600px" style="border: none;"></iframe>
This works well but occasionally loads slowly depending on file size. Google Docs Viewer also strips some formatting on complex layouts, so test your specific PDF before relying on it.
Method 3: Link to the PDF
The simplest approach is adding a download link:
- Upload the PDF through Squarespace's file manager or use an external host
- Add a Button Block or Text Link pointing to the PDF URL
- Visitors click to view or download the file
Method 4: Use Linkyhost's PDF Viewer
Upload your PDF to Linkyhost to get a link with a built-in viewer. Then embed that viewer link in an iframe on your Squarespace page. This gives your visitors a clean reading experience without leaving your site. The viewer is responsive out of the box, so it adjusts to different screen sizes without additional CSS work on your end.
Tips
- File size matters -- Keep PDFs under 10 MB for fast loading. Use a PDF compressor if your file is too large.
- Mobile responsiveness -- Test the embed on mobile devices after publishing
- Accessibility -- Add a text link alongside the embed so users can download the file directly
Squarespace's code block approach works on all plan levels, making iframe embeds the most flexible option for displaying PDFs on your site.
Common Mistakes to Avoid
Uploading oversized PDFs directly to Squarespace. Squarespace file hosting has limits and large files load slowly. Compress your PDF with a PDF compressor before uploading, or host it externally on Linkyhost for better performance.
Forgetting to set iframe height correctly. An iframe that is too short requires viewers to scroll inside a scrollable area, which is frustrating on mobile. Set the height to match your content -- 600-800px works for most single-page PDFs. For multi-page documents, 800px or more is better.
Not testing on mobile devices. Iframes behave differently on phones and tablets. Some mobile browsers restrict iframe scrolling or zoom. After embedding, test on both iOS and Android to confirm the PDF is readable and scrollable.
Using Squarespace's built-in file upload for large PDFs. Squarespace's file hosting is designed for downloads, not in-page viewing. For embedded PDF viewing, host the file externally and use an iframe. This also keeps your Squarespace storage allocation free for other assets.
Not providing an alternative download link. Some users prefer to download the PDF rather than read it in an embed. Always include a text link or button below the iframe that lets visitors download or open the PDF in a new tab.
Embedding Methods Comparison
| Method | Ease of Setup | Mobile Support | Viewer Quality | Loading Speed |
|---|---|---|---|---|
| Iframe with hosted PDF | Easy | Good | Depends on host | Fast (external) |
| Google Docs Viewer | Easy | Fair | Basic | Variable |
| Linkyhost viewer embed | Easy | Excellent | Clean, responsive | Fast |
| Download link only | Simplest | N/A | N/A | Instant |
Advanced: Responsive Iframe
To make your PDF embed responsive on all screen sizes, use this CSS approach in a Squarespace Code Block:
<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
<iframe src="YOUR_PDF_URL" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"></iframe>
</div>
This maintains the aspect ratio across screen sizes, preventing the embed from being too tall or too short on different devices.
Frequently Asked Questions
Can I embed a PDF on a Squarespace blog post?
Yes. The same code block method works on blog posts. Add a Code Block to your blog post editor, paste the iframe code with your PDF URL, and publish. The embed will appear inline within the blog post content.
Does embedding a PDF affect my Squarespace SEO?
Content inside an iframe is not indexed by search engines as part of your page. If the PDF content is important for SEO, add a text summary above or below the embed. This gives search engines something to index while providing visitors with the full document viewer.
Can I password protect an embedded PDF?
Yes. Host your PDF on Linkyhost with password protection enabled. When visitors encounter the embed on your Squarespace page, they will be prompted to enter a password before viewing the document. This is useful for client-only content, paid resources, or confidential materials.
Can I embed a multi-page PDF in Squarespace?
Yes. Multi-page PDFs work with all of the methods listed above. The iframe and viewer approaches display the full document with scrollable pages. For long documents, increase the iframe height to 800px or more so visitors can read comfortably without excessive scrolling within the frame. If you use the Linkyhost viewer, multi-page PDFs get a built-in page navigation bar that lets readers jump between pages.
How do I track views on my embedded PDF?
Squarespace Analytics tracks page visits but does not report on interactions within embedded content. To track how many people actually view the PDF, host it on Linkyhost and enable link tracking. This gives you a view count, timestamps, and device information for each visitor who opens the document, independent of your Squarespace page analytics.