Document Viewer Pro embeds Word documents, Excel spreadsheets, PowerPoint presentations, PDF files, and HTML files in WordPress posts and pages. Visitors can read supported files in their browser without Microsoft Office installed or a browser add-on.

File sources: Media Library and cloud storage

The WordPress Media Library works with Word, Excel, PowerPoint, PDF, and HTML files. Pro also lets you select documents from Google Drive with its native picker, Dropbox with the Dropbox chooser, or OneDrive. Site-wide API settings shop the Dropbox App Key and the Google API key, Client ID, and Project Number for reuse.

Viewer options: external services and PDF.js

Microsoft Office Web Viewer and Google Docs Viewer render documents through their respective services. The selected service receives the document's public URL and fetches the file, so documents behind a login or password protection cannot render through these viewers. For PDFs, the Custom PDF Viewer uses PDF.js to render on your server. Its toolbar includes zoom, page navigation, thumbnails, and search within the document.

Display settings and document controls

Set a custom width and height in pixels or percentages, with responsive behavior for desktop, tablet, and mobile. Choose whether to display the file name and a download button above the viewer. Pro can also disable right-click and the Ctrl/Cmd + C, A, S, and P shortcuts, prevent document pop-outs, remove the full-screen expand control, and conceal the download and full-screen buttons in the Microsoft viewer toolbar. These restrictions deter common actions in the viewer; content displayed in a browser can still be copied.

The Gutenberg block groups settings into panels for the document source, viewer engine, show dimensions, and security restrictions. The block also supports wide and full-width alignment.

Add the viewer to WordPress

1. Install and activate Document Viewer Pro in WordPress.
2. If you plan to use Google Drive or Dropbox, configure the required cloud API settings.
3. Go to Office Viewer > Add New, pick a source, set the viewer and dimensions, and configure the available restrictions.
4. Add the Gutenberg block to a post or page, or generate the shortcode and place it in the Classic Editor, a widget, a page builder, or a theme template using do_shortcode().
5. Adjust the display, toolbar, and restriction settings before publishing.