Displaying files on your site

Embed files, like .pdfs, Excel spreadsheets, and Google Drive files to showcase them directly on your site.

Last updated January 24, 2025

You can display .pdfs, Excel files, PowerPoint presentations, and Google Drive files on your site by embedding third-party code. This guide lists steps for a few popular services and methods.

Note

Embedding files may affect your site's responsive design on smaller browsers and mobile devices. Using code blocks to embed files with iframes is available in the Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans. To learn more, visit Choosing the right Squarespace plan. All code-based customizations and code modifications fall outside of the scope of Squarespace support.

Tip

To add downloadable files to your site, use a file link instead.

.Pdfs

Use Issuu to embed .pdfs in your Squarespace site.

Excel and PowerPoint

To display an Excel or PowerPoint file, you’ll need a Microsoft OneDrive account. You can sign up for OneDrive here.

  1. Open OneDrive.
  2. Upload your Excel or PowerPoint document. For help, visit their documentation.
  3. In OneDrive, open the Files page.
  4. Right-click the document on Windows (or Control + click on a Mac), and click Embed.
KB Guide Image
  1. Click Generate.
  2. Copy the code from the Embed code box.
KB Guide Image
  1. In Squarespace, open the editor for the page or post where you'll place the file.
  2. Click an insert point and add a code block.
  3. Paste the embed code into the code block.
  4. Click Save on the page or post to publish your changes.

Tip

Adjust the "height" and "width" numbers in the embed code to change the display size.

Note

To learn more about embedding Excel and PowerPoint files, visit Microsoft's guide.

Google Drive (formerly Google Docs)

After creating a document in Google Drive, follow these steps:

  1. Open your document in Google Drive.
  2. Click File.
  3. Select Publish to the web.
KB Guide Image
  1. Click Publish.
  2. Copy the code in the Embed tab.
KB Guide Image

 

  1. In Squarespace, open the editor for the page or post where you'll place the file.
  2. Click an insert point and add a code block.
  3. Paste the embed code into the code block.
  4. Click Save on the page or post to publish your changes.

Document resizing tips

Some Google Drive embed codes, like the code for Slides presentations, include "height" and "width" dimensions. Adjust these numbers to adjust the display size.

Embed codes for other files, such as documents and spreadsheets, don't specify height and width dimensions. You can set the height and width by adding this code snippet after the URL in the embed code:

height="600px" width="100%"

Adjust the number within "600px" to change the height. To adjust the width, use spacer blocks. Setting the width to 100% means the document will span the width of its column.

As with all code modifications, be aware that this falls outside the scope of Squarespace support.

Note

Visit Google's documentation to learn more about embedding Google Drive files and setting editing permissions.

More help

Note

Custom code modifications fall outside the scope of our support. This means that we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. Custom code can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.