How to Embed a PDF on Squarespace (Because Squarespace's Method Sucks)
Updated March, 2020
A few weeks ago, I was trying to embed a PDF on a client’s Squarespace site. She’s a film production designer (so cool!) and wanted to display her resume on her site and also let agents download her resume as a PDF.
Everytime I come across this, I remember that there’s no straightforward way to embed a PDF on Squarespace. You can’t just add a PDF like you add a text or image block, so you have to use some sort of workaround.
It took a lot of digging through Squarespace documentation and forums before I realized there is no easy way to embed a PDF. I developed this Squarespace hack because it gets the result I want and is super simple and fast.
If you’re trying to upload a PDF of your resume, services, menu, work sample, or any other PDF document, read on to find out how I like to add PDFs to my Squarespace sites!
Embedding vs. Linking to a PDF
Before we start, I want to make sure we’re on the same page about what we’re trying to achieve. Embedding a PDF means the PDF itself is displayed on your page and is on your actual website. On the other hand, if you’re linking to a PDF, the user will be taken to another page where the only thing on it is the PDF.
At the end of the day, both embedding and linking to a PDF will make the document accessible from your site, but which method you choose depends on a couple of factors.
You should link to the PDF if:
The PDF is poorly designed or contains a lot of text (like a legal document)
The information is secondary to most site visitors
Your PDF has many pages
You want people to be able to download the PDF
If the PDF doesn’t contain information that’s super relevant to most of your audience, don’t take up precious screen space by embedding it. Instead, include a text link that users can click on to go to the PDF on a separate page. For example: “Click here for our full tasting menu.” Linking to the PDF is also a good option if people need to download the PDF. For example, you might link to a PDF of an application form that needs to be filled out and sent by mail.
Linking to a PDF on Squarespace is super easy. All you have to do is:
Add a text block
Highlight the text you want to turn into a link
Choose the link icon
A small pop-up will open. Click on the gear icon
Click “File” to upload new file or choose an existing file
Save!
You should embed the PDF if:
Your PDF contains important information that’s relevant to everyone who lands on that page
It’s designed nicely and fits in with the style of your website
Since embedded PDFs will be displayed right there on the page, you want it to look good and play nicely with the rest of your content. If you embed an ugly PDF, that’s the same thing as creating an ugly web page.
So how can we embed a PDF on Squarespace?
Squarespace’s Official Solution - Upload it to Issuu
The official Squarespace recommendation is to upload your PDF to Issuu, a publishing platform, and copy and paste the embed code onto your site. You can check out their tutorial here.
Personally, I’m not a fan of this method for a number of reasons. For starters, not everyone can use it. In order to use this method, you’ll need to paste Issuu’s embed code into a Squarespace code block, a feature not available to Squarespace users who have the basic Personal Plan. This very site you’re reading this blog post is using a Squarespace Personal Plan, as are the sites of many of my clients who don’t need a ton premium features. In my opinion, it’s not worth upgrading your plan if all you want to do is embed a PDF.
On top of that, I just find the embedded Issuu reader clunky. The PDF is embedded in a little box that looks super weird. You’ll need to purchase a premium Issuu plan to remove the “Powered by Issuu” bar at the bottom, and the “See More” button displays documents uploaded by other Issuu users (why would anyone want this??)
Issuu adds it's branding and clunky buttons when you embed your PDF on Squarespace
Issuu displays other people's unrelated publications when you click on the "See More" button
Lastly, and this might not be an issue for you, the “Share” button generates a link to the Issuu account used to upload the document. This complicates the process with my clients, because it doesn’t make sense for the “Share” button to link to my personal account, and I don’t want my clients to have to create an account on Issuu and upload the doc themselves.
So...
Yeah.
Not a fan of this solution.
BUT, there are a few workarounds to embed your PDF to Squarespace, and I’m excited to share my favorite method with you today.
How to (Fake) Embed PDF on Squarespace - My Favorite Workaround
1. Turn your PDF into an image - there are a few ways you can do this, but the easiest (and free!) way is to use a free online converter like https://smallpdf.com/pdf-to-jpg or https://pdf2png.com/. Just upload your PDF and it’ll convert it into a JPG or PNG image that you can download.
2. Add the image to your Squarespace site - create an image block and upload your new image.
3. (Optional) Create a clickthrough link to your PDF - If you want to be able to open the full PDF on its own page by clicking on the image, create a clickthrough link on the image.
Open up the image editor and under the Design tab, click on the gear icon.
This will open the Link Editor, where you’ll choose File and either upload a new file or choose a previously uploaded file. You can also choose whether you want the PDF to open in a new window. Then hit save!
4. Arrange your blocks so it looks good - Add a page title, adjust your spacer block etc. to make sure the PDF looks good. Don't forget to resize your browser and check the page on different devices.
Note: If your PDF has multiple pages, you can either upload just the first page and have it link to the full PDF, or upload all of the pages using the method above.
Do you use Issuu to embed PDFs or have another workaround you prefer? Have a question about embedding PDFs on Squarespace? Let me know in the comments!
Related posts:
How to Choose the Best Squarespace Template For Your Business - The #1 Mistake People Make