How to Embed PDF on Any Website

PDF document format is one of the most popular around the world. One can present restaurant menus, manuals, presentations, resumes, archives, ebooks, and many other types of content.

Although PDFs make content more diverse, adding them to the website can be quite challenging. First of all, it’s difficult to embed this kind of file on the website because most PDFs prompt users to download them without previewing what’s there. Secondly, converting PDFs to HTML is complicated and unreliable. So, it’s better to use a pre-designed solution called widget, as it solves all the problems with the flip of a switch. 

Benefits of using a PDF Embed widget

If you use a ready-made solution, such as a PDF Embed widget, there’s no need for you to code. You’ll simply choose a PDF which you wish to place on your web page, upload it to the widget, copy and paste two lines of code, and voila! - you’ll see it there at the same moment. 

What is more, you can create the preview of a PDF file in a visual editor, which means no web developer or designer is needed.

If you choose specifically Elfsight PDF Embed, you’ll have many more amazing benefits:

  • Customizable headings, colors, size of the window
  • Your website visitors can preview, view, download, print out the files
  • Opportunity to add and organize any number of PDFs
  • Switchable heading, file icon, and Download file link
  • Option to upload PDF to widget, place it there by URL, or choose them from recently uploaded

And other great perks. You can explore all of them in the free online demo.

You’ll be able to configure the PDF viewer visually, by switching the sliders and choosing the offered styling options.

PDF Embed widget

Elfsight offers widgets that work on all platforms: Squarespace, Google Sites, Wix, WordPress, and many others. By the way, if you wish to extend the functionality of your website, you are always welcome to choose among other tools.

Now, it’s high time to learn how to add PDFs depending on your website builder and CMS.

How to embed a PDF in HTML with Google Tag Manager

There’s an opportunity to add a PDF file to an HTML code of the site in two different ways. You can simply copy and paste installation code that appears in popup after you create the widget in the admin panel to the place where you need it. 

However, there are some cases, when you can’t insert a PDF to an HTML code of the website because there’s no opportunity to add custom HTML code there. In this case, you need a special tool called Google Tag Manager, so you are able to add custom blocks of code (HTML and JS) to any website without any doubt.

Here’s how to embed a PDF file in Google Tag Manager:

  1. Log in or sign up in Google Tag Manager
  2. Create a new tag there, choose ‘Custom HTML’
  3. Put the first line of the Elfsight installation code to the created tag
  4. Create a trigger for adding the tag to the web page
  5. Save the tag and publish the changes

That’s it! Now, you’ll be able to add a custom HTML anywhere you wish, even on platforms where there’s no opportunity to do so.


How to Add PDF to WordPress

As WordPress gives a chance to create any website from a small blog to a huge marketplace, it’s always a bright thought to position various types of content there, in particular PDFs. 

Very likely you wish not to waste your time and genuinely want your files to look professionally on the site. In such circumstances, the wisest decision is to apply a special widget. 

Benefits you get by using a widget

  1. You don’t have to code anything
  2. There are numerous templates offering professional ideas for your PDFs
  3. You create the widget yourself, without a web developer or designer, and you never bother about the widget's design and functionality
  4. You can try out the widget in a free online demo

With the Elfsight plugin, you’ll be able to immediately customize PDFs the way you wish, enhance the UX in just seconds and place numerous PDF files on the website. 

Features of the Elfsight PDF Embed plugin:

  • 3 layouts available: List, Grid, and File Viewer
  • File inserting by choosing files from the recently uploaded, pasting URLs, or uploading
  • Opportunity to turn off and on the Download document text
  • Chance to insert any number of files
  • Personalizable colors, fonts and PDF icon
  • And so much more! 

You are welcome to take a closer look at the widget on this page.

Moreover, bear in mind that there are eight premade customizable templates that you are free to easily find in the free online demo. You are most welcome to discover how to display diverse types of PDFs, whether it’s product manuals, a restaurant menu, or a library of ebooks. Below, are some of the examples, have a look: 

