How can I display a PDF on a Webflow page without just linking to it, and can it be done on a collection page?

TL;DR

Upload the PDF to Webflow's Assets panel and copy its hosted URL.
Drag an Embed element onto your page and paste an iframe with the PDF URL.
On Collection pages, use a dynamic CMS field to replace the PDF URL in the iframe code.
Add a fallback link for better mobile compatibility and ensure browser support.

You can embed a PDF directly on a Webflow page using an embed element with an iframe, and yes, this can also be done on a Collection page.

1. Upload the PDF to Webflow

Go to the Webflow Designer.
Click the Assets panel (the folder icon).
Upload your PDF file using the upload button.
After the upload, click the PDF to copy its hosted URL (e.g., https://cdn.prod.website-files.com/.../document.pdf).

2. Add an Embed Element with an iframe

Drag an Embed component from the Add panel into the page or Collection page template.
Paste this iframe code inside the Embed element:

<iframe src="PDF_URL" width="100%" height="600px"></iframe>

Replace PDF_URL with the Webflow-hosted URL you copied earlier.
For improved performance or cleaner display, you can also add attributes like loading="lazy".

3. Dynamically Embed a PDF on Collection Pages

If you want each Collection page to display a different PDF based on the CMS item:

In your CMS Collection, create a field for the PDF (either a File field or a Link field if you're hosting the PDF externally).
On the Collection Template page, drag in an Embed element.
In the iframe code, replace the static PDF URL with a dynamic field:

<iframe src="https://cdn.prod.website-files.com/dynamic-url.pdf" width="100%" height="600px"></iframe>

Highlight the src URL inside quotes, then click the Add Field button and insert your PDF field—Webflow will auto-bind the correct value.

4. Consider Cross-Browser Support and Mobile UX

Most modern browsers support native PDF rendering via iframe.
Some mobile users may have a limited viewing experience—consider adding a fallback link below the embed just in case.

Summary

To display a PDF in Webflow without linking to it, use an iframe inside an Embed element referencing the PDF’s URL. On Collection pages, use dynamic PDF URLs from CMS fields to make the display content-specific.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I test transactions on my Webflow Ecommerce site before launching, specifically with regards to UK card numbers and potential issues with Stripe's test card numbers?

Is there a tutorial available for creating a horizontal scrolling section on Webflow using third party tools or integrations?

Why does the grid behave differently in preview mode in Webflow when building a custom nav drop-down menu?

How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?

How can I resize a background video in Webflow so that it always fits centered without cutting off the sides?

Are there any online resources that can help me build a custom donation form in Webflow that can connect to a payment partner allowing for iDEAL payments in the Netherlands?

Is it possible to host a blog on WordPress within a subfolder of a main site hosted on Webflow? What is the best way to implement this?

Can Webflow be integrated with a custom-built NodeJS backend for creating a custom UI widget based on server responses?

How can I fix the issue of all the blog posts on my Webflow site having the same publication date? Here is the public share link for reference.

Is it possible to add the Google Tracking code in Webflow Standard forms for a short success message without a redirect page?

Is there a more efficient method in Webflow for adding keywords and other Meta tags to my header without duplication? Thank you for any assistance. Mike

What indicators should I search for in the source code to determine if a website was built using the Webflow platform?

How do I enable scrolling within a popup in Webflow using the mouse wheel or trackball on devices without touchscreens or trackpads?

What is the best way, from an SEO perspective, to make a website available in both English and Dutch using Webflow?

How can I adjust the tablet breakpoint in Webflow to display the nav menu (hamburger menu) at an earlier pixel width, such as 1150px instead of the default 992px? Is there any custom code or integration that can help me achieve this?

Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?

How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?

How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?

How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?

How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

How can I change the language of the Google Maps embed from English to Arabic in Webflow?

How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?

How can the text color be changed for custom input fields on Webflow?

How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?

How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?

How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?

How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?

How can I implement a ThreeJS script as a background for my Webflow project using custom code?

How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?

Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?