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 Amazon S3, PDF.js will not be able to display them and may show an error "An error occurred while loading the PDF".

This tutorial will guide you how to configure the CORS policy of your Amazon S3 bucket, so the PDF files can be displayed by Wonder Lightbox and Wonder PDF Embed.

In your Amazon S3 dashboard, go to the bucket, then click the Permissions tab, at the bottom of the page, click the Edit button of the section "Cross-origin resource sharing (CORS)", and enter the following code:

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "https://www.wonderplugin.com",
            "https://amazingslider.com"
        ],
        "ExposeHeaders": [
            "Accept-Ranges",
            "Content-Encoding",
            "Content-Length",
            "Content-Range"
        ]
    }
]

The above code has allowed two websites https://www.wonderplugin.com and https://amazingslider.com to load and display the PDF files. Please make sure to change them to your own websites. You can also add more websites (separated by comma) or change to one website (without comma at the end).

Please note, the protocol (http:// or https://) and the domain name must exactly match your website.

If you want the PDF files to be displayed on any website, you can change the AllowedOrigins to *:

"AllowedOrigins": [
    "*"
],

An online demo is as follows: Open PDF file hosted on Amazon S3.