PDF Viewer Widget Generator: Embed PDF Files into Your Website

Embed PDF files on your website for easy viewing and download without redirecting visitors. Use the widget builder below to create your free PDF viewer widget. Select a template and click “Continue with this template” to get started.

How to use the PDF Viewer Widget Generator

PDF Viewer Widget
  1. Choose a template: Select a preferred template and click the “Continue with this template” button. Some available templates are Embed PDF File (best for showcasing a single PDF file), File List, Magazine Archive, and Single File Link.
  2. Add PDF files: Add your widget title and upload your PDF files. You can drag-and-drop them to arrange them on the widget and add a preview image, too.
  3. Layout settings: You can choose a different layout for your PDF embed widget. There are three options: File Viewer, Grid, and List.
  4. Download settings: Under ‘Download Settings,’ you can enable the option for people to download PDF files.
  5. Change appearance: You can change colors and fonts. You can also use custom CSS and JavaScript to optimize widgets further.
  6. Once you’ve customized the widget, click the “Add to website for free” button. This will allow you to add PDF viewer widget to your website at no cost. You will also need to register to save your changes. It’s as easy as copy and paste. Copy the embed code for the free PDF embed widget and paste it into your website’s HTML editor where you want to showcase it.

The PDF Viewer widget’s HTML embed code

PDF Viewer’s HTML code will have two parts. External JavaScript file and HTML div element with class attribute unique to your PDF embed widget. Insert the embed code into your website’s template, theme, or HTML source code editor where you want the PDF Viewer widget to appear.

Installing widget on WordPress Block Editor
You can use the Custom HTML block on WordPress to embed PDF files.

How to Manage Your PDF Viewer Widget

Once you have created your PDF embed widget for websites, you can easily manage it on your account. In your dashboard, search for PDF Embed app under list of apps. As you can see from the following screenshot, you can create more PDF embed widgets, edit existing ones, and get HTML embed code.

PDF Embed Widgets

Related Tutorials