• Pricing
  1. Home
  2. Embed PDF
  3. How To Embed PDF
  4. Adding a PDF Icon to Squarespace
embed-pdf-squarespace@2x

Adding a PDF Icon to Squarespace

by Olivia Baker

You can also read this article in German, Spanish, French, Italian, Portuguese and Russian.

Learn how to embed PDFs on your Squarespace site with inline viewers using Smallpdf’s free tool. No downloads required for visitors.

On Squarespace, there’s an important difference between linking to a PDF and embedding one. A standard link simply lets visitors open a PDF in a new tab or download it, which pulls them away from your page. Embedding means the document appears directly on the page itself, so visitors can view it without leaving your site.

With Smallpdf’s free Embed PDF tool, you can easily display a PDF inline on your page rather than sending visitors elsewhere. We’ll show you how.

Quick Start to Embed a PDF in Squarespace

Here’s the fastest way to add a PDF to your Squarespace site using Smallpdf:

  1. Copy the URL of the PDF file you want to use.
  2. Go to our Embed PDF tool.
  3. Paste the URL for your PDF into the provided space and click “Generate code.”
  4. Preview the embedded PDF to see how it behaves.
  5. From the popup, click “Copy code.”
  6. On your Squarespace page, hover over where you want your PDF and click the “+” symbol.
  7. Select “Code” from the content blocks menu.
  8. Paste the copied code and click “Apply.”
  9. Drag and drop to position your embedded PDF exactly where you want it.

How easy was that? And best of all, you can add as many links as you want or update your existing files. Just go through each step again and watch your website transform.

Ways To Add a PDF to Squarespace

You’ve got several options for adding PDFs to your Squarespace site. Each method works differently, so let’s break down when to use each one:

Smallpdf Embed PDF Tool

  • What it is: Our free tool generates embed code that displays your PDF directly on the page.
  • When to use: Best when you want visitors to view a PDF inline on your Squarespace site without opening a new tab. Ideal for documents like brochures, menus, or reference files where staying on the page matters.
  • Pros: Displays PDFs directly on your site. Works with any PDF size. Includes built-in security features.
  • Cons: Requires copying and pasting HTML code into a Code block.

Squarespace Native File Link (Button or Text)

  • What it is: Upload your PDF directly to Squarespace and create a download link or button.
  • When to use: Best for simple downloads when you don’t need inline viewing or editing features.
  • Pros: No external tools needed. Simple upload process. Clean integration with Squarespace design.
  • Cons: 20 MB file size limit. Files open in a new tab for download rather than inline viewing. No editing capabilities for visitors.

Gallery Slideshow (Images From Your PDF)

  • What it is: Convert your PDF pages to images and display them in a Squarespace gallery.
  • When to use: Great for visual documents like portfolios, catalogs, or presentations where you want a polished gallery look.
  • Pros: Beautiful visual presentation. Fast loading. Mobile-friendly galleries.
  • Cons: Text isn’t searchable or selectable. Extra step to convert PDF to images. No download option for original PDF.

Pro tip: Icon links open in new tabs, keeping visitors on your main site. Inline viewers keep everything on one page, which can improve engagement and time on site.

Step-by-Step: Create an Inline Viewer With Smallpdf

Let’s walk through the complete process of adding a PDF to your Squarespace site using Smallpdf’s tool.

Generate Your Viewer Code in Smallpdf

  1. Head to our Embed PDF tool and paste your PDF URL into the field.
  2. Copy the generated embed code by clicking “Copy Code.”
  3. In your Squarespace editor, hover over the area where you want your PDF and click the “+” symbol.
  4. Select “Code” from the content blocks menu. This is where you’ll paste your HTML code.
  5. Paste your copied code and click “Apply.”

Pro tip: Make sure you’re using a Code block, not a Text block. Code blocks are specifically designed for HTML and will render your PDF properly.

Test Placement and Behavior (New Tab vs Inline)

  1. Preview your page to see how your PDF displays and behaves.
  2. Test both desktop and mobile views. Inline viewers are responsive and adapt to screen size.
  3. If needed, drag and drop your PDF block to reposition it anywhere on your page.

