Why does the PDF appear blank on iOS or Safari?

Some mobile browsers limit inline PDF rendering. This is normal browser behavior, not a platform bug. Include a fallback link below the embedded viewer so visitors can open the PDF in their native viewer or download it.

How to Embed a PDF on Squarespace

Q: Can Squarespace display multi‑page PDFs?

Yes. Both a Google Drive preview embed and a direct iframe will render multi‑page PDFs with native scrolling. Increase the iframe height so the content is readable—80–90vh is a common fit—and always include a link beneath the viewer for those who prefer a full‑tab experience.

Q: How do I add zoom controls to the Squarespace PDF viewer?

The Google Drive preview embed includes built‑in zoom controls. If you iframe a direct PDF URL, zoom behavior belongs to the browser’s PDF viewer. On touch devices, pinch‑to‑zoom often works; on desktop, the browser’s zoom or opening the file in a new tab provides full controls.

Q: The viewer says it can’t display the document. What’s happening?

The host may block embedding, which prevents the file from showing inside an iframe. Move the PDF to Google Drive and use the preview embed, or host it on Squarespace and iframe the file URL. Ensure the link is HTTPS and publicly accessible.

Q: Can I track PDF views and downloads?

Track clicks on your PDF link as an event in your analytics. For embeds, it’s harder to measure view time, so pair the viewer with a prominent download link and track that click. UTM parameters can attribute downloads by page or campaign.

Q: How do I make the PDF embed responsive?

Set the iframe to width 100% and choose a viewport‑based height such as 70–90vh. This keeps the viewer flexible across devices without creating excessive scroll. If the PDF text is small, allocate more height.

Q: What’s the simplest way to insert a PDF in Squarespace if I don’t need a viewer?

Upload the file via the link editor’s File option and place a Button or Text link to that URL. This is the quickest approach when you only need to provide access or a download.

Overview

You can show a PDF on Squarespace in two clean ways: embed a live viewer right on the page, or link to the file for a quick open/download. Which path you choose depends on what your visitors need.

Inline viewer: Lets people read without leaving the page. Good for brochures, menus, and handbooks.
Direct link: Opens the PDF in a new tab or downloads it. Great for forms or long documents.

If you want the viewer to perfectly match your brand, you can add small visual touches—padding, shadows, rounded corners—using your site’s CSS. See our short guide on styling in Squarespace: Custom CSS examples for Squarespace. And if you plan to gate the PDF behind an email capture, consider a lightweight overlay: Create a popup download on Squarespace.

Squarespace supports embeds via the Code Block. For reference, here’s their official help doc: Using Code Blocks.

Embed and style PDFs instantly with MicroEdits

If you’re not in the mood to futz with code, let MicroEdits do it. MicroEdits is a magic website editor for your existing site. Tell it what you want—add a PDF viewer below the hero, full width, with a soft shadow—and it makes the change. You can preview, share, and roll back in seconds. No dev handoffs. No copy-paste.

Natural language: Describe the change; MicroEdits handles the rest.
Instant: See the PDF appear on your Squarespace page immediately.
Safe: Preview first, publish when ready, revert anytime.
Universal: Works on any site, including Squarespace.

enter any Squarespace site

Use it for quick wins:

Add a PDF viewer to any page section
Tweak the width/height so the document feels right
Polish the container (spacing, border, shadow)
Drop in a fallback link for mobile readers
Integrate analytics or tools like Google Drive sharing links

Method 1: Google Drive viewer

This is the fastest, most reliable way to get a smooth viewer inside Squarespace.

Upload your PDF to Google Drive.
Open the file in Drive and get the embed link: open the preview, choose Open in new window, then pick Embed item to copy the iframe. If you don’t see that, the simple pattern below works too.
In Squarespace, add a Code Block where you want the viewer.
Paste the embed and adjust the size.
Add a fallback link beneath the viewer for mobile browsers.

Clean embed (replace FILE_ID with your Drive file ID):

<!-- Squarespace Code Block -->
<div class="pdf-embed">
  <iframe
    src="https://drive.google.com/file/d/FILE_ID/preview"
    title="PDF preview"
    style="border:0; width:100%; height:min(80vh, 1000px);"
    loading="lazy"
  ></iframe>
</div>
<p class="pdf-fallback" style="margin-top:0.5rem;">
  <a
    href="https://drive.google.com/uc?id=FILE_ID&export=download"
    target="_blank"
    rel="noopener noreferrer"
    >Open or download the PDF</a
  >