Embed PDF File

PDF file on wordpress

Restaurant Menu

restaurant menu for wordpress

Product Manuals 

Product manual for wordpress

How to add a PDF Embed plugin to a WordPress website

You can add the Embed plugin to WordPress  in diverse ways. You may easily do it on your own after watching a video and viewing our guideline on this page. 

Below there are a few more ways to add the PDF plugin to WordPress. For example, you can add the widget with the help of Google Tag manager

Install the plugin through WordPress admin panel

  1. Copy your installation code at Elfsight apps
  2. Go to WordPress admin panel
  3. Go to Pages in left-hand menu and select the page to display the widget
  4. Add a custom HTML block to the required part of the page
  5. Paste your widget code to this block
  6. Update the web page

That’s it, your widget will appear on the web page as soon as this!

Ask a professional Elfsight support team to help:)

Yes, if you use a widget on any paid plan, you are always most welcome to drop them a line and they’ll be happy to add the PDF plugin for you. Simply reach them out through the Elfsight Help Center and acquire your PDF plugin added by professional developers!


How to upload PDF to Squarespace

As Squarespace gives a chance to create any website: from a small blog to a huge multi page one - it’s not a bad idea to position diverse types of content there, including PDF files. 

Most likely you wish to gain time and truly need your files to look professional on the site. In this case, the wisest choice is to use an exclusive widget. 

Benefits you get by using a widget

  1. You don’t have to code anything
  2. There are numerous templates offering professional ideas for your PDFs
  3. You create the widget yourself, without a web developer or designer, and you never bother about the widget's design and functionality
  4. You can try out the widget in a free online demo

With the Elfsight plugin you can instantly place any number of PDF files on the website, enhance the UX in just seconds and customize them the way you wish. 

Features of the Elfsight PDF Embed plugin 

  • Opportunity to turn on and off the Download document text
  • Opportunity to add any number of files
  • File inserting by choosing files from the recently uploaded, uploading, or pasting URLs
  • Customizable colors, fonts and PDF icon
  • 3 layouts available: List, Grid, and File Viewer

And many other perks! 

You are welcome to explore the widget in greater detail on this page.

In addition, take into consideration that there are 8 professional adjustable templates that you are free to quickly find in the free online demo. You are most welcome to explore how to display different types of PDFs, whether it’s a restaurant menu, a library of ebooks, or product manuals. Here you can find some of the examples, enjoy:

Embed PDF File

PDF File on Squarespace

Restaurant Menu

restaurant menu for Squarespace

Product Manuals 

product manuals on Squarespace

How to add a PDF Embed plugin to a Squarespace website

There’s an opportunity to add the plugin to Squarespace in a few various ways. You may easily do it yourself after checking our guideline and minding a video on this page

Below you’ll find a few more ways to add the PDF plugin to Squarespace. For instance, you may add the tool with the help of Google Tag manager

Install the plugin through Squarespace admin panel

  1. Log into the website admin panel
  2. Near the area where you need to present the widget, click ‘Edit’
  3. Find the option ‘Code’
  4. Paste installation code to the ‘Code’ block
  5. Save the changes

That’s it! The widget is successfully installed.

Ask a professional Elfsight support team to help :)

Yes, if your widget is on any paid plan, you are always most welcome to drop them a note and they’ll be happy to install the PDF widget for you. Barely reach them out through the Elfsight Help Center and obtain the PDF plugin added by professionals!


How to Add a PDF to Wix

Wix allows one to create any website for both small and large business, and it’s a good idea to provide website visitors with PDFs there. 

Probably you want to save your time and truly need your files to look professionally on the website. In this case, the best choice is to apply a special widget. 

Benefits you get by using a widget

  1. You don’t have to code anything
  2. There are numerous templates offering professional ideas for your PDFs
  3. You create the widget yourself, without a web developer or designer, and you never bother about the widget's design and functionality
  4. You can try out the widget in a free online demo

