How can I ensure that the PDF links on my Webflow staging site open in a new window, and how can I set the PDF file links to have a domain-matching URL?
TL;DR
- Upload PDFs to Webflow’s Assets panel, copy the hosted link, and set it as a URL in a link element with “Open in new tab” enabled.
- To serve PDFs from your domain, host externally (e.g., AWS S3) and set up a reverse proxy or redirects, since Webflow uses a CDN domain for assets.
To both open PDF links in a new window and ensure they're served from your domain, follow these steps:
1. Upload PDF Files to Webflow Assets
- Go to the Webflow Designer.
- Open the Assets panel (the "paperclip" icon).
- Upload your PDF files directly to Webflow's asset manager.
- After upload, click the file to copy the Webflow-hosted URL, which will look like:
https://cdn.prod.website-files.com/PROJECTID/PATH/filename.pdf
Note: These URLs are hosted on Webflow's CDN, not your custom domain.
2. Add the PDF Links to Your Website
- In the Designer, select the element you want to link (e.g., text, button, image).
- Set the link type to URL, and paste the Webflow PDF URL.
- Check the option “Open in new tab” to ensure the PDF opens in a new window when clicked.
This setstarget="_blank"on the link.
3. Use Redirects or a Server to Match Your Domain (Optional Advanced)
To make the PDF link appear as if it's coming from your domain (e.g., yourdomain.com/files/filename.pdf), you'd need to:
- Host the PDFs externally (e.g., AWS S3, Cloudflare R2, or GitHub) under a custom subdomain like
files.yourdomain.com. - Use a reverse proxy setup or redirect service that maps your custom domain URL to the Webflow-hosted file.
- Note: Webflow doesn’t allow direct file hosting under your root domain; all assets are served via
uploads-ssl.webflow.com.
For simpler needs, you can place a page (e.g., /pdf-viewer) with a custom PDF embed using an <iframe> (via the Embed element) and wrap it in your site design.
4. Use Custom Code Embed (Optional)
If you're using a custom Embed block, make sure your anchor tag includes:
target="_blank"to open in a new windowrel="noopener"for security best practices
Summary
Upload PDFs to the Webflow Assets panel, use the file link in a standard external URL link, and check "Open in new tab". To make links appear on your domain (not uploads-ssl.webflow.com), you'll need an external host or reverse-proxy setup, as Webflow doesn't support root-domain asset hosting.