How to Embed Any File on Website: PDF, Docx, Pptx etc.

Read the article to master the File Embed plugin by Elfsight. You will learn how to easily add your various files to any website. Smart preview and download ability functions guarantee a pleasant user-experience for your customers.
Try Widget in Free Demo
Share on Facebook
Share on X
Share on LinkedIn
Share on WhatsApp
Copy Link
How to Embed Any File on Website: PDF, Docx, Pptx etc.

Start Using File Viewer for Free

The File Viewer widget by Elfsight is an extraordinary way to insert PDF, Docx, Xlsx, presentations, images and many other files of various formats into websites. It is a smart solution with preview and download functions. You can display your PDF files or other documents in a pleasant manner to show the website visitor what’s in. 

The File Viewer plugin requires no programming, since you get an HTML code of the viewer to easily integrate into your website pages. Files like PDF, Pptx, Jpeg and many others will be uploaded quickly to your custom widget and you can regularly update the displayed content on the website for free.

We welcome you to make an easy start with this intuitive demo:

Make your no-code File Embed widget in several steps

  1. In the demo you can choose any template to start with.
  2. Then upload sources and adjust layout and design parameters.
  3. When you finish, go on by receiving an HTML code of your viewer.
  4. Insert it into any website for an immediate display.

Done! You are now able to display your PDF files and other documents on any page of your website.

File Viewer Plugin in Brief FAQ

Adding PDF files and other documents to websites is a breeze with Elfsight. However we are glad to present you a brief FAQ list on managing PDF, Word, Excel and other documents on your site. We will answer some basic questions and provide information on CMS compatibility. 

Diverse Questions

Is File widget free?

It is. As you can see in the Pricing menu, we have a free of charge tariff for File Embed. The free tariff plan includes all the templates and allows you to upload all the available formats.

How to get the installation code?

Become a user of Elfsight. This way you will immediately get your free HTML code of the File Viewer plugin. You can start creating the plugin before registration in our demo, or make it in the dashboard if you are already an Elfsight’s user.

What’s the integrating process like in brief?

To insert the file plugin into your website’s structure, adhere to the following tutorials:

  1. Firstly, initiate the process by opening the configurator to begin crafting your custom tool. 
  2. Next, make necessary adjustments, ensuring you save any required modifications.
  3. Once you’ve tailored the plugin to your needs, proceed by copying the unique code snippet that pops up. 
  4. Finally, insert this snippet into your pages, and remember to click ‘Save’ to finalize the integration.

Congratulations! You’ve seamlessly integrated a new plugin into your site’s framework.

Can the website visitors preview my PDF and Docx files?

Sure. We have various templates, including those with a preview displaying function. Scroll, zoom and pagination are also available for all of your PDF files, Word documents, Excel charts, images etc.

Adding the File Viewer plugin to websites

Can I embed File Viewer plugin into WordPress websites’ HTML?

Yes. Our WordPress File Viewer plugin is compatible with this website platform and functions well on it. Upon creating your custom File Viewer plugin, you will receive an HTML code for your website pages. Then just follow the tutorials on incorporating the app into a WordPress platform: 

  1. To get started, log in to your WordPress site’s backend. Once logged in, navigate to the “Appearance” section, and then select “Themes”. 
  2. Next, locate the theme you wish to edit. Click on the three dots associated with that theme, and from the menu that appears, choose “Edit”. 
  3. Now, head over to the “Pages” tab, and there, choose the one where you want to put the viewer. After selecting the page, click on the template option located on the right side. 
  4. Within the editor, pinpoint the exact spot where you’d like to display the uploads. To proceed, click on “Add Block”. 
  5. In the list of available blocks, scroll down and select “Custom HTML”. A popup window will appear. 
  6. Here, paste your HTML snippet into the window, and then, without further ado, click “Save” to preserve your changes. 

Congratulations! You’ve now successfully put the viewer on your WordPress e-store. The plugin will display any of your PDF, Docx or other documents and files on required website pages.

Can I add File Viewer plugin to Squarespace websites’ HTML?

Of course. Squarespace File Viewer plugin is designed to be seamlessly inserted into any Squarespace website. You can create your customized solution and easily incorporate the HTML snippet you receive into your desired location. Here’s how to do it:

  1. Begin by logging in to your Squarespace account. Once logged in, select the site where you want to have the app.
  2. Now, navigate to the “Website” section on the left-side menu.
  3. Next, choose the specific page on which you want to place the uploads. Click on the Gear icon associated with that page.
  4. Moving forward, proceed to the “Advanced” tab. There, paste the code, and click “Save” to apply the changes.

