Document the new Pro PDF Viewer widget

Adds the docs-site page and the website marketing copy for the PDF
Viewer widget shipped in Pro 20260908.1.

- docs: full widget guide (source, zoom, toolbar, styling, gotchas),
  listed in the Pro getting-started widget index, with the usual two
  placeholder screenshots to be replaced with real captures.
- getting-started: PDF Viewer noted as having no WooCommerce or ACF
  dependency.
- marketing: widget page plus a "What's included" entry and an updated
  strapline on the Pro overview.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

docs/dotjuice-elementor-tools-pro/getting-started.md

@@ -6,7 +6,7 @@ Dotjuice Elementor Tools Pro requires:
 
 - **The free [Dotjuice Elementor Tools](../dotjuice-elementor-tools/getting-started.md) plugin**, installed and active — Pro is an add-on, not a standalone plugin.
 - **Elementor** (required by the free plugin).
-- **WooCommerce**, for every WooCommerce-related widget (all of them except ACF Frontend Form).
+- **WooCommerce**, for every WooCommerce-related widget (all of them except ACF Frontend Form and PDF Viewer).
 - **Advanced Custom Fields (ACF)**, only for the ACF Frontend Form widget.
 - **Elementor Pro**, only for Woo Quick View's popup and the [EspoCRM Lead Capture](espocrm-integration.md) integration (Forms is an Elementor Pro feature).
 
@@ -24,6 +24,7 @@ If a specific widget is missing:
 
 - **All WooCommerce widgets** need WooCommerce active.
 - **ACF Frontend Form** needs Advanced Custom Fields active.
+- **PDF Viewer** has no plugin dependencies at all beyond your Pro licence.
 - **Woo Quick View** needs **Elementor Pro** for its popup functionality — without Elementor Pro, its button falls back to a plain link to the product page instead of opening a popup.
 
 ## Widget guides
@@ -33,6 +34,7 @@ If a specific widget is missing:
 - [Woo Quick View](widgets/woo-quick-view.md)
 - [Woo Custom Product Tabs](widgets/woo-custom-product-tabs.md)
 - [ACF Frontend Form](widgets/acf-frontend-form.md)
+- [PDF Viewer](widgets/pdf-viewer.md)
 
 ## Integrations
 

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

@@ -0,0 +1,77 @@
+# 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.

marketing/dotjuice-elementor-tools-pro/overview.md

@@ -1,4 +1,4 @@
-The premium widget set for serious WooCommerce stores — AJAX product filtering, a fully custom cart, quick view, custom product tabs, frontend ACF forms, and watermark-free screenshots.
+The premium widget set for serious WooCommerce stores — AJAX product filtering, a fully custom cart, quick view, custom product tabs, frontend ACF forms, an on-brand PDF viewer, and watermark-free screenshots.
 
 ### Built for stores that have outgrown the basics
 
@@ -14,6 +14,7 @@ The free Dotjuice Elementor Tools plugin covers the everyday styling gaps in Woo
 
 **Woo Custom Product Tabs** — a full rebuild of the WooCommerce product tabs area as a styleable desktop-tabs/mobile-accordion component: add unlimited custom tabs, show or hide any custom tab per product by category, tag, brand or attribute, and style deep into your reviews and rating form.
 
+**PDF Viewer** — display brochures, manuals, price lists and menus directly on your pages in a fully styleable viewer with page navigation, zoom, fullscreen, download and print, instead of a download link or the browser's own unstyleable PDF plugin.
 
 **ACF Frontend Form** — let visitors edit Advanced Custom Fields content directly from the front end, using ACF's own native form interface, no admin access required.
 

marketing/dotjuice-elementor-tools-pro/widgets/pdf-viewer.md

@@ -0,0 +1,15 @@
+Show PDFs properly on your pages — brochures, manuals, price lists and menus, in a viewer that matches your site instead of the browser's.
+
+#### The problem it solves
+
+Putting a PDF on a WordPress page usually means one of two things: a plain download link that sends visitors away from your site into a file manager, or an iframe that hands the document to whatever PDF viewer their browser happens to have. That viewer looks different in Chrome, Safari, Firefox and Edge, carries its own grey toolbar that clashes with every design, can't be styled at all, and on several mobile browsers refuses to display inline — leaving some visitors with a blank box or a forced download.
+
+#### How it helps
+
+The PDF Viewer widget renders the document itself, page by page, as part of your page. The toolbar, buttons, page indicator, background and the page's own border and shadow are all controlled from the Elementor panel, so the viewer looks like it belongs to your site rather than the browser. Visitors get page navigation, zoom, fullscreen, download and print — and you decide which of those they get, hiding any button you'd rather not offer. Only the page being viewed is loaded, so a long brochure opens quickly, and lazy loading keeps a viewer further down the page from slowing the first paint. Files come from your media library or any external URL, and everything renders identically for every visitor.
+
+#### The result
+
+Documents that are genuinely part of your site — read in place, on brand, on every browser and device, with no download step and no jarring hand-off to a viewer you don't control.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/pdf-viewer" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>