.png?table=block&id=219105a2-9d95-816b-84dd-ce038d5b7fe0&cache=v2)
Last Edited Time
Jun 25, 2025 09:35 PM
Do not index
Do not index
Suggested Tag
Squarespace
embed files
code blocks
Tags Synced
Tags Synced
AI summary
Embed files on Squarespace using third-party services like Google Drive and OneDrive. Use code blocks for embedding, adjust dimensions for mobile responsiveness, and ensure compatibility with your Squarespace plan.
Last edited by
Platform
Category
Topic
How to Embed Files on Your Squarespace Site
Key Points
- Embed files using third-party services like Google Drive and OneDrive
- Adjust file size through code modifications
- Make sure your embedded files work properly on mobile devices
- Check which Squarespace plans allow iframes for embedding
- Use code blocks to insert embed codes in your Squarespace site
Embedding Files in Squarespace
Adding files like PDFs, Excel sheets, PowerPoint presentations, and Google Drive documents directly into your Squarespace site makes life easier for your visitors. They can view important content without having to download anything first.
Here's how to do it properly.
Using Third-Party Services
You can't just drag and drop files into Squarespace and expect them to display inline. You need to use external platforms that generate embed codes for you.
For PDFs, services like Issuu work well. They convert your documents into embeddable formats that play nicely with Squarespace.
Embedding from Microsoft OneDrive
This method works brilliantly for Excel and PowerPoint files:
- Log into your Microsoft OneDrive account (or create one if needed)
- Upload your document to OneDrive
- Go to your Files page and right-click the document (Control + click on Mac)
- Select 'Embed' from the menu and click 'Generate'
- Copy the embed code they give you
- In your Squarespace editor, go to the page where you want the file
- Click where you want it to appear, add a Code Block, then paste your embed code
- Save your changes
Quick tip: You can adjust how big your embedded file appears by changing the 'height' and 'width' numbers in the embed code. Setting width to 100% makes it fill the full column width, which usually looks better.
Embedding from Google Drive
Google Drive makes this pretty straightforward:
- Open your document in Google Drive
- Go to 'File' then 'Publish to the web'
- Click 'Publish', then switch to the 'Embed' tab
- Copy the embed code
- Add this code to a Code Block in your Squarespace page
- Save your changes
Getting the Size Right
Most embed codes include height and width settings you can tweak. For Google Drive documents and spreadsheets, try adding
height="600px" width="100%" to your embed code if the default size looks odd.For presentations, you might need to adjust both dimensions to get the aspect ratio right.
Common Questions
Can I embed PDFs without using a third-party service?
No, Squarespace doesn't support direct PDF embedding. You'll always need a service like Issuu or Google Drive.
Do all Squarespace plans support file embedding?
Only Core, Plus, Advanced, Business, Commerce Basic, and Commerce Advanced plans support iframe embedding through code blocks. Personal plans don't allow custom code.
Will embedded files work properly on mobile?
Usually, but you need to check. If you don't set responsive dimensions (like width="100%"), your embedded files might look terrible on phones and tablets.
Technical Terms Explained
Iframe: A way to show content from another website inside your own webpage. Think of it as a window that displays something from elsewhere.
Code Block: Squarespace's feature that lets you add custom code to your pages. You'll find it when adding new content blocks.
Embed Code: The snippet of code that tells your webpage how to display external content. Usually looks like a bunch of HTML with angle brackets.
Responsive Design: Making sure your content looks good on all screen sizes, from phones to desktop computers.
Final Thoughts
Embedding files properly can make your Squarespace site much more useful for visitors. The key is picking the right service for your file type and making sure everything displays well on different devices.
Test your embedded files on your phone after adding them. What looks perfect on your laptop might be unreadable on a smaller screen.