How to add a Preview for an e-Book in WordPress

    Aparna Gawade
Listen to this article
Add an e-Book Preview in WordPress

Let’s say you want to rent a book. You then head on over to your local library, and browse through the science-fiction section. You notice a couple of books with riveting titles, but… you’re not sure if the story will be good enough. So you read the preface, browse through a couple of pages, before deciding on a book to rent.

Most customers behave the same way. Not just when renting or buying a book, but for any sort of product. In online stores, most products (like apparel, or home decor items) have different images, to describe the product. But since images don’t help much when it comes to books, a preview of the book usually helps, just like it would if you went to an actual library.

So, what exactly classifies as a preview for an e-book?

A preview for an e-book would usually involve a few pages from the book, which would be unlocked and visible, and which could be read, like the usual e-book. Say for example, the list of contents, or 2-4 pages from the book, could be readable. However, the customer would not be permitted to scroll further, to read more content.

So then, how can one add such a preview for the e-books on their site?


How to Add a Preview for e-Books

Let’s start with the basics. To sell the e-book on your site, you’d probably have a dedicated page. This could be a simple page on your WordPress website, or a single product page in your e-Commerce store.

  1. In either case, your e-book page, will have the book, title, description and the price, with a ‘Buy Now’ or ‘Add to Cart’ button. You probably have have the front cover (and maybe even the back cover) as the product image.
  2. Next, to allow potential customers to see a preview, you have to provide them a preview option. This could be a ‘Preview’ button (besides the ‘Buy Now’ button), or a preview link on image hover.
  3. When a customer clicks the preview option, you can open the PDF preview, either instead of the feature image, or in a popup lightbox. This preview, will be scrollable.
  4. When the user continues to scroll, past the unlocked previewable pages, he could be prompted to purchase the e-Book, using a ‘Buy Now’ button. If needed, this button could be added at the footer of the preview, and could be sticky
A Sample Preview

PDF Preview Functionality on WordPress

So, to provide such a functionality, a solution we at WisdmLabs propose, is the following:

Your e-books are basically PDF files. Whether you sell these PDF files individually or part of a paid membership, you’d still have these PDF files hosted on your website. For example, on your WordPress website, you’d have these PDF files in your Media Library.

  1. The PDF.js library can be used to display the e-book preview
  2. When a customer clicks on the ‘Preview’ option, we have to query for the PDF using the PDF.js library, by sending across the upload path of the PDF file
  3. Here, we can also control which pages to preview, by sending across their page numbers as query parameters
  4. The PDF.js library returns the PDF, which can be then rendered using a Canvas element
  5. To a user, only the pages for preview will be visible upon scroll
  6. The additional elements (like the ‘Buy Now’ button) can be added on the content element


A preview for e-books, can help convert unsure customers. The use of PDF.js allows the user experience to be maintained, by preserving the look and feel of an e-book. Such a functionality can be very easily coupled with your e-Commerce store, like WooCommerce, to add product previews as well. The advantage of using the PDF.js library, is that it works with EditionGuard as well. Thus, if your e-books are hosted on EditionGuard, you will still be able to provide a preview easily. The only drawback here, is that the library returns the entire PDF file, instead of just a few pages. Thus for large files, the response time may be higher.

Do let me know your thoughts and questions about this solution, and your suggestions, using the comment section below!

You may also like to read: How to Create a Pay-Per-View Video Website on WordPress

Aparna Gawade

Aparna Gawade

One Response

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads