When you run a website, online store, or forum, you will encounter different circumstances to embed files on your site. In those cases, you will have to use a secure file viewer widget to upload and insert files into a page on your website.
In our previous guide on Top embeddable HTML PDF reader widgets for websites, you found tools you can use to embed any PDF document and add features such as download capability (or restrict downloading) and collaboration.
But what about other file formats such as DOCX (Microsoft Word document), AI (native Adobe Illustrator vector file), PPTX (Microsoft PowerPoint presentation), XLSX (Excel spreadsheet), and TXT (text document)?
How can you upload any file to your site so users can view them and download them?
That is why you should use an HTML file viewer widget on your site to embed files.
In this article, you will find out the best file embed widgets (some support 20+ file formats), features, live demos, and more.
Why should you use a file viewer?
- File viewer retains users on your site – Instead of using a file download option, using a file viewer widget on your website can increase user engagement and improve conversions. For example, embed Docx on your website instead of linking to your Google Docs document to increase user actions.
- Diversify content – Nowadays, Google and other search engines rank more than HTML pages on search engines. By diversifying content on your site, you will not only make your web page more engaging but also increase traffic from search engines. Plus, it’s easier to represent data using different file formats, such as XLSX, than using a plugin or other web widgets that will take more time to set up.
- Deliver more product info – Share technical documents, specifications, and instructions and let users know your product or service better.
- Increase Conversions – Entice users to take action by showcasing your supporting documents and product catalogs.
- Present data in the best way possible – Improve the professionalism of your business by presenting data in the most user-friendly and professional manner.
4 things to consider when using file viewer widgets on your site
- Customize the widget – Most file viewer widget builders listed below allow you to insert multiple files and change the color scheme, fonts, widget size, and more. Make use of customizing tools to integrate the file embed widget with your site using the brand color palette, font families, etc. Before adding the widget to your site, preview it on the mobile view to ensure respective files are viewable.
- Concern about the page loading speed – The last thing you want is to increase your site’s loading time because of the file reader widget! According to a report, page loading speed directly correlates with the conversion rate. You can load the file viewer widget’s script code (JS) asynchronously to load the widget after other contents are loaded on the page. Furthermore, you can use a script manager such as Google Tag Manager or Cloudflare Zaraz, limit the number of files shown on the file viewer widget and compress files (and content within files) before uploading files.
- A/B test your landing pages – You will not know if adding a file viewer to a website results in increased conversions if you do not split-test your pages — experiment using different document reader widget variations (minimalistic view, full-width, etc.) and styles.
- Use other conversion boosters – Using a file viewer widget on a site is not guaranteed to boost sales on your site. Utilize other techniques such as HTML countdown widgets (to entice urgency), Product comparison tables (compare your product with competitors and highlight USPs), customer testimonials carousels, progress bars, before and after photo sliders (to showcase performance before and after using your service/product), and high-converting checkout pages.
Best File Viewer Widgets to Embed Files Securely
Elfsight is an online service that provides 80+ apps for websites for different purposes, collecting data to improve on-site conversions. Some popular website apps are AI Form Builder, Number Counter widget, Audio Player for websites, All-in-one Reviews, and Youtube Channel widget.
Elfsight’s File Embed Widget allows you to add a customized file viewer widget to your site. Its widget editor supports 20+ file formats and includes a visual editor (preview changes to your file viewer widget live) and many customization options.
- Supports over 20 file formats – Elfsight’s File embed widget creator supports 20+ file formats such as PDF, Docx, Xlsx, GIF, and Jpeg.
- 3 ways to insert files – Direct upload from your device, Enter their URLs, or choose from the latest uploaded (from the file manager). And you can delete any file from the widget and make adjustments (ex: change file order).
- Templates – Elfsight provides a few templates to get started quickly. They are PDF files, Word Document, Excel Table, PowerPoint Presentation, Restaurent Menu, Product Manuals, Bookshelf, Downloads, and Magazine Archive. You can edit the template you choose and make changes.
- Three Layouts – Each layout is mobile-friendly.
- File Viewer – Let users view the files right from your page, allowing for scrolling and zooming.
- Grid – List files in grid format (i.e., columns and rows) with icons and names. The icon can be clicked to download the specific file.
- List – Similar to the grid format but listed in vertical order.
- Customization – Change the width & height of the widget, show/hide the download link & file icon, and set the preview image’s size, colors, fonts, and more. Plus, you can use the custom CSS to edit the widget’s appearance further.
- Check mobile responsiveness before publicizing, share widgets with others with a direct link (great to get suggestions and preapproval from others), duplicate widgets, and more.
How to create a File viewer widget on Elfsight
Use the free website file viewer widget builder below.
Or visit Elfsight from this link and create your free account. Then, find the “File Embed” widget on the apps catalog and start designing your widget.
Here’s a video tutorial on creating a file embedding widget for your website using Elfsight.
File viewer widget HTML code
Copy and paste the provided embed code where you want to display the file reader widget on your webpage.
Tip: Add the
"data-elfsight-app-lazy" attribute to the
div element to lazy load the file viewer widget on your site.
<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script> <div class="elfsight-app-2bc1fee2-1cb1-4b87-8f4e-0f20f56dd9f7" "data-elfsight-app-lazy"></div>
Docx file viewer (embed Word document on the website)
XLXS file viewer (embed Excel spreadsheet on the website)
File Grid widget (List of files with download button)
Elfsight’s File Embed widget is free to use. However, the free plan has limitations: 1 widget, 200 total views, and Elfsight branding on widgets. Its paid plans start from $5 per month, and all paid subscriptions are 100% ad-free.
Also, Elfsight has All Apps packs that provide access to 80+ apps, including the File Embed widget. Plans start from $15 per month.
Those plans are suited if you want to use multiple Elfsight widgets such as All-in-one Reviews, All-in-one Chat, Instagram feed, and FAQ accordion widgets on your website and save money. Check the Elfsight costs comparison article for price differences and agency plan details.
Powr is another popular service that provides free HTML widgets for websites ranging in different categories, from engaging visitors to boosting conversions. Some of its web apps are the pricing table creator, Google Maps widget, weather forecast widget, music player, and scroll-to-top widget.
Powr’s File Embed App is a free file viewer widget creator for websites with a visual editor (supports 10+ file extensions) and many features, including customization options.
- Multiple file type options – Embed AI, PDF, GIF, TXT, HTML, CSS, DOC, DOCX, JPG, PNG, XLS, PPT, EPS, PS, and BMP files.
- Flexible view options – Use the Google Viewer or the MS Office Viewer, depending on the file you want to display.
- Enable social sharing – Let visitors share your files online easily by adding social sharing buttons.
- Customization – The file embed plugin of Powr is easy to customize to blend with your site theme and color palette. Change colors, fonts, titles, and more. Plus, you can use custom CSS to change the file embed plugin’s appearance further.
How to make a file embed widget using Powr
Visit the Powr website from here and create your account for free. Next, search “File Embed” app on the apps gallery. Click on “Get App” and start building your file embedding widget.
Here’s a video instruction on using Powr’s File Embed plugin to create a file viewer for a website.
HTML code for File Embed widget
Microsoft Office Viewer is used for the following widget.
Powr’s File Embed web app is free to use. The free plan limits 5MB per digital download file (i.e., your file shouldn’t exceed 5MB in size) and contains Powr branding on the widget.
Paid plans start from $5.49 per month and provide access to more features depending on your subscription plan.
- Free – 5MB maximum file size, embed PDFs, PPTs, Word Docs, and more.
- Starter – $5.49/month – Powr’s branding, 20MB maximum file size, shareable entries.
Widgio is a site similar to Elfsight that provides widgets for websites. Widgio’s widgets catalog consists of 60+ widgets for different circumstances. It has widgets for displaying Google Reviews on the website, adding exit-intent pop-ups, embedding social feeds, and more tasks.
Widgio’s File Embed plugin lets you embed popular files on your site and let users download them.
- 20+ file formats – Widgio supports over twenty file formats to embed on a webpage, including PDF, Jpeg, Docx, and Xlsx. You can upload them in three ways: From your computer, by entering their URLs, and by choosing from Widgio’s gallery.
- Three layouts – File Viewer, Grid, and List. File viewer consists of zoom and scroll features, while other layouts list files with their corresponding icon (ex: PowerPoint icon for a PowerPoint presentation). Clicking the icon will open the file, allowing users to download it.
- Customization – You can customize the Widgio File embed plugin in many ways: Set widget width, show/hide the download link & file icon, and fonts & colors.
Wigio’s File Embed plugin is free to use. Its free plan is limited to one website, 200 views, and includes the Widg.io logo on widgets. Paid plans remove its logo from widgets and let you embed file viewer on multiple websites. Those plans start from ₤5 per month.
Embed Any Document [WordPress Plugin]
Embed Any Document WordPress plugin by Awsm Innovations lets you embed your PDF, Word, PowerPoint, and Excel documents easily in your WordPress website. It uses two popular document viewers (Google Docs Viewer and Microsoft Office Online) to give the viewer access to documents on your site.
Embed Any Document plugin for WordPress supports Microsoft Word (DOC, DOCX, DOCM, DOTM, DOTX), Microsoft Excel (XLS, XLSX, XLSB, XLSM), Microsoft PowerPoint (PPT, PPTX, PPSX, PPS, PPTM, POTM, PPAM, POTX, PPSM), Adobe Portable Document Format (PDF), and lets you embed files on static pages, post pages and even on your sidebar with its Document block for Gutenberg editor.
- Upload files from many places – Upload from your computer, choose from the media library, specific URL, DropBox, Google Drive, and Box.com.
- Document pre-loader – Provide better performance and user experience, especially embedding multiple files on your WordPress site. Plus, you can enable file caching and use cache plugins such as WP-Rocket, and Swift Performance and optimizer plugins such as Perfmatters to minimize the impact of those files on your site’s loading time.
- Option to choose the viewer – Choose between Google Docs Viewer and Microsoft Office Online to display your document allowing users to switch to another viewer easily if one is down. Plus, it supports browser-based viewers for PDF files.
- Cross-browser compatibility – Viewers are mobile-ready and cross-browser-compatible.
- Enable/disable download link, set width & height of file embedder, and more features.
The plugins come with several limitations:
- The viewers can only handle files of a limited size – A maximum of 8MB for Google Docs Viewer and 10MB for Microsoft Office Online.
- It does not support video/audio playback and animations/transitions in the embedded documents.
- The download and pop-out buttons cannot be removed.
Embed Any Document plugin is free to use. If you want additional features such as access to more viewers (ex: Google Drive Viewer, One Drive Viewer, Box.com Viewer), you must purchase Embed Any Document Plus. It is available on CodeCanyon.
Embed Docs [WordPress plugin]
Embed Docs WordPress plugin by A1Office lets you easily embed any kind of file, such as PDF, Word, Excel, and PowerPoint, in your WordPress websites and lets users download and rate them.
- Four viewers:
- Google Docs Viewer (PDF & Office Documents)
- Microsoft Office Online (Office Documents Only)
- Browser Native (PDF Only)
- Google Drive Viewer (Stable and high-performance viewer for documents hosted with Google Drive)
- Embed files using Gutenberg and Elementor – Embed Docs plugin provides the ‘Embed any file’ block for Gutenberg editor and is compatible with Elementor Basic and Pro.
The Embed Docs plugin is free to use.
Final words on Best File Viewer Widgets
In many circumstances, you must embed files in many formats such as Docx, CSV, PDF, PPT, and even TXT & BMP on your site. You must use a file viewer widget on your site in those cases.
Which service is suitable for your case?
If you are using WordPress to manage your site(s), plugins such as Embed Any Document and Embed Docs let you add docs viewers to your for free, and use WordPress caching to minimize the impact on your site’s page loading speed.
On the other hand, services like Elfsight let you embed files on any website or landing page created on Shopify, WordPress, Webflow, Squarespace, Weebly, Blogger, Clickfunnels, etc., and customize (and manage) widgets from one place. The point is if you want more control over your widgets, it is better to use a third-party app like Elfsight Filed Embed.
When comparing the File Viewers of Elfsight and Powr, Elfsight’s templates are more attractive and let you embed multiple files into one file viewer widget. Powr provides two choices: Microsoft Office Viewer and Google Docs Viewer.
In practice, files created using the Microsoft Office package perform better with Microsoft Office Viewer. So, Powr stands out over Elfsight in that regard.
On price-wise, Elfsight does not limit features and the maximum file size you can embed using a widget based on the subscription plan. However, Powr limits features based on the subscription.
Check our comparison on Powr vs. Elfsight to find out other differences.
What types of files can be displayed using file viewer widgets?
File view widgets can typically display a wide range of file types, including documents (such as PDFs and Word documents), Excel Spreadsheets, images, and video files.
Are there any limitations to using file viewer widgets on my website?
Some file viewer widgets may have limitations in terms of the file sizes or types that can be displayed, so it’s important to choose a widget that meets your specific needs. For example, Powr’s free plan limit the file size to 5MB.
Additionally, it’s important to ensure that you have the necessary permissions to display any files you embed on your website, especially if they are copyrighted or confidential in nature.
Are file reader widgets mobile-friendly?
Yes, many file reader widgets are designed to be mobile-friendly and responsive, meaning they will adapt to the screen size of the device being used to view them.
Do I need any special software or plugins to use file viewers on my website?
No, file viewer widgets are typically designed to work with standard web browsers using viewers such as Microsoft Office Viewer and Google Docs Viewer.
So visitors to your website should be able to view embedded files without needing any special software or plugins.