Squarespace File Basics (20 MB Limit, Opening Behavior)

Before diving deeper into PDF customization, here’s what you need to know about how Squarespace handles files natively:

  • File size limit: Squarespace caps uploads at 20 MB per file.
  • Supported formats: PDF, DOC, DOCX, TXT, and most common file types work.
  • Opening behavior: Native file links typically open in new tabs for download.
  • CDN hosting: Squarespace’s content delivery network (CDN) hosts your files for fast global access.
  • File URLs: Once uploaded, files get permanent URLs you can link to from anywhere.
  • Mobile experience: File downloads work differently on mobile. Some devices preview in-browser, others download directly.

If you’re hitting the 20 MB limit or want more control over how your PDFs display, that’s where Smallpdf’s embed tool offers more.

Why Use Smallpdf for Squarespace PDFs (Speed, UX, Security)

While Squarespace’s native file uploads work great for simple downloads, Smallpdf’s embed tool offers several advantages that can improve your site’s user experience:

  • No file size limits: Embed PDFs of any size without worrying about Squarespace’s 20 MB cap.
  • Inline viewing: Display PDFs directly on your page so visitors can read them without leaving your site.
  • Better engagement: Embedded PDFs keep visitors on the page, which can help reduce unnecessary navigation away from your content.
  • Secure viewing: Get built-in privacy controls and secure access without forcing immediate downloads.
  • Mobile optimization: Responsive embeds adapt smoothly across devices.
  • Brand consistency: PDFs appear within your site layout instead of opening in a separate browser tab.

Best Practices for Fast, Readable PDFs on Squarespace

Want to ensure your PDFs load quickly and look great? Follow these optimization tips:

  • Compress before uploading: Use our compress tool to reduce file sizes without losing quality.
  • Use descriptive filenames: “2024-product-catalog.pdf” is better than “document1.pdf” for both users and search engines.
  • Test mobile responsiveness: Always preview how your PDFs display on phones and tablets.
  • Consider lazy loading: Place large PDFs lower on the page so they don’t slow initial page load.
  • Optimize for search: PDFs with searchable text perform better. Our OCR feature can help with scanned documents
  • Provide context: Add a brief description of what’s in each PDF so visitors know what to expect

Edit, Update, and Share Your PDFs Without Re-Building Pages

With Smallpdf’s full suite of 30+ PDF tools, we’re sure all of your PDF needs will be met before and after you use the Embed PDF tool to display files on your website.

You don’t need to install anything or sign in to prepare your PDF. Once embedded, visitors can view the document directly on your site or download a copy if needed.

Need to update a PDF that’s already embedded on your site? Here’s the beauty of using URL-based embeds:

  • Update your original PDF file at the same URL location
  • The embedded version automatically reflects your changes, so there’s no need to update embed codes.
  • If you need to change the URL, simply replace the embed code with a new one from our tool.
  • Your page layout and design stay intact while the content updates seamlessly.

This version control approach saves tons of time compared to re-uploading files and updating multiple links across your site.

Frequently Asked Questions

What’s the difference between linking to a PDF and embedding one in Squarespace?

Linking sends visitors to a new tab or triggers a download when they open a PDF. Embedding displays the PDF directly on the page, allowing visitors to read it without leaving your site.

Does the Smallpdf Embed PDF tool let visitors edit or sign PDFs?

No. The Embed PDF tool is for viewing only. Visitors can read the PDF inline and download it if needed, but editing and signing are not available within the embedded view.

Does the Smallpdf Embed PDF tool cost anything to use?

The Embed PDF tool is free to use. You can generate embed code and display PDFs on your Squarespace site without paying or signing up.

Do embedded PDFs work on mobile devices?

Yes. Embedded PDFs are responsive and adapt to different screen sizes, making them readable on both desktop and mobile devices.

Is there a file size limit when embedding a PDF with Smallpdf?

No. Unlike Squarespace’s native file uploads, the Embed PDF tool does not impose a 20 MB file size limit.

Olivia Baker
Olivia Baker
Content Writer