How to embed PDFs in WordPress?

It may be necessary to show a PDF document on your website, but the user should not leave the website. In this case, you must embed the document directly into a PDF viewer on your website. However, WordPress is not capable of embedding PDF files with its built-in features. We will show you how to embed a PDF document on your WordPress site using a free plugin to solve this issue.

Why you should NOT embed PDF files?

If you try to embed a PDF file into your website, you should think twice if there is no way around it. There are several reasons not to use PDF files embedded in websites:

• PDF documents are not responsive. This means that it does not adapt to the screen size of the viewer. For this reason, the PDFs are often barely readable on mobile devices like smartphones.
• PDF documents are not part of the content of your page. Instead, they are always separate files that are loaded in addition to your page. This means that Google doesn’t consider the content of your PDF document to be part of your page, and people won’t find that page in Google even if they could find the answer to their question in your PDF.
• PDF documents are often large files. It takes a lot of time and bandwidth to download a PDF file that is several MB large. Especially on mobile devices with poor connection conditions, this can be frustrating for your vistors.

Instead of embedding a PDF file, you should consider how you can restructure your content to fit as part of your website, and insert your website content directly into your website as text, images, etc.

Embedding a PDF file into your WordPress site

If you want to embed a PDF file into your WordPress site despite the above mentioned disadvantages, you will need a WordPress plugin. A good solution for this need is Algori PDF Viewer, a free plugin on wordpress.org.

1. Open the backend of your WordPress website and go to Plugins.
2. Click the Add New button at the top of the page and search for the Algori PDF Viewer plugin.
3. Install and enable the Algori PDF Viewer plugin.
4. Go to Media.
5. Upload the PDF document to your WordPress media library.
6. Go to the Edit Post dialog of the post or page, where you want to embed your PDF document.

The following steps depend on which editor or page builder you use on your website. Algori PDF Viewer has explicit support for the standard WordPress editor Gutenberg. For all other editors you will have to work with some HTML code.

With Gutenberg

7. Click the small + button to add a new block to your content.
8. Select the PDF Viewer block.
9. In the inserted block, you can now select the PDF document that you have previously uploaded for embedding.
10. In the right sidebar of the Gutenberg editor you will find additional settings for the block, such as the height or width of the PDF Viewer block.

Without Gutenberg

7. You have to add the following HTML snippet in your editor in the text mode:

<div class="wp-block-cgb-block-algori-pdf-viewer">
    <iframe class="wp-block-cgb-block-algori-pdf-viewer-iframe" src="https://devowl.io/wp-content/plugins/algori-pdf-viewer/dist/web/viewer.html?file=https://test.devowl.io/wp-content/uploads/demo-pdf-document.pdf" style="width:600px;height:300px"></iframe>
</div>

8. Replace https://test.devowl.io/wp-content/uploads/demo-pdf-document.pdf with the URL of your PDF document. You can find out the URL in your media library by clicking on the uploaded PDF file to see details about this upload.
9. If you want to resize the embedded PDF document, you must replace the size in the width:600px;height:300px part of the code snippet.

More features with Algori PDF Viewer Pro

The WordPress plugin Algori PDF Viewer is available for free, but you can purchase a more advanced version called Algori PDF Viewer Pro for a few bucks if you want more features like enable/disable PDF download, print, search in PDF, or set the initial zoom level.

If you already have many files in your WordPress media library – whether they are PDF documents or other types of files – you can use our WordPress plugin Real Media Library to organize them into folders, collections and galleries. This will save you a lot of time in finding the right file!