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
Top 5 PDF Embed and Viewer widgets for websites
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 1 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:
- 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 PDF viewer widget builder below.
(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: Use the
"data-elfsight-app-lazy" attribute on
div element to lazy load the PDF viewer widget on your site to minimize the impact of the widget on the page loading speed. Check out the example code below:
<script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-761b5edc-9b76-42e5-b110-9f135edd4d27" 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, 200 views per month. ElfSifght’s paid plans start from $5 per month.
All Apps Pack plans start at $15/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, like Elfsight, is a free widget provider for websites with over 50 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.
- Multiple Layouts – The PDF embed widget for websites comes with five layout options. Embed, Gallery, List, Designed List, and Grid.
- Fully customizable – Change colors, fonts, spacing, and more with basic and advanced customization settings.
- Custom CSS – Miss any customization option? Use custom CSS to style the widget.
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.
Its paid plans start at $5.00/month.
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.
- 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.
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.
- 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:
- 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.
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.
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
<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
<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>
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, Disqus, and interactive Google Maps widgets.
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
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. Check out the differences between Powr and Elfsight in this article.
So, how do you embed PDFs in a website?