MaxtDesign

<p>MaxtDesign PDF Viewer is a performance-focused PDF embedding solution for WordPress. Unlike other PDF plugins that load heavy JavaScript libraries upfront, this plugin uses a smart lazy-loading approach that keeps your pages fast.</p>
<h4>Key Features</h4>
<ul>
<li>Instant Preview – Server-generated WebP preview images display immediately</li>
<li>Zero Layout Shift – CSS aspect-ratio reserves exact space before content loads</li>
<li>Lazy Loading – Full PDF.js viewer loads only when needed</li>
<li>Gutenberg Block – Native block editor integration</li>
<li>Shortcode Support – Works in classic editor and widgets</li>
<li>Keyboard Navigation – Full keyboard and screen reader accessibility</li>
<li>Mobile Optimized – Touch gestures for page navigation and zoom</li>
</ul>
<h4>Performance</h4>
<ul>
<li>Initial page load: < 10KB JavaScript</li>
<li>First paint: < 200ms</li>
<li>Full viewer: Loads on-demand</li>
<li>Preview images: Optimized WebP format</li>
</ul>
<h4>How It Works</h4>
<ol>
<li>Upload a PDF to your media library</li>
<li>The plugin automatically extracts the first page as a WebP preview</li>
<li>Insert the PDF using the Gutenberg block or shortcode</li>
<li>Visitors see an instant preview image</li>
<li>Clicking “View Document” loads the interactive PDF.js viewer</li>
</ol>
<h4>Requirements</h4>
<p>For automatic preview generation, your server needs one of:</p>
<ul>
<li>ImageMagick with PDF support (recommended)</li>
<li>Ghostscript</li>
</ul>
<p>The plugin will detect available options and use the best method automatically.</p>
<h4>Shortcode Usage</h4>
<p>[pdf_viewer id=”123″]</p>
<p>Attributes:</p>
<ul>
<li>id (required) – Attachment ID of the PDF</li>
<li>width – CSS width value (default: 100%)</li>
<li>load – When to load viewer: click, visible, immediate (default: click)</li>
<li>toolbar – Show toolbar: true/false (default: true)</li>
</ul>
<h3>Privacy</h3>
<p>This plugin:</p>
<ul>
<li>Does not collect any personal data</li>
<li>Does not send data to external services</li>
<li>Stores preview images locally on your server</li>
<li>Uses PDF.js library loaded from your own server</li>
</ul>


MaxtDesign PDF Viewer

The fastest PDF viewer for WordPress. Sub-200ms load times, zero layout shift, and a beautiful reading experience.

Roger

