dotjuice-plugin-docs/docs/dotjuice-elementor-tools-pro/widgets/pdf-viewer.md

# PDF Viewer

Found in the Elementor panel under **Dotjuice → PDF Viewer**. No WooCommerce or ACF dependency — it only needs an active Pro licence.

Displays a PDF — from your media library or an external URL — as a self-contained viewer built into your page: one page at a time on a styleable canvas, with a toolbar for navigation, zoom, fullscreen, download and print.

![The PDF Viewer widget settings in the Elementor panel](../assets/img/pdf-viewer-controls.png)
*Screenshot: the widget selected in the editor with the PDF File section open, showing the Media Library / External URL source toggle and the Lazy Load switch.*

## How it works

The widget draws each page itself using PDF.js (a copy of which ships inside the plugin — nothing is loaded from a third-party CDN), rather than handing the file to the browser's built-in PDF plugin in an iframe. That matters because the native viewer looks completely different from browser to browser, can't be styled, and on some mobile browsers refuses to display inline at all. Here, every visitor sees the same viewer, and it inherits the colours, borders and spacing you set in Elementor.

Only the page being viewed is fetched and decoded, so opening a 200-page brochure doesn't mean downloading and rendering all 200 pages up front. Pages are rendered at the visitor's device pixel ratio, so text stays sharp on retina and high-DPI screens.

![The PDF Viewer on the front end](../assets/img/pdf-viewer-frontend.png)
*Screenshot: a PDF displayed on a page, with the toolbar showing page navigation, zoom buttons, fullscreen, download and print.*

## Content settings

### PDF File

| Setting | Default | What it does |
|---|---|---|
| **Source** | Media Library | Media Library (pick or upload a PDF) or External URL (a PDF hosted elsewhere). |
| **Upload PDF** / **PDF URL** | — | The file itself, depending on Source. |
| **Download Filename** | Source filename | Suggested filename for the Download button. Browsers only honour this for files on your own domain — for a PDF on another domain the browser names the file itself. |
| **Initial Page** | 1 | The page shown when the viewer first loads. A number past the end of the document is clamped to the last page. |
| **Lazy Load** | On | Don't fetch or render the PDF until the widget scrolls into view (loading starts about 200px before it reaches the viewport). Turn it off for a viewer above the fold that you want ready immediately. Lazy loading is always disabled inside the Elementor editor, so the widget previews straight away while you're designing. |

### Zoom

| Setting | Default | What it does |
|---|---|---|
| **Default Zoom** | Fit Width | **Fit Width** scales the page to the width of the viewing area, **Fit Page** scales it so the whole page fits within the area's height as well, and **Custom Percentage** uses a fixed zoom. |
| **Zoom Level (%)** | 100 | The fixed zoom, used only when Default Zoom is Custom. |
| **Minimum (%)** | 25 | Lower limit for the toolbar's zoom-out button. |
| **Maximum (%)** | 400 | Upper limit for the toolbar's zoom-in button. |

The Minimum and Maximum also cap the Fit modes, so a page that would need to shrink below your minimum to fit is drawn at the minimum instead and scrolls inside the viewing area.

### Toolbar

Turn the toolbar on or off, place it at the **Top** or **Bottom** of the viewer, and show or hide each of its parts independently:

| Part | What it gives the visitor |
|---|---|
| **Page Navigation** | Previous/Next buttons plus a page-number box showing `3 / 24`. The arrows disable themselves on the first and last page, and the number box can be typed into to jump straight to a page. |
| **Zoom Buttons** | Zoom in and out in 25% steps, between your Minimum and Maximum. |
| **Fullscreen Button** | Expands the viewing area to fill the screen, on a dark background, and returns with Escape. |
| **Download Button** | Downloads the original PDF file. |
| **Print Button** | Prints the original PDF, not a picture of the page on screen — so print output is full quality rather than a screen-resolution raster. |

## Setting it up

1. Add the widget and choose your PDF. Media Library is simplest — it also gives the Download button a sensible filename automatically.
2. Set the viewing area's **Height** under Style → Viewing Area. This is the fixed height the viewer occupies in your layout; if the page is taller than that at the current zoom, it scrolls within the area.
3. Pick a **Default Zoom** to suit the document. Fit Width suits text documents such as manuals and price lists; Fit Page suits single-page, poster-style PDFs where the whole thing should be visible at once.
4. Hide any toolbar buttons you don't want — for example, dropping Download and Print on a document you'd rather people read on the page.
5. Style the toolbar, buttons, page indicator and the page's own border and shadow to match your site.

## Styling

**Toolbar** — background, padding, and border; button icon size with separate Normal and Hover icon colours; page indicator colour and typography.

**Viewing Area** — height (responsive, in px or vh), background colour, padding, and a border and box shadow applied to the page itself, which is what gives the "sheet of paper on a desk" look.

**Loading / Error Text** — the colour of the loading message, a separate colour for error messages, and typography for both.

## Good to know

- The viewer shows **one page at a time** with Previous/Next controls rather than a continuous scroll. That keeps the widget's height predictable inside an Elementor layout instead of growing with the length of the document.
- **Once a visitor presses a zoom button, the viewer stays at that zoom.** The Fit modes re-fit the page when the browser is resized or a phone is rotated, but zooming manually is treated as taking control, so it won't be undone by a later resize. Reloading the page returns to your Default Zoom.
- **External PDFs need to allow cross-origin access.** Because the widget fetches and renders the file itself rather than embedding it, a PDF on another domain will only load if that server sends an `Access-Control-Allow-Origin` header permitting your site. Most file hosts and CDNs do; some do not, and a Dropbox or Google Drive share link generally won't. If an external PDF shows "Sorry, this PDF could not be loaded", this is almost always why — the fix is to upload the file to your own media library instead. PDFs from your own site are never affected.
- **Print on an external PDF may open a new tab instead of a print dialog.** Printing works by loading the original file invisibly and printing it; browsers block that for files on another domain, so the widget falls back to opening the PDF in a new tab for the visitor to print from there.
- The status area shows **"Loading PDF…"** while the file downloads and **"Sorry, this PDF could not be loaded"** if it fails — the second one styled in its own error colour. In the editor, a widget with no file selected shows a dashed placeholder box rather than an empty space.
- Very large PDFs still take a moment to open, because PDF.js reads the document's structure before it can draw page one. Lazy Load keeps that cost off your initial page load.