5 Best PDF Viewer Widgets to Embed PDF Files in Website for 2024

Whether you want to embed a PDF report about the annual progress of your business, a media kit for business partners, showcase a product manual, a job application, product specification, or any PDF (Portable Document Format) file for website users, there are two ways to add a PDF viewer on a website.

  1. Using HTML
  2. Using a PDF viewer widget

In this article, you will find top PDF embed widgets for websites and how to use HTML to embed any PDF file (without using JavaScript).

Top 5 PDF Embed and Viewer widgets for websites

Elfsight PDF Embed widget

Elfsight PDF viewer widget

Elfsight is a no-code widget builder for website owners with over 80 apps in its widget catalog, ranging from social media to eCommerce apps. Social feed, Events calendar, PayPal button maker, and Amazon Reviews widgets are some of the popular apps used by over 2 million users globally.

Its free PDF viewer widget has many features, including a visual PDF embed widget builder, customization options, and universal embedding capabilities.


  • Templates – Elfsight provides several PDF viewer widget templates to get you started. All are mobile responsive and customizable to accustom to your requirements.
  • Embed multiple PDF files – You can add multiple PDF files from your computer, URL, or by selecting from the media library into one PDF viewer.
  • 3 Layouts – Make a PDF embedder you want:
    1. File viewer – PDF file will be displayed on the page.
    2. Grid – PDF files will be grouped in rows and columns.
    3. List – PDF files will be listed one by one in rows.
  • Download Button – When you embed a PDF file to view on a web page, you can add a download button near the PDF viewer widget to let users download the particular file instantly.
  • Customization – Change preview image, file icon (5 Adobe Acrobat icons), colors (font, download button, file background…), sizes, and fonts, and utilize custom CSS.
  • Mobile preview before publicizing, widgets and domain management, duplicate widgets, single-code widget installation process, and more.

Creating a PDF viewer widget on Elfsight

Use the HTML PDF viewer widget builder below to create your widget. Choose a template, click on the “Continue with this template” button, upload your PDF files, and customize the widget. Once done, click on “Add to Website” to obtain the embed code.

(Note: You might have to disable web browser download extensions such as “Internet Download Manager (IDM)” to work with the following builder.)

Or register your account for free over here, search for the “PDF Embed” app on the widget catalog, and start customizing it.

Here’s a video that shows how to use Elfsight to make a PDF embed widget.

HTML Embed Code for PDF Viewer

Copy the HTML code for the PDF viewer widget and paste it where you want to showcase PDF(s) on a site.

Elfsight PDF Viewer widget embed code

Tip: You only need to use the JavaScript part once, even if the page already has other Elfsight widgets, such as Elfsight’s Form app, installed.

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-1ae6c8a3-3ff4-4ff8-b3a0-08090288671" data-elfsight-app-lazy></div>


PDF viewer widget


Elfsight’s PDF viewer widget is free to use. However, the free plan possesses certain limits: Branding on the widget and 200 views per month. ElfSifght’s paid plans start from $6 per month.

Elfsight PDF Viewer Embedder Pricing

All Apps Pack plans start at $18/month, and packages include access to 80+ Elfsight apps, such as the count-down-to-date widget, logo slider, and age verification popup. Compare Elfsight prices from this article.

Elfsight all apps pack pricing

Click here to try Elfsight.

CommonNinja PDF Embed Widget

Common Ninja PDF Viewer Gallery Plugin

CommonNinja, like Elfsight, is a free widget provider for websites with over 170+ widgets in its arsenal. Some of its popular plugins are Before/After image slider, Pricing Tables Creator, Brackets & Tournaments Maker, Company Branch List, Mastodon Feed, and Google Reviews Slider.

CommonNinja’s PDF Embed widget allows you to build a PDF Gallery widget with its no-code visual builder.

Common Ninja PDF Viewer Gallery Editor
Common Ninja’s PDF Gallery widget builder provides tons of customization options, including device-specific styling and custom styles.


  • Create a gallery of PDF files for your website – Upload your PDF files and add relevant information such as thumbnails, captions, and descriptions.
  • Multiple Layouts – The PDF embed widget for websites comes with four layout options. Embed, Gallery, List, and Designed List.
  • Settings – Add a search bar, enable downloading PDF files, show and hide elements of PDF gallery widget and translate front-end messages.
  • Fully customizable – Change colors, fonts, spacing, and more with basic and advanced customization settings. Common Ninja also equips “device-specific” editing tools that you can use to adjust styles for each device type.
  • Custom styling and CSS – Miss any customization option? Use the custom styles section to change the look of each item. Furthermore, you can use the custom CSS field to add your unique touch.

Watch the video below to find out how to use CommonNinja to build a PDF embed widget for your website.



CommonNinja’s PDF Embed widget is free to use. However, the free plan limits features and includes CommonNinja’s brand on widgets, which might look unprofessional for a company site.

CommonNinja Pricing

Its paid plans start at $10.00/month.

Click here to try CommonNinja.

Powr PDF Embed App

Powr PDF embed app

Powr is another service that provides no-code widgets for websites. Its apps library contains over 40 powerful applications for different objectives ranging from displaying content to converting visitors into paying customers. Some popular Powr plugins are Countdown timer for emails, Form Builder, Clients’ testimonials slider, File embedder, Count-from-a-date timer, Number counter, and Social Feed aggregator.

Its free PDF embedder app allows you to design a PDF embed widget, customize it, and install it on any site you own.

