Force PDFs to load in a new window in Squarespace
More in Plugins, Scripting and Styling
Opening PDFs in a new window or tab is crucial for keeping visitors on your Squarespace site while they access additional information like menus, service brochures, or technical manuals.
This functionality not only maintains engagement but also enhances the professional feel of your website.
The original version of this article was written in November 2015. Squarespace has changed a lot since then.
It’s now possible to force any file upload, including pdfs, to open in a new window via the built-in link editor.
Step-by-Step Guide to Adjust PDF Link Settings:
For new links
Log into Squarespace: Navigate to your site editor and access the page where you want to insert a PDF.
Start editing: Click the Edit button at top left of the window to start editing the page.
Create the link: Find where you want to insert a link. Highlight the text and choose the link symbol from the text formatting tools. This will open the Link Editor.
Select file from the dropdown at the top of the editor.
Either upload a PDF or select an existing PDF and ensure that Open link in new tab is checked (it will be green if checked).
Now close the link editor.
Save your changes: Select Save and Exit at the top left of the page to commit your changes.
Test your links: After adjusting the settings, test the link by clicking on it to ensure the PDF opens in a new window.
For existing links
Log into Squarespace: Navigate to your site editor and access the page where you want to insert a PDF.
Start editing: Click the Edit button at top left of the window to start editing the page.
Modify link settings: Find the link you want to amend. Click in the link text and choose the link symbol from the text formatting tools. This will open the link editor.
Check the Open link in new tab option (it will switch to green when enabled).
Now close the Link Editor
Save your changes: Select Save and Exit at the top left of the page to commit your changes.
Test your links: After adjusting the settings, test the link by clicking on it to ensure it opens in a new window. This step confirms the functionality works as expected.
Got questions about Squarespace?
FAQs:
Q: Will this setting slow down my website?
A: No, this adjustment is handled by the browser and does not impact your site’s performance.
Q: Are new window settings mobile-friendly?
A: Yes, this feature works smoothly across all modern mobile browsers, enhancing accessibility.
Q: Should I apply this to all my links?
A: It’s best used selectively. Apply this setting for external links or documents that might require simultaneous reference.
Original post below:
Yesterday a client asked if there was any way to force links to PDFs to download rather than opening up for viewing in the same browser window as their Squarespace site.
If you have access to the web server this is a pretty straightforward task - setting certain properties in .htaccess for Apache web servers(or similar for IIS) will force the PDFs to be downloaded rather than being opened in the web browser's native PDF viewer.
As Squarespace is a hosted service it isn't possible to tinker with server settings - and why should you?
My solution, which appears below, is a plugin that hijacks the click event when a PDF is selected and forces it to open in a new browser window. The PDF still opens within the browser but it leaves your website open in its original window.
The Plugin Code
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('a[href*="pdf"]').click(function(e) { e.preventDefault(); // stop the existing link from firing var documentUrl = $(this).attr("href"); // get the url of the pdf window.open(documentUrl, '_blank'); // open the pdf in a new window/tab }); </script>
You should insert the plugin code into your site's sitewide code injection header. If you're already using jQuery you can omit the first line of the code.
