{"id":2721,"date":"2023-05-04T18:07:41","date_gmt":"2023-05-04T12:37:41","guid":{"rendered":"https:\/\/hostkicker.com\/blog\/?p=2721"},"modified":"2023-05-04T18:07:41","modified_gmt":"2023-05-04T12:37:41","slug":"beginner-guide-to-add-a-pdf-viewer-in-wordpress","status":"publish","type":"post","link":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/","title":{"rendered":"Beginner Guide to Add a PDF Viewer in WordPress"},"content":{"rendered":"<p><span data-preserver-spaces=\"true\">Do you often provide content in the form of PDFs to your site users? If yes, you might wonder if you could add a PDF viewer in WordPress.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">PDFs are a great way to provide vast and complex information to users in an organized manner. However, users can&#8217;t access the information directly on your site. This is because PDFs are incorporated into the content using a link, and they mostly open in a new tab once users download them.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Adding a PDF viewer on the website allows you to embed PDFs on your site and provide the content to users directly from your website without redirecting to a new tab. This can lead to plenty of benefits which we&#8217;ll discuss further.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Do you also want to learn ways to add a PDF viewer to your website? If so, this guide is specially created for you. In this blog, we&#8217;ll explore the benefits and two easy and practical ways to add a PDF viewer in WordPress.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">So, without further ado, let&#8217;s get started!<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">Why must you add a PDF viewer in WordPress?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">PDFs are a popular file format for documents, and many website owners use them to share information with their audience. You can upload a PDF file to your website and provide a download link for it. However, simply linking to a PDF file can be inconvenient for users and can hamper the user experience of a website. This is because they have to download and open the PDF in a separate application.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Users need a quick solution to their queries rather than following a lengthy process of downloading the PDF and then accessing the information. This is especially helpful for users navigating the website from a smaller screen such as a mobile or tablet.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">By adding a PDF viewer to your website, you can make it quicker and easier for users to view and interact with your PDF file without leaving your website. This can improve the user experience and keep visitors engaged on your site for longer periods of time. This may increase your page views and time spent on your website and reduce your site&#8217;s bounce rate.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">So, adding a PDF viewer is a valuable addition for you (website owner) as well as your users.<\/span><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">How to add a PDF viewer to WordPress?<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">This section will show you two simple and easy ways to add a PDF viewer to your website. The first method uses the block editor to add a PDF viewer to WordPress, while the second method uses a plugin to add a PDF viewer to WordPress. So, let&#8217;s go over both methods in detail to help you choose which one is most suitable for you.\u00a0\u00a0<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">1. Using block editor to add a PDF Viewer in WordPress.<\/span><\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">In order to add a PDF viewer in WordPress, we&#8217;ll use the in-built file block editor. This is the simplest and quick way to add a PDF viewer to your site, as it doesn&#8217;t require the installation of additional software or Plugins.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">To begin with the block editor, open the post or page where you like to add the PDF viewer and click on the &#8216;+&#8217; tab to add a new block.\u00a0\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2722\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/file-block-in-wordpress.png\" alt=\"\" width=\"680\" height=\"375\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/file-block-in-wordpress.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/file-block-in-wordpress-300x165.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">Then, look for the &#8216;File&#8217; block. This will pop up a screen with two options &#8216;Upload&#8217; or &#8216;Media library.&#8217;<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Here, you can select the &#8216;Media library&#8217; option if you&#8217;ve already uploaded your PDF file to your WP media library. After that, select the PDF file that you want to embed in your post or page.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">On the contrary, if you have not uploaded your PDF to your media library, you need to click on the &#8216;Upload&#8217; option. Then, select a PDF file from your computer that you want to upload to your post\/page.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2723\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/upload-option-in-file-block.png\" alt=\"\" width=\"680\" height=\"379\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/upload-option-in-file-block.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/upload-option-in-file-block-300x167.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">You don&#8217;t need to stress about the size of your PDF file. WordPress will select the size for the embedded PDF automatically.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Keep in mind that you or visitors might not view the full document file in the default view. But you and visitors can scroll through the PDF file to see more content. In addition, the &#8216;File&#8217; block includes a toolbar that allows you and your visitors to zoom in and zoom out of the document.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2725\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-viewer-in-wordpress.png\" alt=\"\" width=\"680\" height=\"365\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-viewer-in-wordpress.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-viewer-in-wordpress-300x161.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">You can also modify the height of the PDF viewer if you want to display more or less content of the embedded file to your audience. For this, you can simply navigate to the &#8216;Height in pixels&#8217; slider in the right-hand menu and change the height as per your desire.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2724\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/Height-settings-in-pdf-viewer.png\" alt=\"\" width=\"680\" height=\"384\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/Height-settings-in-pdf-viewer.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/Height-settings-in-pdf-viewer-300x169.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">Furthermore, WordPress provides a &#8216;Download&#8217; option in the toolbar and below the PDF by default. This feature allows visitors to download a copy of your PDF content if they wish one for themselves. They can quickly get a copy of your PDF content using the download options.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2726\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-download-option-in-PDF-viewer.png\" alt=\"\" width=\"680\" height=\"387\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-download-option-in-PDF-viewer.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-download-option-in-PDF-viewer-300x171.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">Once you are happy with your PDF settings, you can click on the &#8216;Update&#8217; or &#8216;Publish&#8217; button to store your changes and make them live on your site.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">However, if you don&#8217;t want your visitors to download your PDF content and keep your PDF content safe, you can simply disable the &#8216;Show Download Button&#8217; toggle.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2727\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/disable-show-download-button.png\" alt=\"\" width=\"680\" height=\"378\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/disable-show-download-button.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/disable-show-download-button-300x167.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">Once done, you can visit your website to see your PDF viewer in action.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">That&#8217;s it. You have successfully added the PDF viewer to your website.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2733\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/Live-pdf-viewer-in-wordpress-1.png\" alt=\"\" width=\"760\" height=\"441\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/Live-pdf-viewer-in-wordpress-1.png 760w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/Live-pdf-viewer-in-wordpress-1-300x174.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">This block editor method is a suitable and quick way to add a PDF viewer in WordPress. However, it only provides you with only a few customizations. If you want to have more features and advanced customization options, you can check our next plugin method.<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">2.<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0<\/span><strong><span data-preserver-spaces=\"true\">Using Plugin to add a PDF Viewer in WordPress.<\/span><\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">The block editor method is a straightforward and user-friendly way for web admins to incorporate PDF viewer on their site effortlessly. However, choosing a WordPress plugin can be a fruitful approach if you want more customizations and control over your PDF viewer.<\/span><\/p>\n<h4><strong><span data-preserver-spaces=\"true\">i. Install and activate PDF.js Viewer<\/span><\/strong><span data-preserver-spaces=\"true\">.<\/span><\/h4>\n<p><span data-preserver-spaces=\"true\">There are multiple efficient plugins that allow you to embed a PDF viewer in WP. But to narrow down your search, we&#8217;ve chosen the most featureful and customizable Plugin for embedding PDF viewer in WP- <a href=\"https:\/\/wordpress.org\/plugins\/pdfjs-viewer-shortcode\/\">the PDF.js Viewer<\/a>. You can also try its other alternatives, such as PDF Embedder and Embed PDF Viewer.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Our preferred choice PDF.js Viewer is one of the finest PDF plugins for WP. It serves over 20,000+ active installations and is popular due to its intuitive interface and ease of use. So, let&#8217;s get started with it.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">First of all, install and activate the &#8216;PDF.js Viewer&#8217; Plugin on your site. If you are new to this and need help, you can check out our guide on <a href=\"https:\/\/hostkicker.com\/blog\/how-to-install-a-wordpress-plugin\">WP plugin installation.<\/a><\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Once done, you need to configure the settings.\u00a0<\/span><\/p>\n<h4><strong><span data-preserver-spaces=\"true\">ii. Set up<\/span><\/strong><span data-preserver-spaces=\"true\">\u00a0<\/span><strong><span data-preserver-spaces=\"true\">PDF.js Viewer<\/span><\/strong><\/h4>\n<p><span data-preserver-spaces=\"true\">The next step after plugin installation is to configure the plugin settings.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">From your admin dashboard, navigate to Settings &gt;&gt; PDFjs Viewer.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2734\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdfjs-viewer-options-settings.png\" alt=\"\" width=\"680\" height=\"387\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdfjs-viewer-options-settings.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdfjs-viewer-options-settings-300x171.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">On the next screen, you&#8217;ll witness the &#8216;Default&#8217; settings under the PDFjs Viewer options. It includes downloads, Print, a search button, a full-screen link, and a few more. You can keep the settings enabled or disabled as per your desire.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">If you want to keep all the settings enabled, leave the default settings as it is. Contrarily, if you don&#8217;t want these to be enabled, simply uncheck the box next to each setting.\u00a0\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The following settings are regarding the PDF configurations and control. Let&#8217;s configure each one by one.<\/span><\/p>\n<ul>\n<li><strong><span data-preserver-spaces=\"true\">Show Fullscreen link.<\/span><\/strong><\/li>\n<\/ul>\n<p><span data-preserver-spaces=\"true\">By default, the PDF.js viewer provides a &#8216;View Fullscreen&#8217; link above the embedded PDF, which enables visitors to open the PDF in Fullscreen mode. The fullscreen mode makes it easier for visitors to read long documents with ease. So it&#8217;s better you leave this feature enabled.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">However, if you don&#8217;t want to enable the fullscreen feature, you can simply uncheck the box next to the &#8216;Show Fullscreen link&#8217; option.<\/span><\/p>\n<ul>\n<li><strong><span data-preserver-spaces=\"true\">Fullscreen Link Text<\/span><\/strong><\/li>\n<\/ul>\n<p><span data-preserver-spaces=\"true\">The next setting you&#8217;d see is<\/span><strong><span data-preserver-spaces=\"true\">\u00a0<\/span><\/strong><span data-preserver-spaces=\"true\">&#8216;Fullscreen Link Text.&#8217; The Plugin provides you with an option to change the &#8216;View Fullscreen&#8217; link text with a custom message. This means you can change the &#8216;View Fullscreen&#8217; text to anything you want. If you prefer to change this, simply enter the text into the box next to &#8216;Fullscreen Link Text.&#8217;\u00a0\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2739\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/fullscreen-link-text-setting.png\" alt=\"\" width=\"680\" height=\"264\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/fullscreen-link-text-setting.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/fullscreen-link-text-setting-300x116.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<ul>\n<li><strong><span data-preserver-spaces=\"true\">Fullscreen Links in New Tabs.<\/span><\/strong><\/li>\n<\/ul>\n<p><span data-preserver-spaces=\"true\">Next, you need to decide whether you want to open the PDF link in a new tab or not. You can set this using the &#8216;Fullscreen Links in New Tabs&#8217; box.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2740\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/fullscreen-pdf-tab-checkbox.png\" alt=\"\" width=\"680\" height=\"221\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/fullscreen-pdf-tab-checkbox.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/fullscreen-pdf-tab-checkbox-300x98.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">Note that launching a link in a new tab can be annoying for mobile users. So, decide what suits you the best.<\/span><\/p>\n<ul>\n<li><strong><span data-preserver-spaces=\"true\">Embed Height and width<\/span><\/strong><\/li>\n<\/ul>\n<p><span data-preserver-spaces=\"true\">Next, the Plugin also allows you to change the default height and width and the viewer scale of the PDF.\u00a0 \u00a0 \u00a0 \u00a0<\/span><\/p>\n<ul>\n<li><strong><span data-preserver-spaces=\"true\">Page Mode<\/span><\/strong><\/li>\n<\/ul>\n<p><span data-preserver-spaces=\"true\">An unmatched feature of the PDF.js viewer is that it displays the PDF without any sidebar to provide an extended view to the visitors. This enables them to see the entire document effortlessly. Also, it provides a &#8216;Toggle Sidebar&#8217; button that visitors can click to open a sidebar at any time.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2738\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-sidebar.png\" alt=\"\" width=\"544\" height=\"439\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-sidebar.png 544w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-sidebar-300x242.png 300w\" sizes=\"auto, (max-width: 544px) 100vw, 544px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">Further, if you plan to add multi-page and longer PDFs, displaying the sidebar by default can be a valuable decision.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">For this, click on the Page Mode dropdown menu and choose either Thumbs, Bookmarks, or Attachments. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2736\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-page-mode-settings.png\" alt=\"\" width=\"680\" height=\"305\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-page-mode-settings.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-page-mode-settings-300x135.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/span><\/p>\n<p><span data-preserver-spaces=\"true\">And that&#8217;s it. Once you are happy with your plugin settings, go ahead and click on the &#8216;Save Changes&#8217; tab to store your settings.\u00a0<\/span><\/p>\n<h4><strong><span data-preserver-spaces=\"true\">iii. Add PDF viewer in WordPress<\/span><\/strong><span data-preserver-spaces=\"true\">.<\/span><\/h4>\n<p><span data-preserver-spaces=\"true\">Now, you are ready to add a PDF viewer in WordPress. For this, navigate to your admin dashboard and open the page or post where you like to display your PDF.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Then, click on the &#8216;+&#8217; tab and look for the &#8216;Embed PDF.js Viewer&#8217; by simply typing into the search box. Go ahead and select the block when it appears.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2741\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/adding-pfd-block-in-wp.png\" alt=\"\" width=\"680\" height=\"280\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/adding-pfd-block-in-wp.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/adding-pfd-block-in-wp-300x124.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">Once done, click on the &#8216;Choose PDF&#8217; link. This will lead you to the WP media library. Now, you can select a PDF from your media library or upload the PDF from your computer.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2742\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/choose-pdf-to-upload.png\" alt=\"\" width=\"680\" height=\"289\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/choose-pdf-to-upload.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/choose-pdf-to-upload-300x128.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">The Plugin will now use the default settings you made earlier, but you can still choose to modify the settings every time you upload a PDF to your site. If you want to change your settings, you can simply do it from your right-hand menu without leaving your post\/page editor.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2743\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/customizing-pdf-block-settings.png\" alt=\"\" width=\"680\" height=\"360\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/customizing-pdf-block-settings.png 680w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/customizing-pdf-block-settings-300x159.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/p>\n<p><span data-preserver-spaces=\"true\">Once you are happy with how your PDF looks and acts, click on the &#8216;Update&#8217; or &#8216;Publish&#8217; tab to make the changes live.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">That&#8217;s it. You&#8217;ve successfully added a PDF viewer to your site.\u00a0\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Now, visit your site to see the PDF viewer in action.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2744\" src=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-viewer-in-wp.png\" alt=\"\" width=\"766\" height=\"442\" srcset=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-viewer-in-wp.png 766w, https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/pdf-viewer-in-wp-300x173.png 300w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/p>\n<h2><strong><span data-preserver-spaces=\"true\">To Conclude:<\/span><\/strong><\/h2>\n<p><span data-preserver-spaces=\"true\">A PDF viewer is a great addition for websites that often share PDF files with audiences. Although you can always add a PDF to your site, the users are required to download it and view it on another tab, leaving your site. This can hurt your website&#8217;s user experience and SEO and can hamper your online success.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Incorporating a PDF viewer brings multiple benefits. It is beneficial not only for the site audience but for website owners as well.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Adding a PDF viewer to your WordPress site can improve the user experience and make it easier for visitors to view and interact with your PDF files. On the other hand, it can enhance user engagement, increase page views and average time spent on the site, and reduces the bounce rate, which are all valuable for websites. Thus, a PDF viewer is a win-win for both.\u00a0<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Here, we&#8217;ve covered two different and easy methods to add a PDF viewer in WordPress step-by-step. We hope this easy guide has helped you understand the process in a better way. By following the simple and easy steps outlined in this blog post, you can easily add a PDF viewer to your website and customize it to fit your needs. So, go ahead and add a PDF viewer to your WordPress site today and give a boost to your website.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you often provide content in the form of PDFs to your site users? If yes, you might wonder if you could add a PDF viewer in WordPress.\u00a0 PDFs are a great way to provide vast and complex information to users in an organized manner. However, users can&#8217;t access the information directly on your site. [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":2750,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wp-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v19.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Beginner Guide to Add a PDF Viewer in WordPress - Hostkicker<\/title>\n<meta name=\"description\" content=\"Learn two easy ways to add a PDF viewer in WordPress: 1. By block editor and 2. By Plugin. To begin, navigate to your post\/page and then...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Beginner Guide to Add a PDF Viewer in WordPress\" \/>\n<meta property=\"og:description\" content=\"Learn two easy ways to add a PDF viewer in WordPress: 1. By block editor and 2. By Plugin. To begin, navigate to your post\/page and then...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostkicker\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-04T12:37:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"693\" \/>\n\t<meta property=\"og:image:height\" content=\"511\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Olivia Smith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Olivia Smith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/\"},\"author\":{\"name\":\"Olivia Smith\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/person\\\/f06306b595baa96c90a0491b941d7660\"},\"headline\":\"Beginner Guide to Add a PDF Viewer in WordPress\",\"datePublished\":\"2023-05-04T12:37:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/\"},\"wordCount\":2023,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg\",\"articleSection\":[\"Wp tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/\",\"name\":\"Beginner Guide to Add a PDF Viewer in WordPress - Hostkicker\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg\",\"datePublished\":\"2023-05-04T12:37:41+00:00\",\"description\":\"Learn two easy ways to add a PDF viewer in WordPress: 1. By block editor and 2. By Plugin. To begin, navigate to your post\\\/page and then...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg\",\"contentUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg\",\"width\":693,\"height\":511,\"caption\":\"the guide will help you add PDF viewer in wordpress using block editor and plugin method\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Beginner Guide to Add a PDF Viewer in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\",\"name\":\"Hostkicker\",\"description\":\"Blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#organization\",\"name\":\"Hostkicker\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-logo-01.png\",\"contentUrl\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/12\\\/hostkicker-logo-01.png\",\"width\":940,\"height\":218,\"caption\":\"Hostkicker\"},\"image\":{\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/#\\\/schema\\\/person\\\/f06306b595baa96c90a0491b941d7660\",\"name\":\"Olivia Smith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g\",\"caption\":\"Olivia Smith\"},\"url\":\"https:\\\/\\\/hostkicker.com\\\/blog\\\/author\\\/olivia\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Beginner Guide to Add a PDF Viewer in WordPress - Hostkicker","description":"Learn two easy ways to add a PDF viewer in WordPress: 1. By block editor and 2. By Plugin. To begin, navigate to your post\/page and then...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Beginner Guide to Add a PDF Viewer in WordPress","og_description":"Learn two easy ways to add a PDF viewer in WordPress: 1. By block editor and 2. By Plugin. To begin, navigate to your post\/page and then...","og_url":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/","og_site_name":"Hostkicker","article_published_time":"2023-05-04T12:37:41+00:00","og_image":[{"width":693,"height":511,"url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg","type":"image\/jpeg"}],"author":"Olivia Smith","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Olivia Smith","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/"},"author":{"name":"Olivia Smith","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/person\/f06306b595baa96c90a0491b941d7660"},"headline":"Beginner Guide to Add a PDF Viewer in WordPress","datePublished":"2023-05-04T12:37:41+00:00","mainEntityOfPage":{"@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/"},"wordCount":2023,"commentCount":0,"publisher":{"@id":"https:\/\/hostkicker.com\/blog\/#organization"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg","articleSection":["Wp tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/","url":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/","name":"Beginner Guide to Add a PDF Viewer in WordPress - Hostkicker","isPartOf":{"@id":"https:\/\/hostkicker.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg","datePublished":"2023-05-04T12:37:41+00:00","description":"Learn two easy ways to add a PDF viewer in WordPress: 1. By block editor and 2. By Plugin. To begin, navigate to your post\/page and then...","breadcrumb":{"@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/#primaryimage","url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg","contentUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg","width":693,"height":511,"caption":"the guide will help you add PDF viewer in wordpress using block editor and plugin method"},{"@type":"BreadcrumbList","@id":"https:\/\/hostkicker.com\/blog\/beginner-guide-to-add-a-pdf-viewer-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hostkicker.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Beginner Guide to Add a PDF Viewer in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/hostkicker.com\/blog\/#website","url":"https:\/\/hostkicker.com\/blog\/","name":"Hostkicker","description":"Blog","publisher":{"@id":"https:\/\/hostkicker.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hostkicker.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hostkicker.com\/blog\/#organization","name":"Hostkicker","url":"https:\/\/hostkicker.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-logo-01.png","contentUrl":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2021\/12\/hostkicker-logo-01.png","width":940,"height":218,"caption":"Hostkicker"},"image":{"@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hostkicker.com\/blog\/#\/schema\/person\/f06306b595baa96c90a0491b941d7660","name":"Olivia Smith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/24a6b2466362238ad275f97a2f2fc49ce8d139c034114d6b9c52de1b12ebf1bd?s=96&d=mm&r=g","caption":"Olivia Smith"},"url":"https:\/\/hostkicker.com\/blog\/author\/olivia\/"}]}},"jetpack_featured_media_url":"https:\/\/hostkicker.com\/blog\/wp-content\/uploads\/2023\/05\/a-guide-to-add-a-pdf-viewer-in-wordpress.jpg","_links":{"self":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/2721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/comments?post=2721"}],"version-history":[{"count":3,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/2721\/revisions"}],"predecessor-version":[{"id":2746,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/posts\/2721\/revisions\/2746"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/media\/2750"}],"wp:attachment":[{"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/media?parent=2721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/categories?post=2721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hostkicker.com\/blog\/wp-json\/wp\/v2\/tags?post=2721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}