Add a PDF viewer to Elementor

PDF viewer for the free version of 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.

Accessibility for the PDF viewer widget

Activate the component PDF viewer

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
PDF origine media file
Select the origin of the pdf
Select how the PDF is displayed
PDF URL dynamic ACF file
You can choose Dynamic ACF File

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
Select the trigger options Button or Text
¨DF settings viewer
Select viewer options

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
Styling the embedded file
Styling the Modal box
PDF styling trigger button
Styling the trigger button

PDF Viewer examples

The first PDF is Embedded into the page with the ‘Download and Print’ buttons disabled.

  • The PDF file is opened from the media library.

The second PDF is opened in a Fancybox after clicking on the button.

  • The right and left toolbars are disabled but the ‘Download and Print’ buttons are active.
  • The PDF file is opened from a remote domaine.

9 thoughts on “Add a PDF viewer to Elementor”

  1. 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..

    Reply
    • 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.

      Reply
  2. 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!

    Reply
  3. I’m having an issue where it’s throwing the following error “Invalid token. Refresh the current page…” – any idea what causes this?

    Reply
    • 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

      Reply

Leave a Reply to chichille Cancel reply