3 Ways to Upload a PDF on Squarespace
When you are developing your website for a small business, school, or highlighting your portfolio, you almost always encounter the need to share a PDF. It could be a brochure, contracts, white papers, ebooks, forms, or a beautiful design you created in Adobe Illustrator. But what is the best way to upload your PDF online? Let's take a look at a few methods and how they can best help you.
Method 1: Upload PDF and Set a Standard Link
Let's start with the simplest method: uploading your file and connecting it with a standard link. This can be useful for files you want individuals to download, or if the file is large and needs to open in a new tab.
First, decide what type of link you would like to display.
Text Link: Type the text you want to use for the link (e.g., "Download Brochure"). Highlight the text.
Click the link icon (it looks like a chain link).
In the "Link" field, click "File" and select your uploaded PDF.
Image Link: For an existing image.
Click the image. In the image editor, click the link icon.
Choose "File" and select your PDF.
Image Link: For a new image.
Add an image block. In the image editor, upload the image of your choosing.
Click the “Attach Link“ button. Choose “File“ and select your PDF
Button Link: Add a button block.
Edit the button text.
In the button settings, find the link field. Choose "File" and select your PDF.
Method 2: Display a PDF Directly on Your Website
Unfortunately, Squarespace does not currently have a native application to display a PDF directly on your web page. That said, there are several third-party services that give you the ability to embed a file. Two popular apps are Issuu and Scribd. There are other services available, and each has its own advantages and limitations. Some come with a cost. Overall, with any of these applications, you can typically follow the general steps below.
Set Account: Set up an account with a service such as Issuu or Scribd.
Upload Your PDF: Upload your PDF to the chosen service.
Get the Embed Code: The service will provide you with an embed code (usually an <iframe> tag). Copy this code.
Add a Code Block to Squarespace: In your Squarespace editor, add a "Code" block to the page where you want to display the PDF.
Paste the Embed Code: Paste the copied embed code into the Code block. Make sure the Code Block is set to "HTML."
Bonus Tip: For several services such as Issuu, you can utilize special features such as locking files down so they cannot be downloaded or printed, or even add animations when moving from page to page.
Method 3: Display Links to Multiple Files at Once
What if you need to upload multiple PDFs or files at once and display them? You could use either of the previous methods to upload each file individually, but this can get repetitive and time-consuming. Perhaps you already have a folder structured in your Dropbox or Google Drive. As an alternative, embed an entire folder within your web page and have easier control of your files!
Note: This will require having access to embedding blocks on your website. This is typically not available on the basic plan.
Example on How to Embed from Google Drive:
In your Google Folder, make sure to share access for "Anyone with the link" and set it to "Viewer."
Open the folder you are sharing. From the URL, you are going to extract the ID for the folder. The ID is the last set of characters in the URL.
This is the structure: https://drive.google.com/drive/folders/ThisIsYourID
Now that you have your Folder ID, you will need to embed one of the following iframe codes. The first is to display your files in a list method, the second for a grid method.
List View:
<iframe src="https://drive.google.com/embeddedfolderview?id=ThisIsYourID#list" style="min-height:400px;width:100%;border:none;max-height:900px"></iframe>
Grid View:
<iframe src="https://drive.google.com/embeddedfolderview?id=ThisIsYourID#grid" style="min-height:400px;width:100%;border:none;max-height:900px"></iframe>
Now, on your webpage, add a new code block and insert your code. Be sure the mode is set to HTML.
That's it!
Your folder should now be visible on the page. If you would like to increase the height, change the "min-height" and/or "max-height" within the code block to increase or lower the size to your preference. Just note that you will want to check it looks alright on your mobile platform.
This is a great feature when you are constantly updating, adding, or removing files. You can now just control the files on your Dropbox or Google Drive and automatically update them on your website! Also, you can set permission access on just the folder to users who may not need access to the website itself.
With these tips, you can highlight your files in creative ways.
Have further questions or would like our help to design your Squarespace website? Feel free to reach out for a free consultation!
