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 information: 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’s File Embed Widget
Elfsight is an online service that provides 90+ 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, a visual editor (preview changes to your file viewer widget live), and many customization options.
Features
- 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 (e.g., change file order).
- Templates — Elfsight provides a few templates to get started quickly. They are PDF files, Word Documents, Excel Tables, PowerPoint Presentations, Restaurant Menus, Product Manuals, Bookshelf, Downloads, and Magazine Archives. 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.
The embed code includes two parts: a Javascript file and an HTML div element with a class name.
<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>Note: You only need to load the JavaScript file (ending with /platform.js and bolded above) once, even if you embed multiple file viewer widgets on your site. It is the same even when you use other Elfsight widgets, such as Elfsight AI Form Builder.
Demos
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)
Pricing
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 $6 per month (or $5 per month, paid annually), and all paid subscriptions are 100% ad-free.
Also, Elfsight has All Apps packs that provide access to 90+ apps, including the File Embed widget. Plans start from $15 per month.
Those plans are suitable if you want to use multiple Elfsight widgets, such as All-in-one Reviews, All-in-one Chat, Calculator, and Instagram feed widgets on your website and save money. Check the Elfsight costs comparison article for price differences and agency plan details.
Click here to explore Elfsight.
Powr File Embed App
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. It has a visual editor (it supports 10+ file extensions) and many features, including customization options.
Features
- 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 — You can use either Google Viewer or Microsoft 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.
- Google Tag Manager/ Google Analytics integration, previewing the widget on mobile before publicizing, adding collaborators, duplicate file embed widgets, sharing widgets with others with a shareable link, custom JavaScript, and more features.
How to make a file embed widget using Powr
Visit the Powr website and create your account for free. Next, search for the “File Embed” app in the apps gallery. Click on “Get App” and start building your file-embedding widget.
Here’s a video on using Powr’s File Embed plugin to create a file viewer for a website.
HTML code for File Embed widget
Copy and paste the HTML code for the file embed widget where you want to display it. Like Elfsight, you only need to place the JavaScript file once, even though you use multiple file viewer widgets and other Powr plugins, such as the PayPal button widget.
Demo
Microsoft Office Viewer is used for the following widget.
Pricing
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 – No Powr’s branding, 20MB maximum file size, shareable entries.
- Pro – $13.49/month – No Powr’s branding, 100MB maximum file size, shareable entries, custom CSS & JavaScript.
- Business – $89.99/month – No Powr’s branding, 1GB maximum file size, shareable entries, custom CSS & JavaScript, and Business upgrade for all 60+ POWR apps suite.
Widgio’s File Embed Plugin
Widgio is a site similar to Elfsight that provides website widgets. Its catalog consists of 60+ widgets for different circumstances. It has widgets for tasks such as displaying Google Reviews, exit-intent pop-ups, embedding social feeds, and more.
Widgio’s File Embed plugin lets you embed popular files on your site and let users download them.
Features
- 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.
Pricing
Wigio’s File Embed plugin is free to use. Its free plan is limited to one website and 200 views and includes the Widg.io logo on widgets. Paid plans remove the logo from widgets and let you embed a file viewer on multiple websites. Those plans start at ₤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.
Therefore, it won’t work on localhost WordPress sites, intranet, and files hosted in any password-protected environment. But will work perfectly on your online [WordPress] sites.
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.
Features
- 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.
- Document block for block editor for easier document embedding, document pre-loader feature for improved performance, 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.
The Embed Any Document plugin is free to use. However, if you want additional features, such as access to more viewers (e.g., Google Drive Viewer, One Drive Viewer, Box.com Viewer), you must purchase Embed Any Document Plus. It is available on CodeCanyon. See a live demo on this page.
Click here to explore the Embed Any Document plugin.
Final words on Best File Viewer Widgets
In many circumstances, you must embed files in formats such as Docx, CSV, PDF, PPT, and even TXT and BMP on your site. In those cases, you must use a file viewer widget on your site.
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 document viewers 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.
Price-wise, Elfsight does not limit features or 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.
FAQs
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 limit 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 limits 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.