- Why would you need to embed a file in a website?
- How to Embed a PDF File on Your Squarespace Website
- FAQs: Embed a PDF in Squarespace Website
- Can visitors download the embedded PDF directly from my site?
If you have a Squarespace website, you might have wanted to embed PDF or other files, but you could not find a way. Well, Squarespace does not have native support for embedding files on their website and hyperlinking it might not be good for the user experience all the time. In this blog, I will teach you how you can embed a PDF file on squarespace with a few simple steps.
Why would you need to embed a file in a website?
Squarespace is a fantastic platform that allows you to create websites without needing to write code. The drag-and-drop interface is simple, and for many people, the basic features are enough. But sometimes, you may need to embed specific files, such as when you want to share important documents directly on your site.
There might be authors out there who want to publish their books and embed a sample on it on their website. Companies may want to embed their digital brochures and publish their annual reports online. Photographer may want to embed their photography portfolio on the website and data-driven businesses might want to showcase charts or graphs.
While hyperlinking to such files works, it’s not always the best option because visitors might not click on them. Embedding files, like PDFs, allows them to interact with the content directly on your site without needing to open a new tab.
How to Embed a PDF File on Your Squarespace Website
To embed a PDF on Squarespace, you’ll first need to host the file online. You can use Tiiny Host for this step, which supports hosting of variety of file types not limited to PDFs only. Hosting and Embedding your file is fairly simple and quick, only takes a few minutes.
Step 1: Host Your File on Tiiny Host
- Visit Tiiny Host’s homepage.
- Drag and drop your PDF file into the uploader or click to upload manually.
- You can either customize the subdomain by giving it a name or leave it blank for a generic one.
- Sign up or log in to your Tiiny Host account, then click “Publish”
That’s it, your file is now hosted on Tiiny Host! Once your file is uploaded, you’ll see a pop-up with an option to copy the embed code.
You can either use this method directly or follow the steps below.
- Visit the Tiiny Host.
-
Click the three-dot menu on the file you want to embed.
- Select “Embed this link” and copy the code.
Step 2: Embed the Code on Squarespace
Now that your PDF is hosted, it’s time to add it to your Squarespace website. For this example, I’ll use a sample template from Squarespace’s library, but you can choose where you want to embed the file on your site.
- Open your website editor on Squarespace.
- You can either add a new section by clicking “Add a Section” and then selecting “Add a Block,” or you can add a block to an existing section.
- Look for the “Embed” option from type of block list and click on it.
- After adding the block, click on the pencil icon to edit the block. In the block settings, navigate to the Code Snippet section.
- Click “Embed Data” and paste the embed code you copied from Tiiny Host.
Once your PDF is embedded, you can adjust the display. For example, you can make the PDF span the full width of your section by changing the width in the code to width=”100%”.
Additional Features
Tiiny Host’s embed feature offers several interactive options for your users, including zooming in or out on the document. Additionally, Tiiny Host provides a “Side-by-Side” feature that allows you to publish flip-style magazines. Visitors can easily flip through pages, which is great for showcasing magazines, brochures, books, and other multi-page documents.
Another helpful feature is the word search functionality, which lets users search for specific terms or sections within the PDF. This is especially useful for large documents like reports or manuals, where visitors may want to jump to a specific part of the content quickly.
FAQs: Embed a PDF in Squarespace Website
Can visitors download the embedded PDF directly from my site?
Visitors can open the embedded PDF in a new tab or download it directly to their device. Tiiny Host’s embed feature ensures that the document is interactive, and users have the option to download or print the PDF.
What happens if I update the file after embedding it?
If you make changes to the file after embedding it, you just have to re-upload it or update it on Tiiny Host, the updated file will automatically reflect on your Squarespace site without needing to re-embed the code. This is because the file is hosted on Tiiny Host, and any updates to the file are instantly reflected wherever the embed code is used.
