PDF viewer for Elementor allows you to quickly and easily embed one or more PDF files for viewing whether they are hosted on your own domain or on a remote domain.
You can define layout options to filter the actions available to your visitors like downloading or printing the exposed files.
PDF files can be embedded in the page or opened in a Modal box with a button or text.
Table of Contents
Accessibility for the PDF viewer widget
Enter / Space keyboard keys on button/text to trigger the viewer
aria-label text 'Open PDF file' of the button/text
aria-expanded to indicate whether the viewer is expanded or not
aria-controls to identify the HTML tag whose contents are controlled
aria-haspopup equal 'dialog'
Tab keyboard key inside the viewer to move between links or controls
Enter / Space keyboard keys inside the viewer on close button (X) to close the viewer
Escape keyboard key exit the viewer
Use the PDF viewer component
The plugin Elementor is installed and active.
The plugin EAC components is installed and active.
From the settings panel (EAC advanced) you have to drag & drop the PDF viewer icon on the panel preview.
Select the origin of the pdf and how to display it
The PDF file is loaded from the media library or from an URL. Access to the files of the media library is done by a custom control
The PDF file is embedded in the page or opened in a Modal box
Origin URL supports Dynamic ACF File or ACF Group File tags
Create a link to the PDF file in Google Drive
- Use the ‘Get Shared Link’ option in Google Drive to get the URL
- Original Url: https://drive.google.com/file/d/XXXXX/view?usp=sharing
- Target Url: https://drive.google.com/uc?export=view&id=XXXXX
Copy the ID from the original to the target and you obtain the Url.
Trigger the modal box and select the viewer options
Trigger options
If you have select the Modal box to display the PDF file you can choose the type of trigger, either a button or free text and then make the necessary adjustments.
Viewer options
– Show or hide the left toolbar
– Show or hide the right toolbar
– Display or not the ‘Download’ button
– Display or not the ‘Print’ button
– Select the zoom level when opening the PDF
Apply styles to affected elements
In the Style tab you can apply the styles relative to the options you have selected before.
– so if the PDF file is embedded into the page you can modify the dimensions and the style of the file container
– for the Modal box size the width of the container, the height is calculated automatically
– and finally if the PDF is opened in a modal box, you can modify the style of the button or the text that triggers its opening
PDF Viewer examples
The first PDF is Embedded into the page from the media library.
The right toolbar is active but the Download button is disable.
Somehow, when I put more PDF’s at a single page, one keeps failing to load.
Any ideas?
When I reupload, the error goes on to a random other PDF..
Hi Steven,
Do you have a page address on a staging server?
Otherwise you may have another PDF reader plugin. If so, disable it and check.
Rgdsa
Hi, just get an error “"allow_url_fopen" is disable” displayed in the embedded viewer.
I’m using Elementor Pro 3.17.1
Hello Max,
The ‘allow_url_fopen’ directive in your PHP version must be set to ‘Off’.
If you have the ‘cpanel’ interface you can activate this option for your current version of PHP otherwise you must request it from your web hosting.
Rgds.
Hi, this looks amazing!
Unfortunately though I’m not managing to get it to work. When I try to load pdfs in a a modal overlay, it does load the same webpage in the Lightbox instead of the pdf. See the 2 buttons at the bottom of this page: innovationroundtable.com/attend/epfl-2023/
I’ve tried deactivating a bunch of plugins that are connected to Elementor, in some cases it did happen that it eventually loaded the viewer with a pdf in it, but only one of the 2 buttons and I even just reloading the page with no changes on it nor change of active / deactivated plugins was allowing me to replicate it, aka it was loading the page instead of the pdf in the Lightbox – so at this stage I don’t seem to see a direct correlation with a specific plugin causing the issue.
Any clue? Thanks for your help!
Hello Vittorio,
The issue comes from the theme ‘innovation-20-21’ which embeds the script ‘jquery-latest.min.js’ even though we only use the standard version of jQuery from WordPress version ‘6.4.0’.
Check with the theme creator if it is possible to temporarily remove the script so that you can do new tests on a staging server.
Rgds
After some research I found this link which may help you
==> https://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/
Rgds
I’m having an issue where it’s throwing the following error “Invalid token. Refresh the current page…” – any idea what causes this?
Hello Ben,
We use a token (nonce) to prevent the execution of malicious scripts and the illicit modification of content.
Usually this problem is related to cache.
I you have any cache plugin installed, please disable temporarily that and see if that solves the issue or exclude the page from the cache plugin.
Secondly clear Browser cache, sometimes, browsers store outdated nonces in their cache.
Hope to have helped you.
Rgds
Hello there
I saw that Steven had a similar problem almost two years ago.
I am using the updated versions of Elementor and EAC.
I have a post archive page with the PDF document viewer EAC on each of the listed posts. It gives an error with the first one in the list on each page (the loading wheel keeps spinning).
Looking at the Chrome inspector I see the following error:
jquery.min.js?ver=3.7.1:2
Allow attribute will take precedence over ‘allowfullscreen’.
Ae @ jquery.min.js?ver=3.7.1:2
referring to this line of code:
a.innerHTML = u[1] + ce.htmlPrefilter(o) + u[2],
If I reload the page, it loads the document fine in the viewer but same thing appears in the inspector.
Can someone help me? I’m going crazy…
Thanks in advance!
Hello Victor,
Sorry for the inconvenience.
We may have a solution to this issue,
but can you please change the display mode from ‘Settings/display type: embedded to Modal box” and tell us if the issue persists
and in addition to your answer put the URL of the PDF file.
Rgds
Hi chichille
Can you help me with this issue?
It is an urgent matter and if there is no solution, I have to look for another alternative.
Thaks in advance!
Regards
Hello Victor,
Use the ‘Contact us’ button in the footer to send me the famous URL
If not, you’re right, there are other plugins that will certainly do the job
Rgds.
Hello am using ACF to embeb a pdf but having http : la requete a echoué
Hello Moussa,
Sorry for the inconvenience
Please send me the URL of the PDF file with the ‘Contact us’ form at the bottom of the page.
Rgds
Hello
I have a strange problem! when you are logged in as an administrator on the front office, the pdf is not visible? but as a classic user or as a guest, it is visible? thank you very much!
Hello Laurent,
There are no restrictions concerning this component, the only explanation I can see is that you have activated display conditions (Tab Advanced/EAC display conditions) and assigned a rule to the component or container.
Rgds
Hi,
I have 2 questions:
1) is there a way to add an ID attribute to the – so to enable Google Tag manager to track when visitors click on the button and view the pdf?
For Elementor buttons, the “Button ID” attribute works –> it adds an id=”…” attribute to the . Here I’ve tried to set attributes as title|view-pdf or id|view-pdf as custom link attributes, but they don’t appear in the front end. I’ve tried with css-ID too, but that does not work as it goes at the level and not
2) how can I clear the cache?
I can see then when I upload a new version of a pdf, the viewer still shows the older one, even if I purged the cache both at domain level (Cloudflare) and in WordPress (WP Super Cache). Of course after some time also the cached version of the viewer gets updated, but is there a way to purge that cached version directly?
Thanks in advance for your help!
Best regards,
Vittorio
Hello Vittorio,
First, although you haven’t replied to me, I see that your last issue has been solved!
For the first question, you should consider using a plugin. There are some great ones in the WordPress store.
Secondly, as you probably know, it’s your client’s browser cache that sticks the pages.
To bypass this issue and without modifying the code, add this action to the Functions.php file of your theme or child theme.
Don’t forget to fill in the slug for the PDF viewer page.
Not really testing everything.
I’ll send you the code by email.
Rgds
Translated with DeepL.com (free version)