How to embed a PDF on a webpage

In this article we will go over a few different ways to embed a PDF file on your website, which option suits you best depends on a lot of factors. Some of these factors include which CMS (Wordpress, Wix, Asekio) you're using, how you want the PDF to be displayed, if you want to prevent users from being able to download or print the PDF or not.

Pure HTML embed

This is an advanced option in the sense that you need to understand the basics of editing html in order to use it. Not all CMS systems allow you to add HTML directly but it’s still the option that will work in most cases. Another benefit is that you don’t need to install any plugin or things like that.

In this example we're going to use the Google Docs Viewer to render the PDF, this way the PDF will show up to users even if their browser does not support PDF files (which is the case with Chrome on Android devices).

The url to the PDF that you want to display needs to be URL encoded in order for Google Docs Viewer to load it correctly. To make this super easy we created a small tool where you enter the url to your PDF file and it will generate the embed code for you.

Below is an example of how the html code for embedding a PDF with Google Docs Viewer looks like. If you want to use it all you need to do is replace the https://pdfobject.com/pdf/sample.pdf link with your own url encoded one.

This is what your embedded PDF will look like using this method

PDF Embedder plugin for Wordpress

If you're using Wordpress as your CMS and don’t want to fiddle around with HTML there is a great plugin called PDF Embedder which does all the work for you.

We won't cover how to install Wordpress plugins in this article, if you need help installing the plugin we suggest reading the official documentation about finding and installing plugins.

When you have installed the PDF Embedder plugin you just need to add a new block to the page where you want to display the PDF. When adding the new block select the PDF Embedder block type. The block will show a button labelled “Click here to Open Media Library to select PDF”, click this and in the Media Library dialog select or upload the PDF file that you want to display and you're all done. The preview in edit mode will not display the PDF, but on the published page it will display the PDF like in the image below.

This is what your embedded PDF will look like with the PDF Embedder plugin for Wordpress.

Embedding a PDF with Asekio

If you're using Asekio as your CMS system it’s super easy to embed a PDF, we're going to use Google Docs Viewer to maximise the chances that your users can see the PDF even if their browser doesn't support PDF files.

The url to the PDF that you want to display needs to be URL encoded in order for Google Docs Viewer to load it correctly. A super simple way is to use this online url encoder, simply paste your url in the text area and press the encode button and copy the url encoded version from the text area and you're done.

Now in the Asekio editor go to the page where you want to display your PDF and press the plus icon where you want to insert your PDF.

Now click the cogwheel in the upper right corner of the Highlight button.

Now press the Embed button.

In the settings menu past the following Google Docs Viewer url https://drive.google.com/viewerng/viewer?embedded=true&url= into the url text area. After the final equal sign, paste your url encoded url.

And now you're all done and your embedded PDF will look like this.

Build a complete website in seconds with AI technology.