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.
- Using HTML
- 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 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.
Features
- 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:
- File viewer – PDF file will be displayed on the page.
- Grid – PDF files will be grouped in rows and columns.
- 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.
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>Demo
PDF viewer widget
Pricing
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.
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.
CommonNinja PDF Embed Widget
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.
Features
- 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.
Demo
Pricing
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.
Its paid plans start at $10.00/month.
Click here to try CommonNinja.
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.
Features
- 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.
Demo
Pricing
Powr’s PDF EMBED app is free of cost. But, the free plan comes with several limits.
Related: Powr vs. Elfsight: Which widget provider is good for you?
Adobe View SDK
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.
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.
Now, open the playground and generate the embed code for the Adobe PDF viewer widget.
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"});
adobeDCView.previewFile(
{
content: {location: {url: "https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
metaData: {fileName: "Bodea Brochure.pdf"}
});
});
</script>- Control the width and height of the widget.
- Replace <YOUR_CLIENT_ID> with your PDF embed API key.
- Upload the PDF to Adobe Document Cloud (free hosting) or paste the URL for the PDF (Hosted by you).
- Change the Meta file name, which will appear at the top of the PDF embedder.
Demo
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.
Click on the three dots in the top right corner and click the “Open in new tab” option.
Click the three dots icon again, and now choose the “Embed item” option.
A popup with a PDF embed code will appear. Copy it.
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.
Demo
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.
<embed
src="document.pdf"
type="application/pdf"
width="100%"
height="100%"
/>Srcspecifies 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.
<object
data="document.pdf"
type="application/pdf"
width="100%"
height="100%"
aria-labelledby="PDF document"
>
<p>
Your browser does not support PDFs.
<a href="document.pdf">Download the PDF</a>
</p>
</object>- The
dataattribute defines the location of the PDF. It could be the relative or absolute path of the URL.
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.
<iframe
src="document.pdf#toolbar=0"
width="100%"
height="100%"
style="border:none"
></iframe>Srcspecifies 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?