How to Display Files on Your Squarespace Site
TL;DR:
- Use third-party services like Issuu, OneDrive, or Google Drive to embed PDFs, Excel files, and PowerPoint presentations
- Generate embed codes from these platforms and paste them into Code Blocks in Squarespace
- Adjust height and width values in the embed code to control how files appear on your site
- File embedding requires a Business plan or higher in Squarespace
- Test your embedded files on mobile devices to ensure they display properly
You can display various file types on your Squarespace site by embedding them through third-party services. Since Squarespace doesn't natively support viewing files like PDFs or spreadsheets directly on pages, you'll need to use external platforms to make your files viewable online.
Displaying PDFs
The most reliable way to display PDFs is through Issuu, a digital publishing platform that converts your PDF into an interactive, embeddable viewer.
Upload your PDF to Issuu and create a free account. Once your document is processed, click the share button and select "Embed." Copy the embed code Issuu provides.
In Squarespace, add a Code Block to your page and paste the embed code. The PDF will appear as an interactive viewer that visitors can flip through like a magazine.
Issuu's viewer works well on both desktop and mobile devices, and readers can zoom in, search text, and navigate pages easily.
Embedding Excel and PowerPoint Files
Microsoft OneDrive handles Excel and PowerPoint files effectively. You'll need a Microsoft account to use this method.
Upload your Excel or PowerPoint file to OneDrive. Right-click on the file and select "Embed." OneDrive will generate an embed code that creates a functional version of your document online.
Copy this embed code and paste it into a Code Block in Squarespace. Visitors will be able to view your spreadsheet data or presentation slides directly on your site.
For Excel files, people can scroll through sheets and see formulas in action. PowerPoint files display as slideshows that visitors can navigate through.
Using Google Drive Files
Google Drive offers straightforward embedding for Google Docs, Sheets, and Slides. This method works best if your files are already in Google's format.
Open your file in Google Drive, click "File," then "Share," and select "Publish to web." Choose your settings and click "Publish." Google will provide an embed code you can copy.
Paste this code into a Code Block in Squarespace. Google Drive files tend to load quickly and work well across devices.
Adjusting Display Size
Most embed codes include height and width parameters you can modify. Look for values like width="600" or height="400" in the code and adjust these numbers to fit your page layout.
Keep mobile users in mind when setting dimensions. Very wide embeds might not display properly on phones. Test your embedded files on different screen sizes to ensure they remain readable.
Plan Requirements
File embedding through Code Blocks requires a Squarespace Business plan or higher. Personal plans don't support custom code injection, so you won't be able to add embed codes.
If you're on a lower-tier plan, you can still link to files hosted on external services, but visitors will need to click through to view them rather than seeing them embedded on your page.
FAQs
Can I embed any type of file on Squarespace?
You can embed files that external services support, which typically includes PDFs, Excel files, PowerPoint presentations, and Google Drive documents. The file type support depends on the third-party service you use.
Do embedded files slow down my site?
Embedded files load from external servers, so they don't use your Squarespace storage. However, large files or multiple embeds on one page can affect loading times.
Can visitors download my embedded files?
This depends on the settings of the service you use. Issuu, OneDrive, and Google Drive all have privacy and download controls you can configure.
What if my embed code doesn't work?
Make sure you're on a Business plan or higher, and that you've pasted the code into a Code Block, not a text block. Some services also require files to be set to "public" or "viewable by anyone with the link."
Jargon Buster
- Embed Code: HTML code that displays content from another website on your page
- Code Block: A Squarespace content block that accepts custom HTML, CSS, and JavaScript
- Iframe: The HTML element most embed codes use to display external content in a frame on your page
Wrap-up
Embedding files gives your Squarespace site more functionality and lets you share documents without forcing visitors to download them. The key is choosing the right service for your file type and testing how everything looks on different devices.
Start with one file type and get comfortable with the process before adding multiple embeds. Remember that you'll need to update the embed code if you make changes to your original file on the external service.
Ready to take your Squarespace skills further? Join Pixelhaze Academy for more advanced tutorials and techniques.