Congratulations! You have successfully incorporated your viewer into a specific area of your Squarespace site. Benefit from displaying your files like PDF, Docx, Xlsx or Jpeg on website pages.

Can I embed File Viewer plugin into WIX websites’ HTML?

Certainly. Our WIX File Viewer plugin can be easily created and integrated into any website using WIX CMS. The plugin will maintain proper files’ display and functionality, aiding your website’s popularity. Here’s how to incorporate the product into WIX platform:

  1. Start by logging in to your Wix account and select the site where you want to display the app. Then, click on “Edit Site” to proceed.
  2. Next, locate the “Plus” icon and navigate to the “Embed” section. In this section, select “Embed a Widget” from the “Custom Embeds” tab.
  3. Now, click on “Enter Code”, where you can paste your HTML snippet. After pasting, click “Update” to continue.
  4. To ensure proper placement, drag the viewer to the desired area. Adjust its size by stretching it until scroll bars are no longer visible, and all the necessary information fits within the block.
  5. Transitioning to the mobile editor is also straightforward; simply click on the “Mobile” icon. In the mobile editor, adjust the size as needed. Finally, remember to click “Publish” to make your changes live.

Congratulations! By following these instructions, you have successfully incorporated your viewer into the specific page on your Wix site. The plugin will display your PDF, Docx, Pptx and other formats as intended.

FAQ Can I add File Viewer plugin to Webflow websites’ HTML?

Absolutely. Webflow File Viewer plugin is compatible with any website created using this CMS. After creating your custom viewer, you can easily add it to Webflow platform by following these simple steps:

  1. Begin by logging in to your Webflow account and selecting the specific site where you want to integrate the plugin.
  2. Next, click on the “Plus” icon to initiate the process. Then, from the left-hand menu, drag and drop the “Embed” element to the website page where you want to display the File Viewer plugin.
  3. Now, paste your installation code into the “HTML Embed Code Editor” window that appears. After that, click “Save & Close” to proceed.
  4. To customize your settings, navigate to the right-hand menu. Make the necessary adjustments, and when you are satisfied, click “Publish”. Finally, confirm your changes by selecting “Publish to Selected Domains”.

Congratulations! By following these instructions, you have successfully incorporated the plugin into your Webflow site. You can now upload PDF, Docx, Xlsx and other types of formats.

Can I embed File Viewer plugin into Shopify websites’ HTML?

Absolutely. Your custom Shopify File Viewer plugin will work on any website pages as required. When your custom viewer is ready, you’ll receive an HTML fragment to insert into your Shopify site. Here’s a step-by-step guide to easily incorporate the HTML fragment:

  1. Start by logging in to your Shopify admin panel. Go to “Sales Channels” and select “Online Store”.
  2. Now, click the “Customize” button to proceed with customization.
  3. Upon entering the visual editor, you’ll notice that the home page is opened by default. To choose a different one, locate it in the dropdown list at the top of the page.
  4. To integrate the plugin, proceed to the next step. Click on “Add Section”.
  5. From the available options, select “Custom Liquid”.
  6. Inside the “Custom Liquid” field, paste the installation code. Additionally, you can customize the color scheme and adjust top/bottom paddings if necessary. Once you’ve made your desired changes, make sure to save them.

Fantastic work! Following the brief tutorials, you have successfully added the HTML code of your Elfsight File Viewer plugin to the required page of your Shopify website. Now your PDF, Docx, Jpeg and other files can be displayed on a website page in a pleasant way.

If you happen to be a user of other CMS platforms, fret not. Within our Help Center, you will discover comprehensive guidance on how to create and install plugins, integrating them into your website. Furthermore, you’ll also find solutions to tackle any technical issues you may encounter.

What’s Special about No-Code File Viewer Plugin?

Analyzing market needs and user experience from all over the internet, we design our products, in order to be both useful and convenient. We focus on unique features for our customers from any business field, whereas it is important for us to make the product appealing and user-friendly for your customers too.

Here, we suggest a chart of benefits that you obtain by choosing the Elfsight File Viewer widget for your website. The benefits concern layout, design and navigation aspects, selection of templates, CMS compatibility and many others:

