How can I display a PDF on a Webflow page without just linking to it, and can it be done on a collection page?
- Upload the PDF to Webflow's Assets panel or an external host and copy the file URL.
- Embed the PDF using an iframe (e.g., Google Docs Viewer or raw PDF URL) inside an HTML Embed element.
- For CMS pages, add a File field, then dynamically bind the Embed element to each PDF using the CMS field data.
You can embed a PDF directly on a Webflow page (including CMS Collection Pages), so users can view it without downloading—though Webflow doesn't provide a native PDF viewer, there are reliable workarounds.
1. Upload the PDF to Webflow or External Hosting
- Webflow Hosting: You can upload the PDF to the Assets Panel, then copy the URL after upload.
- External Hosting: Alternatively, host your PDF on services like Google Drive (as public), Dropbox (with direct URL), or a custom server.
2. Choose a PDF Viewer Method
Since Webflow doesn’t include a native PDF viewer, embed the PDF using:
- Google Docs Viewer: Use an iframe link like:
https://docs.google.com/gview?url=[Your-PDF-URL]&embedded=true - Browser Native Viewer: Use an iframe with the raw PDF URL (note: not all mobile browsers handle this well):
[Your-PDF-URL]
3. Embed Using an HTML Embed Element
Drag an Embed element into your Webflow layout.
Paste your iframe code with loading optimization (e.g.,
loading="lazy"):Example:
<iframe src="https://docs.google.com/gview?url=[your-pdf-url]&embedded=true" width="100%" height="600px" loading="lazy"></iframe>
4. Use on a Collection Page
If using a CMS Collection Page, follow these steps:
- Add a File field to your CMS Collection to hold the PDF file.
- In your Embed element, bind dynamic data by replacing the PDF URL with the CMS field:
Example:<iframe src="https://docs.google.com/gview?url=CMS_FILE_URL&embedded=true" width="100%" height="600px" loading="lazy"></iframe> - Use the “Add Field” button in the Embed settings to insert the dynamic file URL into the code.
5. Consider Viewer Limitations
- Google Docs Viewer requires publicly accessible URLs (no authentication).
- Avoid using on sensitive PDFs where privacy matters, because file URLs are exposed.
- For better display across devices, test behavior on mobile—iframes can be constrained.
Summary
To embed a PDF in Webflow (including CMS pages), upload it via Assets or external hosting, then embed the file using an iframe (e.g., Google Docs Viewer). On collection pages, use a CMS File field and dynamic data binding to display each PDF uniquely.