With the Elfsight plugin you’ll be able to promptly place any number of PDF files on the website, enhance the UX in just seconds and customize them the way you wish. 

Features of the Elfsight PDF Embed plugin 

  • Opportunity to add as many files as you wish
  • Switchable Download document text
  • Customizable fonts, colors and PDF icon
  • Three layouts available: Grid, List, and File Viewer
  • File pasting by uploading, choosing files from the recently uploaded, or pasting URLs

And many other benefits! 

You are most welcome to explore the widget in greater detail on this page

Also, take into consideration that there are eight professional adaptive templates which you are free to easily discover in the free online demo. You are free to discover how to show various types of PDFs, whether it’s a library of ebooks, product manuals, or a restaurant menu. Here are some of the templates, enjoy: 

Embed PDF File

PDF file on Wix

Restaurant Menu

Restaurant Menu on Wix

Product Manuals 

Product manuals on Wix

How to add a PDF Embed plugin to a Wix website

There’s a chance to add the Embed plugin to Wix in a few different ways. You may effortlessly do it yourself after watching a video and reading our guideline on this page

Below there are some more methods to install the PDF app on Wix. For example, you can add the widget with the help of Google Tag manager

Install the plugin through Wix admin panel

  1. Log into Wix admin panel and click ‘Edit site’
  2. Click a Plus icon in the left panel and choose ‘Embed’ section
  3. Pick ‘HTML iframe
  4. Move the widget block where you want it to appear and modify its size
  5. Click ‘Enter code’ and paste the installation code there.
  6. Click ‘Apply’

That’s how easily you can embed a PDF app on a Wix website.

Ask a professional Elfsight support team to install it for you:)

Yes, in case your widget is on any paid plan, you can always drop them a line and they’ll be happy to install the PDF widget for you. Barely contact them through the Elfsight Help Center and acquire the PDF widget installed by professionals!


How to insert PDF into Google Sites

Google Sites give an opportunity to create any landing pages, so it’s always an amazing thought to present PDF materials there. 

Very likely you wish to gain time and really wish your files to appear professional on the website. In such circumstances, the wisest decision is to use an exclusive widget. 

Benefits you get by using a widget

  1. You don’t have to code anything
  2. There are numerous templates offering professional ideas for your PDFs
  3. You create the widget yourself, without a web developer or designer, and you never bother about the widget's design and functionality
  4. You can try out the widget in a free online demo

With the Elfsight plugin you’ll be able to promptly place numerous PDF files on the website, customize them the way you wish, and enhance the UX in just seconds. 

Features of the Elfsight PDF Embed plugin 

  • Customizable fonts, PDF icon and colors
  • Switchable Download document text
  • Opportunity to add as many files as you wish
  • File embedding by pasting URLs, choosing files from the recently uploaded, or uploading
  • Three layouts included: File Viewer, Grid, and List

And many other perks! 

You are free to explore the widget in greater detail on this page

Also, take into account that there are eight professional customizable templates which you are free to quickly discover in the free online demo. You are most welcome to consider how to display various types of PDFs, whether it’s product manuals, a library of ebooks, or a restaurant menu. Here are some of the examples, have a look: 

Embed PDF File

PDF File on Google Sites

Restaurant Menu

PDF REstaurant menu on Google Site

Product Manuals 

Product Manual PDFs on Google Sites

How to add a PDF Embed plugin to a Google Sites website

You can add the plugin to Google Sites in a few diverse ways. You may effortlessly do it on your own after checking our guideline and watching a video on this page

Here are a few more ways to add the PDF plugin to Google Sites. For instance, you can attach the widget with the help of Google Tag manager

Install the plugin through Google Sites admin panel

  1. Log into your admin panel
  2. Select the website you’d like to edit
  3. Click ‘Embed’ icon, ‘Embed code’ tab
  4. Paste your installation code and click ‘Insert’
  5. Adjust the widget position on a website and save the changes.