Upload 20+ formats of files to any websiteYou can effortlessly embed over 20 different file formats, such as Docx, Xlsx, PDF, Pptx, and more. This variety allows you to display technical documents, specifications, instructions, certificates, and any other necessary files directly on your website.
Opt from 3 handy ways to add file to website pagesOur file manager plugin provides three convenient methods for adding documents and files to your page. You can upload files from your computer, insert URLs, or choose from recently-uploaded files on the website, ensuring a smooth and efficient process.
Adjust viewer’s layout for immediate viewingOur no-code File Viewer plugin layout enables immediate displaying on website pages, with features like scrolling, pagination, zooming, full-screen viewing, and downloading available to users, enhancing their browsing experience on your site.
Display active file icons with Grid and List layoutsWith Grid and List layouts, you can display clickable file icons with titles, offering website users the option to click and open files in new browser tabs while also providing a direct download option. You have the flexibility to show or hide the Download label for a streamlined user interface.
Enjoy fully customizable file iconOur widget automatically identifies file formats and displays the corresponding icons. However, if you desire customization, you can upload your own file preview image or even opt to hide the icon entirely, presenting files and documents solely by their titles.
Explore 6 paintable elements of the interfaceWe understand the importance of visual consistency. Therefore, our viewer offers six paintable elements, allowing you to match the colors of names, backgrounds, download links, icons, titles, and backgrounds to your overall website style.
Adjust font sizes and widthElfsight’s no-code File Viewer widget offers a versatile set of features that empower you to seamlessly insert and customize files and documents on your website pages, providing a user-friendly experience for your visitors while maintaining visual cohesion with your website’s design.

How It will Look on Your Website

In this section we will explore some examples that we constructed to provide you with a better understanding of the product. You can use our examples as a foundation for your future projects.

Example 1: PDF File

An attractive recipe PDF is seamlessly incorporated, offering users the convenience of reading it directly on the site. Should they wish to download it, they can easily do so using the Download label located in the upper right corner. Furthermore, the File Viewer widget’s layout provides functionalities like scrolling and zooming for an enhanced displaying experience.

File Embed example 1

Example 2: Word Document

Our viewer allows you to effortlessly share extended multi-page documents, enabling users to view them in their entirety. Users can smoothly scroll through the document and utilize zoom options for convenience. Additionally, a simple click on the pop-out icon in the upper right corner opens the document in a new browser tab.

File Embed example 2

Example 3: Excel Table

In this particular case, the viewer serves to seamlessly integrate an Excel chart into a website. The File Viewer widget’s layout grants users the ability to thoroughly review the document directly on the website. Importantly, the viewer preserves all the original document features, including Excel sheets, which are shown in an Album layout here.

File Embed example 3

Example 4: PowerPoint Presentation

 You can enhance your site’s content by showcasing PowerPoint presentations. As demonstrated here, the presentation is shown in full view, complete with all pictures and diagrams, allowing users to scroll, zoom, and paginate as needed. Furthermore, website users can easily download the displayed file by clicking on the Download label.

File Embed example 4

Example 5: Restaurant Menu

 This example showcases items presented with custom icons that align with the website’s theme and concept. The widget creates cohesive content units with the help of custom background colors for each document tile. These tiles are clickable and open in a new browser tab upon clicking, offering seamless navigation.

File Embed example 5

Example 6: Product Manuals

Consider creating a grid to provide customers with comprehensive product information. Theme icons visually differentiate the products, simplifying navigation. The grid also features automatic column distribution, adjusting the number of columns based on the available width for optimal presentation.

File Embed example 6

Example 7: Bookshelf

In this case, the design undergoes a complete transformation to create an eye-catching content unit that harmonizes with the website’s overall aesthetics. Unique background colors, book covers serving as icons, and custom width contribute to a visually appealing view.

File Embed example 7

Example 8: Magazine Archive

Elfsight’s widget empowers you to publish an archive of PDF documents with user-friendly navigation. In this example, magazine issue names display their publishing dates for quicker searching. Each issue includes a convenient Download button for easy access.

File Embed example 8

Example 9: Downloads

Should you need to seamlessly integrate uploads into your website in a clean and minimalist manner, our widget can assist you in achieving just that. In this instance, a minimalist and clean list format is utilized on a website, featuring a custom header and straightforward PDF file names with extensions.

File Embed example 9

Explore More File Embed Examples

