Embedding a PDF

Inserting a PDF is as easy as uploading an image into a WordPress page. In your page/post editing screen, click 'Add Media'. Drag and drop your PDF anywhere into the media library and then click 'Insert into post'.

You should see a 'shortcode' like this:

[pdf-embedder url="https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf"]

When you publish the post or page, this should display as an embedded document viewer for your users to step through the PDF!

Customizing the viewer

You can change the shape and toolbar appearance of all embeds on your site (i.e. set site-wide defaults) through the page Settings -> PDF Embedder in your WordPress admin.

All the settings there can also be overridden for individual embeds by adding parameters to the shortcode to configure how the document displays.

Size and Shape

You can optionally override width and height as follows:

[pdf-embedder url="https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf" width="500"]

Note the default value for width is 'max'.

Resizing works as follows:

  • If width='max' the width will take as much space as possible within its parent container (e.g. column within your page).
  • If width is a number (e.g. width='500') then it will display at that number of pixels wide.

In all cases, if the parent container is narrower than the width calculated above, then the document width will be reduced to the size of the container.

The height will be calculated so that the document fits naturally, given the width already calculated.

It is possible to specify a fixed height (e.g. height="200"), in which case the document may be cut off vertically.
The height will be reduced to fit if it is larger than needed to display the document correctly.

Customize the Toolbar

Toolbar Location

Add toolbar="[top|bottom|both]" to the shortcode to change the location of the Next/Prev toolbar (default is 'bottom').

E.g. [pdf-embedder url="https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf" toolbar="top"]

Toolbar Fixed/Hover

Add toolbarfixed="on" (default is 'off') to keep the toolbar open at all times rather than only when the user hovers over the document.
Note this extends the length of your embedded area.

E.g. [pdf-embedder url="https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf" toolbarfixed="on"]

It is not possible to add a Download PDF button to the toolbar - this is only available in the premium version.