How to embed a PDF viewer in Squarespace

Are you enjoying the ease of editing a website on Squarespace, but you don't know how to embed a PDF viewer in your Squarespace website? In this article I will walk you through two easy methods to embed PDF documents in your site.

The first method is using CloudPDF an easy to implement PDF viewer with the options of analytics, lead generations and document security. The second option is the well known Google Docs.

Let's get started!

Embed CloudPDF viewer in Squarespace

We will walk through a few simple steps to embed the CloudPDF viewer in your website. CloudPDF gives you a viewer you can customize to your website's colors and your privacy specifications, and other features to track and increase your document's performance - but today we will look specifically at how to embed the PDF viewer in a Squarespace website.

1. Make a CloudPDF account

You can create your free account by clicking the button below

2. Upload your PDF document

In the CloudPDF dashboard you can choose to drag and drop a file or to click the button "Select PDF files." After selecting your files you can click the button "Upload selected PDFs" and the the files will be uploaded.

After the upload is finished you will receive a popup that says: "Congratulations! You uploaded your first document. Choose what you want to do next". Select the button "Embed PDF in your website."

Upload a file to CloudPDF

Example on how to upload a file to CloudPDF

3. Preparing the document to embed

At the embed screen we will have to change the permission of the document to public in order to be able to embed the document in Squarespace. So we click the button "Change permissions" and change the switch "Publicly accessible" to "ON".

Change document permissions in CloudPDF

Example on how to change document permissions in CloudPDF

After changing the permissions on the document, you now can copy the snippet you will find under the heading "Manual integration"

Now we are ready to embed this snippet into Squarespace. So let's do that!

4. Embed the PDF viewer in Squarespace

Log back into your Squarespace website and click "edit" on the page where you want to add the PDF viewer.

Now click the "+" icon and select "Embed". Then click on the right icon in the input box that says "Embed Data" and copy the viewer code into the text area. Make sure to change the width in the snippet to "100%" so that the viewer will be responsive.

Add CloudPDF viewer to Squarespace

Example on how to add the PDF viewer to Squarespace

Note: after you added the embed data you might see in Squarespace editor the message "Script disabled." You can ignore this message and save the page. Once the page is saved and you preview it, you will see that the viewer is rendered successfully. The message appears because Squarespace does not allow for external javascript to be executed while in "edit" mode.

5. The end result

Now the viewer will be embedded in your website and it will look like this:

Example of the bitcoin whitepaper embedded into CloudPDF

Embed PDF from Google Drive in Squarespace

The second option to embed a PDF in Squarespace is through Google Drive. In this section I will take you through a simple step-by-step guide on how to accomplish this.

Let's get started.

1. Upload your PDF to Google Drive

You can drag or drop your file into the folder or you can select the button "+ New" and then select "File Upload"

Drag or drop a PDF file to Google Drive

Example on how to drag and drop a PDF file to Google Drive

2. Copy sharing link

Now right click on the document and select "Get link". Make sure that the permissions of the link are set to "Anyone on the internet with this link can view". Then click the button "Copy link."

Get sharing link from PDF inside Google Drive

Example on how to get a sharing link from a PDF inside Google Drive

The copied link will look something like this:

https://drive.google.com/file/d/1uR1QMHdSS0PTN2zCaqehVOMDaot80iTS/view?usp=sharing

We will have to change the last part of the url from /view?usp=sharing to /preview. The new url in our case will look like this:

https://drive.google.com/file/d/1uR1QMHdSS0PTN2zCaqehVOMDaot80iTS/preview

3. Create the Google Drive embed snippet

In order to embed the PDF into Squarespace we have to create an embed snippet. You can find an example of the embed snippet below. Please make sure to replace our document link with the link from the previous step.

<iframe
src="https://drive.google.com/file/d/1uR1QMHdSS0PTN2zCaqehVOMDaot80iTS/preview"
width="100%"
height="375"
>
</iframe>

4. Embed the Google Drive PDF in your Squarespace website

Log back into your Squarespace website and click "Edit" on the page you want to add the PDF viewer.

Now click the "+" icon and select "Embed." Then click on the right icon in the input box that says "Embed Data" and copy the embed snippet we created in the previous step into the text area.

Embed a Google Drive PDF into Squarespace

Example on how to embed a Google Drive PDF iframe into Squarespace

5. The end result

Now the viewer will be embedded in your website and it will look like this:

Conclusion

We have seen two options for how to embed a PDF viewer in your Squarespace website, with CloudPDF or through Google Docs. CloudPDF offers an easy-to-install PDF viewer with secure storage and a wide variety of services to help you increase your documents' effectiveness with your audience. Get started with a free account by clicking the button below.