How to embed PDF on Squarespace: A complete tutorial
Are you looking to enhance your Squarespace site by embedding PDFs? PDFs allow for a polished, easy-to-share format that can improve user experience by letting visitors view, interact with, and download documents directly on your site. While Squarespace doesn’t offer native support for embedding PDFs, there are multiple effective solutions to display PDFs in a user-friendly way without requiring visitors to leave your page. In this guide, we’ll cover all the methods—from basic links to advanced pop-up viewers—so you can choose the best way to integrate PDFs into your Squarespace website.
Why embed PDFs on Squarespace?
PDFs are a fantastic way to share detailed information in a clean, universal format. Whether it’s for sharing brochures, guides, eBooks, or price lists, embedding PDFs on your Squarespace site keeps visitors engaged by allowing them to access valuable content without redirecting to another tab.
Limitations with Squarespace’s default PDF options
Similar to Wordpress, Squarespace lacks a built-in PDF embed feature. You can upload a PDF and link to it from a button or text, but by default, this only opens the file in a new tab using the browser’s native PDF viewer. While functional, this approach risks losing visitor engagement if they don’t return to your website after viewing the PDF. To keep users on your site, consider a PDF viewer that embeds the document directly on your page.
How People are using PDFs on Squarespace websites
A quick Google search reveals that using PDFs as links on Squarespace is a popular choice, yielding over 1.4 million results. Here are some examples of effective PDF integration:
Source serpapi.com
Saraghina: A restaurant that embeds a PDF link in its navigation to display the online menu.
Black Barn Restaurant: A Manhattan bar that uses PDFs to showcase its tavern, dinner, brunch, and lunch menus.
Lenox Hill: A charity website that displays its activity calendar in PDF format.
How to embed PDF on Squarespace
Upload a PDF to Squarespace
Squarespace doesn’t have a dedicated PDF file management area. Instead, PDFs are handled within the Link Editor, which you can access when adding a link to elements like text, buttons, navigation, or images.
Here’s how to upload PDF files using a text link or button as entry points to the Link Editor (Pro tip: there are multiple entry points to access it)
1) Insert a link: In the Squarespace editor, navigate to any page and add a button or hyperlink. Press Attach Link on button or clicking the link icon on the text to open the Link Editor
2) Upload the PDF: Switch the link type to File in the Link Editor and upload your PDF file there
3) Select the file: After the upload finished, you now can use checkbox next to the file to select it. By default Squarespace will generate a URL starting with /s/ (e.g., /s/sample-file.pdf). You can use this URL for embedding or sharing.
4) Share the file externally: if you want to share the PDF externally, add your primary domain to the above link (e.g., https://yourdomain.com/s/sample-file.pdf)
At this point, your PDF is available online, and it ready for embedding or linking
Note to readers:
Squarespace limit file size upload to 20MB, so make sure your PDF files are under this size
While the Squarespace PDFs are available via /s/ pathname, all PDFs and other static assets is stored on Squarespace server at static1.squarespace.com, the /s/ pathname is actually a 301 redirection to the real static assets URLs
Please note that most static assets uploaded to Squarespace are not private by default. If you require DRM protection for your PDFs, you will need to explore alternative solutions that support password-protected PDF files.
If a PDF uploaded to your Squarespace site was indexed by Google and remains accessible via Squarespace’s CDN after deletion, you can email [email protected] to request permanent removal from their server. They respond quickly, and once removed, Google will update search listings within a few days, clearing the PDF’s content from search results.
For more details, visit Squarespace's support page on file removal.
Embed PDF on Squarespace
Direct link to the PDF
After uploading PDFs to Squarespace with Link Editor, you can link to the file directly after selecting it in the file list. The PDF then can be open in a browser tab and will be displayed on the native browser PDF viewer.
Note that on mobile, your user might need to download the PDF viewer app to view the downloaded PDF files.
Lightbox PDF viewers for Squarespace
If you’re looking for a more integrated solution, Lightbox Studio offers a feature for viewing PDFs in a pop-up or “lightbox” directly on your Squarespace page. This approach keeps users on your site and provides an interactive viewing experience. For this method to work, follow these steps:
Step 1 - Install Lightbox Studio
Step 2 - Upload PDF file to your Squarespace
Step 3 - Create a text or button link to your PDF file, make sure “Open link in new tab“ is un-checked
Step 4 - Now your PDF file can be open in lightbox by default
You can view the sample PDF lightbox on this page
Different Squarespace PDF viewers supported
Lightbox Studio support different Squarespace PDF viewers so you can choose the best display of your PDF document
| Viewer | Description | Supported Themes | Customizations |
|---|---|---|---|
| Basic | Uses Google Drive Viewer. Minimal bandwidth impact but may require several tries to display. | Not available | None |
| Native | Utilizes the browser’s native PDF viewer, with appearance varying by browser. | Not available | None |
| Standard | Uses Firefox’s default PDF viewer, providing a consistent look. | Light, Dark | Most customizable option |
| Express | A stylized version of the Standard viewer, though customization options are limited. | Light, Dark | Limited |
| Fusion | Similar to Express, with extra display tweaks for a unique viewing experience. | Light, Dark | Limited |
Unlimited bandwidth for Embed PDF on Squarespace
Currently, uploaded PDFs on Squarespace cannot be embedded directly; they can only be linked for users to open or download. To enable Squarespace PDF pop-ups in Lightbox Studio, we will implement a proxy using Beyondspace infrastructure. This service will be provided at no additional cost. However, please note that if there is a significant increase in usage of this feature, it may lead to burst traffic and potential service disruptions.
In the event that you have a large number of files or experience high traffic, I will reach out to discuss alternative methods for proxying your PDFs. Some options include utilizing different Image CDN services, such as:
Imgix: Free for up to 1,000 files and 100GB of traffic.
ImageKit or Gumlet: Unlimited files with lower traffic limits (25GB - 30GB).
If you opt for the Basic Viewer, which offers fewer features and customization options with a more generic appearance, you can achieve truly unlimited traffic since the viewer is provided by Google. However, please be aware that this viewer may not always function consistently, and it may take several attempts to successfully display the PDF pop-up.
Customizing the Viewer with URL Parameters
Lightbox Studio uses Lightboxify URLs, which allow additional customization of the PDF pop-up. Use these parameters in the URL to tailor the experience:
| Parameter | Options | Description |
|---|---|---|
| viewer | basic, native, standard, express, fusion |
Choose the desired viewer style. |
| theme | light, dark |
Switch the viewer's color theme. Available for all viewers except Basic and Native. |
| lightboxify | true, false |
Set to false or 0 to open the PDF in a new tab instead of the lightbox. By default, it opens in a lightbox. |
| width | 1200 |
Set default width of the viewer, default is 1200 |
| height | 1200 |
Set default height of the viewer, default is 1200 |
How to use URL Parameters
URL parameters begin with a question mark (?), followed by the parameter and its value. For example:
/s/file.pdf?viewer=basic
If you are adding multiple parameters to the same embed code, separate them with ampersands (&). For example:
/s/file.pdf?viewer=standard&theme=light
In this configuration:
viewer=standarduse the Firefox standard PDF viewer for the PDFtheme=lightuse the light theme for the viewer
Alternative PDF embedding methods
If you're open to uploading your PDF to a third-party service, there are several reliable options to embed PDFs in Squarespace.
Elfsight PDF Viewer
Elfsight offers a versatile PDF viewer widget, part of its catalog of over 80 customizable widgets, from social feeds to eCommerce tools. Known for its ease of use, the PDF widget includes a visual embed builder, design customization, and compatibility across website platforms.
Common Ninja PDF Embed
Similar to Elfsight, Common Ninja provides a no-code PDF Embed widget. This tool allows you to create a PDF gallery or embed single PDFs with customizable display options, ideal for those wanting a quick, code-free setup.
POWr PDF Embed
POWr's free PDF embedder lets you design and customize a PDF display widget. This straightforward tool is compatible with various platforms and enables easy embedding without advanced setup.
Adobe View SDK
The Adobe View SDK allows for advanced PDF embedding with customizable display features, providing users a seamless, immersive PDF viewing experience. To use this SDK, you’ll need an API key bound to your domain (limited to one domain per key).
Google Drive PDF Embed
Upload PDFs to Google Drive, then use its built-in embed feature to generate an iframe snippet. This snippet can be pasted into Squarespace’s Code block for simple PDF display.
Embedding PDF Viewer snippets in Squarespace
Once you've selected and configured a PDF viewer tool, embedding it on your Squarespace site is straightforward. Simply obtain the embed snippet from your chosen service, add a Code block in the Squarespace editor, and paste the snippet. Save your page, and your PDF should display seamlessly.
Conclusion
Embedding PDFs on Squarespace is a flexible process, whether you're using Squarespace’s native linking options, Lightbox Studio, or a third-party widget. Each method offers different advantages, from seamless native viewing to fully customizable, interactive displays. Choose the approach that best suits your site’s needs and your audience's viewing preferences.