Word Document Viewer
Embed a Word Document on your website, adding a touch of convenience with this viewer file plugin.
Excel Spreadsheet Uploader
Creating an Excel Spreadsheet for a website can present complex data file sets in a compelling format with this uploader.
PowerPoint Viewer
Adding PowerPoint files with this viewer widget enables your website users to engage with your content seamlessly.
PDF Uploader
Create an accessible format for PDF files with this uploader template, boosting engagement on a website.
Restaurant Menu File
Add a file widget to your website to display items, simplify menu updates, and keep your patrons informed.
Product Manuals File
Embed product manuals and guide files on your website in a user-friendly widget format for better customer support.
Bookshelf File
Create an immersive reading experience by showcasing books, magazines, or files with this bookshelf widget on your website.
No Suitable Template?
You can easily assemble the widget you need using our simple-to-use configurator.

Outcomes for Your Business

The free Elfsight File Viewer widget is a powerful tool that enables businesses to seamlessly upload various formats, including PDFs, Docx, Xlsx, Jpeg, and more, directly to their websites. This versatile widget not only benefits businesses but also enhances the overall user experience, making it a win-win solution for all stakeholders.

  • Enhanced User Experience
    One of the primary benefits that businesses gain from adding the Elfsight File managing widget to websites is an improved user experience. By inserting the File Embed into their websites, businesses can provide users with direct access to important documents and resources.
    For instance, an e-commerce site can offer product manuals and guides in PDF format, allowing customers to make informed decisions. This enhanced user experience leads to higher customer satisfaction and, ultimately, increased conversion rates.
  • Streamlined Information Sharing
    Online businesses often need to share a wide array of images, charts or presentations with their audience, from sales brochures to annual reports. The widget simplifies this process by allowing businesses to add files directly to their websites, eliminating the need for users to navigate to external platforms.
    This streamlines information sharing and ensures that users can access crucial materials without any hassle, fostering trust and credibility.
File Embed preview 1
  • Increased Website Engagement
    Interactive and informative content is key to keeping website visitors engaged. The File Embed widget enhances website engagement by allowing businesses to present dynamic PDF, Docx, Xlsx, presentations and images directly on their pages.
    For instance, a travel agency can embed interactive maps, brochures, and booking forms, creating an immersive user experience that encourages longer website visits and greater interaction with the business.
  • Brand Consistency
    Maintaining brand consistency is essential for businesses across all online platforms. With the widget on the website, companies can customize the appearance of embedded PDF and other files to align with their branding guidelines.
    This includes choosing colors, fonts, and even using branded icons, ensuring that every piece of content on the website reflects the business’s identity. This consistency fosters brand recognition and trust among customers.
In addition, you can combine this solution with other Elfsight products like Google Reviews. This will increase trust to your uploads on the website indicating that your business is solid and real. Or maybe you might need a Facebook Feed to enhance the vividness of the website encouraging visitors to explore your materials.

Summary on File Embed

In our exploration of the free Elfsight’s File Viewer widget, we’ve uncovered a versatile and valuable tool for enhancing your website’s functionality and user experience. Here’s a recap of what we’ve learned:

FAQ section: Creating and managing the widget with ease

  • We’ve gained valuable insights into how to effortlessly create and manage the File Viewer widget, enabling the seamless upload of PDFs and various other documents to any website.
  • Elfsight widgets are compatible with all popular website builders, ensuring that you can integrate this free, no-code File Viewer with ease.

Examples: Real-world scenarios and creative possibilities

  • We’ve delved into practical examples that showcase the File Viewer widget’s flexibility, from adding product PDF manuals to sharing interactive maps on the website.
  • These scenarios were brought to life with screenshots, giving you a clear understanding of how this widget can transform your site.

Benefits: Empowering your business and delighting your visitors

  • We’ve explored the myriad benefits that the File Viewer by Elfsight adds to your website and its visitors, including enhanced user experiences, streamlined information sharing, increased engagement, and brand consistency.
  • We’ve also provided tips on how to leverage the File Viewer widget alongside other Elfsight products for a comprehensive and seamless online presence.

We invite you to visit our Community where you can leave feedback and comments on any aspect of our File Viewer. You can find use cases of other e-store holders or share your own experience with the thankful and friendly audience.

File Embed widget Elfsight Community 1

We appreciate your time spent discovering the capabilities of the File Viewer widget for websites by Elfsight. 

If you have any more questions or require further assistance, please don’t hesitate to visit our Help Center. We’re here to help you make the most of this powerful tool and enhance your site’s functionality with Docx, Xlsx, images etc. 

Thank you for choosing Elfsight, and welcome to a world of endless possibilities for your online business!