Embedding a PDF
Inserting a PDF is as easy as uploading an image into a WordPress page. If you use Classic Editor, 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’. If you use the Guttenberg block editor, you’d need to add a “PDF Embedder” block and then click on it to select a PDF document from WP Media.
You should see a ‘shortcode’ like this:
[pdf-embedder url="https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf"]
Code language: JSON / JSON with Comments (json)
Alternatively, if you are using a Block Editor, you will see a new block being inserted.
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"]
Code language: JSON / JSON with Comments (json)
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’).
[pdf-embedder url="https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf" toolbar="top"]
Code language: JSON / JSON with Comments (json)
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.
[pdf-embedder url="https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf" toolbarfixed="on"]
Code language: JSON / JSON with Comments (json)
It is not possible to add a Download PDF button to the toolbar – this is only available in the premium version.
Mobile-friendly
PDF Embedder Premium (any paid plan) has an intelligent ‘full screen’ mode. When the document is smaller than a certain width, the document displays only as a ‘thumbnail’ with a large ‘View in Full Screen’ button for the user to click when they want to study your document. This opens up the document so it has the full focus of the mobile browser, and the user can move about the document without hitting other parts of the web page by mistake. Click Exit to return to the regular web page.
By default, if the embed area is narrower than 500 pixels, the document will appear as a thumbnail with a large ‘View in Full Screen’ button.
You can change the cut-off width (or eliminate it entirely) by adding a mobilewidth parameter: e.g. mobilewidth="200"
, or "0"
to always display the interactive document at any screen size. A ‘Full Screen’ button is always available on the toolbar, regardless.
[pdf-embedder url="https://mysite.com/wp-content/uploads/2015/01/Plan-Summary.pdf" mobilewidth="200"]
Code language: JSON / JSON with Comments (json)
See PDF Embedder Premium instructions for more information.
Secure PDFs (Premium Secure or Pro+ Plan only)
If you purchased the Pro Plan (or previously purchased the Secure version of the plugin) – which makes it difficult for users to obtain the original PDF directly – all your PDF uploads after upgrading to Pro Plan or higher and installing the new plugin ZIP should be ‘secure’ by default. That is, they should be uploaded to a /securepdfs/
sub-folder of your uploads area. These files should not be accessible directly, and the plugin provides a backdoor method for the embedded viewer to obtain the file contents.
See PDF Embedder Secure instructions for more information.