<p>This is a PDF viewer plugin that allows you to embed your PDF catalogs, magazines and brochures as flipbooks on your web site in HTML5 format for free.</p>
<p><a href="https://flowpaper.com/" rel="nofollow ugc">FlowPaper Home Page</a> | <a href="https://flowpaper.com/app/" rel="nofollow ugc">Flipbook Maker</a> | <a href="https://flowpaper.com/demo/" rel="nofollow ugc">Examples</a></p>
<p>The plugin supports the majority of browsers and devices. It is currently limited to PDF documents that are 15 megabytes or smaller for PDFs that are not uploaded to FlowPaper cloud.<br />
To publish larger PDF documents, customize the look and to show the viewer without FlowPaper branding, please visit our homepage. It supports both light and dark themes.</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/tdCxHbfrYQY?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p><strong>How to embed a PDF using a URL:</strong></p>
<ol>
<li>Add a the plug in shortcode to a post like this: <code>[flipbook pdf="http://full-url/document.pdf"]</code></li>
<li>Change the PDF Url (“http://full-url/document.pdf”) to a PDF file you want to display. Voila!</li>
</ol>
<p><strong>How to embed a new PDF uploaded to WordPress:</strong></p>
<ol>
<li>Click on the “Media” link in the left panel</li>
<li>Upload your PDF document</li>
<li>Click on the uploaded PDF document and copy the URL to the PDF file</li>
<li>Create a new post and add the shortcode <code>[flipbook pdf="http://full-url/document.pdf"]</code> to your post. Update the url in the shortcode to the URL you copied from your media library</li>
</ol>
<p><strong>How to embed a publication uploaded to FlowPaper Cloud:</strong></p>
<ol>
<li>Make sure the publication is uploaded to FlowPaper cloud using the desktop publisher</li>
<li>Copy the link that the desktop publisher created for you</li>
<li>Create a new post and add the shortcode <code>[flipbook pdf="http://online.flowpaper.com/publication"]</code> to your post. Update the url in the shortcode to the URL you copied from the desktop publisher</li>
</ol>
<p><strong>Customizing Theme</strong></p>
<p>Style of the viewer theme (default: “dark”) by adding the “theme” parameter and setting it to either “light” or “dark” like this: <code>[flipbook pdf="http://full-url/document.pdf" theme="light"]</code></p>
<p><strong>Opening in a Lightbox overlay</strong></p>
<p>You can display a cover of your publication and open it in a lightbox overlay by supplying the “lightbox” and “cover” parameters like this: <code>[flipbook pdf="http://full-url/document.pdf" lightbox="true" cover="https://flowpaper.com/images/demo/zine-magazine@2x.jpg"]</code></p>
<p><strong>Setting Header</strong></p>
<p>You can modify the header that is displayed (default: “Loading viewer …”) by adding the “header” to the embed code like this: <code>[flipbook pdf="http://full-url/document.pdf" header="Opening catalog..."]</code></p>
<p><strong>Setting Publication Title</strong></p>
<p>You can modify the publication title that is displayed (default: PDF title) by adding the “title” to the embed code like this: <code>[flipbook pdf="http://full-url/document.pdf" title="Fashion catalog 2016"]</code></p>
<p><strong>About FlowPaper</strong></p>
<p>FlowPaper is a publishing platform that uses a number of technologies to bring your PDF documents to the web in the most beautiful friendliest ways possible.<br />
For a full set of features and an unbranded viewer, please use the flipbook maker available at the <a href="https://flowpaper.com/" title="FlowPaper home page" rel="nofollow ugc">FlowPaper home page</a>. This plug in is built so that people can experience one of our pdf viewers as easy as possible.</p>
<h3>Customizing</h3>
<h4>Parameters:</h4>
<ul>
<li><strong>pdf</strong> – source of the PDF you want to embed: <code>[flipbook pdf="http://flowpaper.com/example.pdf"]</code>;</li>
<li><strong>width</strong> – width in pixels or in percents: <code>[flipbook width="100%"]</code> or <code>[flipbook width="600"]</code>; by default width=”100%”;</li>
<li><strong>height</strong> – height in pixels: <code>[flipbook height="500"]</code>; by default height=”500″;</li>
<li><strong>theme</strong> – sets the theme for the viewer: <code>[flipbook theme="light"]</code>; “dark” by default;</li>
<li><strong>singlepage</strong> – lets you to force the viewer to only show one page at the time: <code>[flipbook singlepage="true"]</code>; “auto” by default which selects single page if the publication uses landscape pages;</li>
<li><strong>lightbox</strong> – opens the viewer in a lightbox overlay when clicked: <code>[flipbook lightbox="true"]</code>; “false” by default;</li>
<li><strong>cover</strong> – sets a image cover to be used for the viewer. Useful in combination with the lightbox setting: <code>[flipbook cover="http://domain.com/myimage.png"]</code>;</li>
<li><strong>header</strong> – sets the header for the viewer: <code>[flipbook header="Custom Header"]</code>; “Loading viewer …” by default;</li>
<li><strong>title</strong> – sets the title for the viewer: <code>[flipbook title="Custom Title"]</code>; taken from the PDF by default;</li>
<li><strong>id</strong> – allows to add the id of the flowpaper frame: <code>[flipbook id="custom_id"]</code>; removed by default;</li>
<li><strong>same_height_as</strong> – allows to set the height of flowpaper same as target element: <code>[flipbook same_height_as="div.sidebar"]</code>, <code>[flipbook same_height_as="div#content"]</code>, <code>[flipbook same_height_as="body"]</code>, <code>[flipbook same_height_as="html"]</code>; removed by default;</li>
</ul>


flowpaper

Flipbook PDF viewer - all you need is a PDF : [flipbook pdf="https://flowpaper.com/example.pdf"]

MaxtDesign PDF Viewer vs flowpaper