Webflow PDF Viewer Widget: Embed PDF Files on Your Webflow Site

Use the builder below to create a free PDF viewer for your Webflow site. Pick a template, click “Continue with this template” and upload your PDF files.

Webflow marketing sites often have documents to share: a brochure, a case study, a white paper, a press kit, a price sheet. Instead of linking to a file that takes visitors off the page, this widget shows the PDF in a viewer that sits inside your layout, or lists several files with preview images. You place it with a Code Embed element and choose whether visitors can download the files.

How to add a PDF Viewer widget to Webflow

1. Create your widget

  1. Choose a template: Embed PDF File (best for a single document), File List, Magazine Archive or Single File Link.
  2. Add your PDFs: give the widget a title and upload your files. Drag and drop them to set the order, and add preview images that fit your design.
  3. Pick a layout: File Viewer, Grid or List.
  4. Set downloads and style: under Download Settings, choose whether visitors can download the files. Match the colors and fonts to your Webflow site, with custom CSS and JavaScript for anything else.
  5. Save it: click “Add to website for free“, sign up on the next page and copy your embed code.
PDF Viewer widget builder with templates

2. Add it to your Webflow site

  1. Open the page in the Webflow Designer.
  2. Open the Add panel and drag a Code Embed element into the section where the PDF should appear, for example below a case study summary.
  3. Paste the widget code and click Save & Close.
  4. The canvas only shows an empty embed, because scripts don’t render inside the Designer. Publish the site or open Preview to see the viewer.
  5. Check the live page on a desktop screen and a phone. If the viewer feels too wide or narrow, adjust the section or container that holds the Code Embed.

Where to put the PDF Viewer widget on your Webflow site

  • On case study and portfolio pages: the full PDF under the web version of the story.
  • On landing pages for a guide or white paper: an embedded viewer so visitors can start reading right away.
  • On a press or media page: press kits and fact sheets as a File List.
  • On product or pricing pages: spec sheets, brochures or price lists in a Grid.
  • On a resources page: a Magazine Archive of past reports or newsletters.

Do you need a paid Webflow plan?

Yes. Webflow only runs the Code Embed element and custom code on a paid site plan or workspace plan. On a free Webflow project, the viewer script won’t load. The widget has its own free plan: one widget with up to 200 views a month on unlimited websites, with a small Elfsight link. Paid widget plans start at $5 a month, billed yearly.

The viewer sits inside the page, so you don’t need site-wide custom code for it. You upload the PDFs in the widget builder, so you manage and replace the files there, not in Webflow. An empty box in the Designer is normal; the viewer only appears in Preview and on the published site.

PDF Viewer widget features

  • Four templates: Embed PDF File, File List, Magazine Archive and Single File Link.
  • Three layouts: File Viewer, Grid and List.
  • Multiple files with drag-and-drop ordering and preview images.
  • Download settings to allow or block downloads.
  • Colors and fonts, plus custom CSS and JavaScript fields.

Frequently asked questions

Do I need a paid Webflow plan for the PDF viewer?

Yes. The Code Embed element needs a paid Webflow site plan or workspace plan. On a free project, Webflow won’t run the widget script.

Why doesn’t the PDF viewer show in the Webflow Designer?

Webflow doesn’t run scripts inside the Designer canvas. Publish the site or open Preview. If it’s still missing, check that the code is in a Code Embed element and that your plan allows custom code.

Can I show several PDFs in one widget?

Yes. Upload all the files to one widget and use the File List, Grid or List layout. Drag them into the order you want and add preview images.

Can visitors download the PDFs?

Only if you allow it. Turn downloads on or off under Download Settings in the builder.

How do I replace a PDF later?

Upload the new file in your Elfsight dashboard and save. The viewer on your Webflow site updates on its own, so you don’t need to paste the code again.

More Webflow widgets

Scroll to Top