</p>

Tips:

Resize: Increase the height value if your PDF is multi-page.
Declutter: If your Drive link includes tracking bits (like usp), you can remove them.
Docs: Google’s viewer accepts preview embeds. See Drive’s sharing guidance: Share files from Google Drive.

Method 2: File upload + inline frame

Prefer to host the PDF on Squarespace? Upload the file, grab its URL, and embed it in an iframe.

Upload the PDF to Squarespace: use the link editor’s File option or any block that lets you attach files. After uploading, copy the file URL. See Squarespace’s file linking help: Add a file to a link.
Add a Code Block where the viewer should appear.
Paste this iframe, replacing the src with your file URL.
Add a fallback link below it.

<!-- Squarespace Code Block -->
<div class="pdf-embed">
  <iframe
    src="https://yourdomain.squarespace.com/s/your-file.pdf"
    title="PDF: Document"
    style="border:0; width:100%; height:min(80vh, 1000px);"
    loading="lazy"
  ></iframe>
</div>
<p class="pdf-fallback" style="margin-top:0.5rem;">
  <a
    href="https://yourdomain.squarespace.com/s/your-file.pdf"
    target="_blank"
    rel="noopener noreferrer"
    >Open the PDF in a new tab</a
  >
</p>

Just want a link (no viewer)? Use a Button block or:

<p>
  <a
    href="https://yourdomain.squarespace.com/s/your-file.pdf"
    target="_blank"
    rel="noopener noreferrer"
    >Download the PDF</a
  >
</p>

Technical reference for iframe attributes: MDN: iframe.

Mobile, accessibility, and SEO

Always offer a fallback link. Some mobile browsers don’t render PDFs inline. The link ensures no one gets stuck.
Use descriptive link text. Prefer Download our 2025 menu (PDF) over Click here.
Give the iframe a title (already in the examples) so screen readers can announce it.
Keep the viewer responsive: width 100%, height in viewport units (like 70–90vh) for comfort.
Consider indexing: If the PDF isn’t meant for search, you can prevent indexing at the file level using an X‑Robots‑Tag header or through server rules. Learn how this works in Google’s guidance: Robots meta tags and X‑Robots‑Tag. If that’s not available, host sensitive PDFs on a service where you control sharing.
Gated downloads: If you want emails before downloads, pair the link with a popup flow: Add a tasteful Squarespace popup.

FAQ

Can Squarespace display multi‑page PDFs?

Yes. Both the Google Drive viewer and a direct iframe will render multi‑page PDFs with native scrolling. Increase the iframe height so the content doesn’t feel cramped—setting height to 80–90vh is a good starting point. Keep a link below the viewer for people who prefer reading in their browser’s full PDF viewer or saving for later.

How do I add zoom controls to the Squarespace PDF viewer?

The Google Drive preview embed includes built‑in zoom. With a direct iframe to a PDF file, zoom depends on the browser’s PDF viewer. On touch devices, pinch‑to‑zoom usually works; on desktop, readers can use the browser’s zoom or open the file in a new tab via your fallback link to access full controls.

Why does the PDF sometimes appear blank on iOS or Safari?

Some mobile browsers limit inline PDF rendering. It’s not a Squarespace issue; it’s how the browser handles embedded PDFs. The fix is simple: always provide a direct link under the viewer. That way, if the embed doesn’t render, visitors can open the PDF in the device’s native viewer or save it.

The viewer says it can’t display the document. What’s happening?

When a host blocks embedding, the browser refuses to show the file inside an iframe. This can happen if the file is on a service that disallows embedding. Move the PDF to Google Drive (and use the preview embed) or host it on Squarespace and use the file’s URL. Make sure the URL is HTTPS and publicly accessible.

Can I track PDF views and downloads?

You can track clicks on your fallback link as an event in your analytics. For embedded viewers, analytics are less direct; consider pairing the viewer with a clearly labeled download link so click tracking captures intent. UTM parameters on the link can help attribute downloads by page or campaign.

How do I make the PDF embed responsive?

Set the iframe’s width to 100% and use a viewport‑based height, for example 70–90vh. That keeps the viewer flexible without causing huge scroll tunnels. If the PDF has small text, err on the taller side and let the page breathe with spacing above and below.

What’s the simplest way to insert a PDF in Squarespace if I don’t need a viewer?

If you only need a download, upload the file via the link editor’s File option and place a Button or Text link to that URL. This is the fastest route for insert PDF Squarespace use cases where viewing in place isn’t necessary.