Powr pdf embed widget editor
Powr PDF Embed allows a single PDF to be embedded, while the File Embed plugin allows multiple PDFs. This screenshot is the visual PDF Embed widget editor of Powr.


  • Multiple File Type Options – Powr’s PDF embedder allows you to add multiple files in various file types, not limiting to .pdf. Integrate AI, GIF, TXT, HTML, CSS, DOC, DOCX, JPG, PNG, XLS, PPT, EPS, PS, and BMP files into your website PDF viewer.
  • Flexible View Options – Choose which viewer to use: Google Viewer or Microsoft Office Viewer.
  • Enable Social Sharing – Let readers share PDF files on social media by enabling social sharing buttons.
  • Customization – Personalize your widget with custom colors, fonts, spacing, borders, and sizes to match your website and brand.
  • Custom CSS, duplicate widgets, collaboration options, easy installation, and more.

Watch the video below to find out how to embed a PDF in a website using Powr.



Powr’s PDF EMBED app is free of cost. But, the free plan comes with several limits.

Powr pdf embed app pricing

Click here to try Powr.

Related: Powr vs. Elfsight: Which widget provider is good for you?

Adobe View SDK

Adobe PDF JavaScript API

With the new Adobe View SDK, you can embed PDFs in web pages and provide your users with a customized and immersive experience for free. The modern Adobe PDF viewer allows you to control how PDFs are presented on your website.

Adobe SDK PDF embed API features


  • Add annotation tools – Add annotation tools inside the PDF viewer and let anyone annotate the embedded PDF and download the modified file.
  • Thumbnail view – If you embed a lengthy PDF file, users can utilize thumbnail view to jump to any page quickly.
  • Customization – Show/hide downloading and printing options.
  • Controllers, built-in analytics, inline embed mode, and more.

How to embed Adobe PDF Viewer on website

Adobe View SDK is under the Adobe Document Cloud platform, and it does not cost to use SDK credentials.

Go to the Adobe DC Integration Creation App webpage and create your PDF Embed API. API credentials are domain-based, so you will have to generate multiple credentials for multiple websites.

Adobe PDF embed API key generator

Now, open the playground and generate the embed code for the Adobe PDF viewer widget.

Adobe PDF embed code generator

Here’s a sample code:

<div id="adobe-dc-view" style="width: 800px;height: 780px;"></div>
 <script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
 <script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function()
        var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
          content:   {location: {url: "https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
          metaData: {fileName: "Bodea Brochure.pdf"}
  1. Control the width and height of the widget.
  2. Replace <YOUR_CLIENT_ID> with your PDF embed API key.
  3. Upload the PDF to Adobe Document Cloud (free hosting) or paste the URL for the PDF (Hosted by you).
  4. Change the Meta file name, which will appear at the top of the PDF embedder.


Google Drive PDF Embed Method

If you are wondering whether you can embed Google Drive PDFs in a webpage, now you are in for a treat!

Here’s how to embed PDF files in your Google Drive:

Preview your PDF uploaded to Google Drive.

Preview Google Drive PDF

Click on the three dots in the top right corner and click the “Open in new tab” option.

Google Drive file open in new tab

Click the three dots icon again, and now choose the “Embed item” option.

Google Drive pdf embed item

A popup with a PDF embed code will appear. Copy it.

Google Drive pdf embed html code

The code snippet will look like this:

<iframe src="https://drive.google.com/file/d/1XgTR1Wk5qjZNSGKYW2xpmtVRtk9L36z4/preview" width="640" height="480" allow="autoplay"></iframe>

Change values for width and height attributes. For example, the following code will adapt the maximum available space for width and limit the height to 780 pixels.

<iframe src="https://drive.google.com/file/d/1XgTR1Wk5qjZNSGKYW2xpmtVRtk9L36z4/preview" width="auto" height="780" allow="autoplay"></iframe>

Last, but not least, make sure to grant viewer access to the public to view Google Drive PDF on your site.

Grant public viewership Google Drive file
You must grant public view access to the specific PDF so others see it


How to Embed a PDF Viewer in Your Website Using HTML

Here are three ways to embed PDF in an HTML site without using a PDF embed website widget.

Using the Embed Tag

Natively, the <embed> tag supports different file formats, including PDF. Here’s the default HTML code format.

  • Src specifies the location of the PDF.
  • Change the dimensions of the frame with width and height attributes.

Using the Object Tag

The <object> HTML element can be used to display full PDF on a web page.

	aria-labelledby="PDF document"
		Your browser does not support PDFs.
		<a href="document.pdf">Download the PDF</a>

Using the Inline Frame Tag

<iframe> element allows embedding external webpages, etc., on a web page. It is widely used for embedding widgets such as giveaway widgets, live chat, Comment systems such as Facebook Comments and Disqus.

Here’s an example iframe HTML code for embedding a PDF.

  • Src specifies the PDF file location. Add #toolbar=0 at the end of the file name to make it impossible to download a PDF document on a web page.
  • Use inline CSS to style PDF iframe embedder.

Final words on Best PDF Viewer Widgets

You’d have to embed a PDF in a webpage in many circumstances. In this article, we shared the top five PDF embedder plugins and three ways to use HTML to embed a PDF on a webpage without using JavaScript.

Suppose you are using a PDF Viewer widget such as Elfsight or Common Ninja. In that case, concern about the page loading speed as external JavaScript scripts could render additional resources not limited to CSS. Consider deferring script loading, using a tag manager such as Google Tag Manager or Cloudflare Zaraz, and storing PDFs on a CDN (Content Delivery Network).

When comparing top PDF embed widget providers, all services are excellent in terms of accessibility and features. Adobe’s PDF Viewer is free, while services such as Elfsight provide templates and customization options.

So, how do you embed PDFs in a website?

Leave a Comment