Product

Wonder Lightbox 9.4 or above, Wonder PDF Embed 1.8 or above

Tutorial

Wonder Lightbox and Wonder PDF Embed use Mozilla PDF.js to display PDF files. By default, PDF.js only supports PDF files that are hosted on the same domain as the webpage. If your PDF files are hosted on Dropbox, PDF.js will not be able to display them and may show an error "An error occurred while loading the PDF".

The problem is because the Dropbox domain https://www.dropbox.com does not support CORS policy, but Dropbox provides a domain https://dl.dropboxusercontent.com that supports CORS by default.

In your Dropbox account, copy the link of the PDF file, change the URL domain from https://www.dropbox.com to https://dl.dropboxusercontent.com, change the URL parameter to raw=1, and the link will work in Wonder Lightbox and Wonder PDF Embed.

An online demo is as follows: Open PDF Hosted on Dropbox

The HTML code is as follows:

<a href="https://dl.dropboxusercontent.com/s/7d53chnxigf35sl/how-to-create-a-wordpress-post-carousel.pdf?raw=1" class="wplightbox">Open PDF Hosted on Dropbox</a>