Everything’s as easy as this! Your plugin will be installed in these few simple steps.

Ask a professional Elfsight support team to help: )

And, of course, in case you use a widget on any paid plan, you can always ask them for installation and they’ll be happy to install the PDF widget for you. Just reach them out through the Elfsight Help Center and get the PDF widget added by professional developers!


How to put a PDF on Facebook

There’s no opportunity to add PDFs to Facebook posts, however, you can add a custom tab to a Facebook page. Your page should have at least 2000 likes. Also, you’d better use some third party solutions, such as Woobox.

Here’s what you’ll need to do: open the dropdown menu in the upper right corner and choose your page -> click Static Tabs in the menu -> press Create a New Tab -> choose HTML Tab -> in the appeared editor, add your content or enter the code -> Press Save Settings. 

And you are done!


How to post a PDF on Instagram

Instagram is a platform that’s used to share visuals. Although you can’t share PDFs there in any way, you can leave a link to the web page with a PDF widget in your bio or story. People will be able to check the document right from your profile, download the file or print it out.


PDF Examples

Here are the best examples of embedded PDFs on a website. Get inspired by our premade templates and feel free to customize them, so they become an essential part of your website.

PDF Embed file

The most common and functional example of PDFs on a website, where you’ll be able to demonstrate a single file at its best.

Research Embed

Here you’ll have an opportunity to add a multi-page research to the web page, and your visitors will get acquainted with all the pages in a pdf viewer.

Bookshelf

Here’s a wonderful template to present multiple PDFs in one widget, so it looked like a bookshelf of ebooks. You can add jpg covers to your PDF books with ease!

Anyway, if you wish to personalize the widget and give it the trendiest look, you can do it in the free live configurator. It will take 5 minutes and you’ll never have to code. Also, there’s an opportunity to upload as many files as you want, change preview images, customize colors, sizes, fonts, links and so on. Feel like a designer or professional web developer.

FAQ

There are several questions that might be covered in this article. You might be wondering how to use PDF files on a website more efficiently, what’s the difference between PDF viewer and reader, or how to convert pdf to other formats, as well as other formats to PDF. 

We’ve written a brief outline of the most common topics for your smoother and more rational use of PDFs on websites.

What is a PDF Viewer?

File viewer allows you to view PDF files right on the website without uploading it to any servers or your PC. Your users won’t need to install any third-party software to view files presented on your website, they’ll preview it directly on a web page. 

Elfsight PDF embed is an instrument of that kind. Any of your users will be able to open files presented on the website without having Adobe Acrobat PDF Reader extension or anything like that  installed on their computer.

What is a PDF Reader extension?

Such an extension allows you to open PDFs in Reader while browsing the web. It means the PDF file you wish to see will open in a special desktop app. There is a number of them, for example:

  • Acrobat Reader
  • Kami
  • Soda PDF
  • Smart PDF

They are extensions for the browser you use and will open PDF files in your PC (if you have an app for reading and commenting the file.

How to convert PDF format to Word?

To do this, you’ll need Acrobat DC. Open the needed file there -> click ‘Export PDF’ in the right pane -> choose the required text format which is ‘Word Document’ -> Press ‘Export -> Save your new Word file in DOC or DOCX format and enjoy the result!

How to convert JPG to PDF?

You can combine a number of JPG images and create a book consisting of them. There are a lot of services allowing you to do so, websites are among them, for instance, jpg2pdf. Also, you can upload a single image and make it PDF.

What PDF Editors are free?

Most official PDF editors are not free. However, they give you features you don’t want. You can find some free tools which allow you to create and edit Portable Document Format files, which is probably all you need. They include:

  • Smallpdf
  • PDF-XChange Editor
  • PDFescape

How to combine PDF files on a website?

The only answer to this question is: use a PDF embed widget! You’ll be able to unite any number of PDF files in a single container, customize its look, make a bookshelf or archive of ebooks and emagazines.