NEW
Chat with Your PDFs Now!
Read More ↗

How to embed a PDF document viewer in your Wix website

Introduction

Imagine this situation: you put a lot of effort into creating a document with beautiful fonts and design, but the person reading your document sees a completely different font and the images are in the wrong position!

You would probably feel really disappointed and afraid that your competence might be questioned.

This situation can happen with documents in their original formatting: Microsoft Word (docx), Apple Pages, OpenOffice.

This is where PDF documents come in. A documents that is converted to PDF will be the same in its styling and fonts no matter what device it is read on.

You don't have to worry about the consistency of your documents. You can be sure that the receiver will see exactly the same document you have created.

This is what makes PDF the perfect format for embedding documents into your website.

In this blog, you are going to learn how to embed a PDF document viewer in your Wix website.

Contents

Upload PDF to Wix

In this paragraph, we will discuss an easy way to include a PDF attachment to your webpage. This is not a PDF viewer, but just an icon that will allow the visitor to download a PDF. If you are looking to embed a PDF viewer, you can skip to the next chapter.

  1. Click on the media icon on the left-hand side of the Wix editor and click on the upload media button.
Upload a file to Wix
  1. Now an upload media popup opens. Click on the Upload from computer button to just drop your PDF file in the upload region.
Wix popup for uploading media
  1. After you have uploaded the PDF document, click on the Add to Page button.
Select a page in Wix
  1. Here you can see your PDF document added to your Wix site. You can preview your website to see how it looks to the visitor.
Add PDF to Wix page

You can also add customization on top of the uploaded PDF document. Let's discuss this briefly.

  1. Click on the brush-like icon to change the icon of the document. You can choose any icon from the grid.
Edit document icon in Wix
  1. To add animation, click on the animation icon and select what you like the most. Wix comes with a lot of different transitions and animation. Use this feature to make your document interactive with the user.
Choose animation on PDF document icon in Wix
  1. You can also change the title of the document or completely hide it. Click on the gear icon to make these changes.
Wix document settings

Display PDF using PDF viewer App

If you are looking for a solution to display the PDF document on your website, you can install a Wix app from the Wix app market.

Be aware that this option has limitations. You cannot prevent your documents from being downloaded. You do not receive analytics to track your documents' performance, and the viewer is not customizable to your brand. If you are interested in these features, skip to the next chapter.

  1. Click on the Wix apps shortcut on the left side of the Wix editor to launch the Wix app market.
  2. Then search for "PDF viewer"
Search for PDF viewer inside the Wix store
  1. Click on the first result. This is a PDF viewer app offered by Wix itself and it is completely free to use. Install the app on your Wix site.
  2. Now click on the "Add again" button to add a PDF viewer to your Wix website.
PDF viewer app details on the Wix store
  1. To upload your document, go to the settings menu of the Wix PDF viewer. There you will find the Upload PDF button. Upload your document by clicking on this button.
Wix PDF viewer app upload
  1. To change the layout of the PDF viewer, click on the layout option. You can choose between Full page and Thumbnail options.
Wix PDF viewer app layout settings
  1. In the display setting, you can customize the PDF viewer. You can select to display from full viewer, mini viewer, and a single page.
Wix PDF viewer app display options
  1. To make the links inside the PDF viewer clickable, toggle the button inside the settings tab.
Wix PDF viewer app internal links settings

Custom PDF viewer by CloudPDF

All PDF display techniques we have discussed above lack some important features. CloudPDF fills in these gaps and even allows you to customize the PDF viewer into the brand colors of your business. Let's check out the CloudPDF features Lead Generation, Download Prevention, and Analytics.

Lead generation: CloudPDF offers a feature that can help you generate leads from your PDF file. You can popup a lead form at a pre-defined time or based on which part of the document the reader is viewing. The user needs to fill in personal info like his email address in order to proceed reading the document. This can be a great way to increase the size of your mailing list.

Download Prevention: Imagine you are selling an online course. You don't want to give it away for free, but if the PDF is downloadable, you will have a hard time avoiding it. With the CloudPDF viewer, you can prevent the PDF from being downloaded. In addition to that, you can allow embedding of the document only from specific domain names.

Analytics: CloudPDF offers tracking on your PDF files. You can view analytics of your PDF file by just clicking on the analytics tab on the CloudPDF dashboard. You can track visitors' demographics and how long they viewed the PDF file. How cool is that?

If one of these features is necessary for your Wix website, then the CloudPDF viewer is the way to go.

How to Get Started with CloudPDF

First, create a free account on the CloudPDF website. Then click on the dashboard option. Here you can upload, encrypt and track your PDF files very easily.

  1. Click on the new button and upload your first PDF file to CloudPDF.
Upload a PDF to CloudPDF
  1. After the PDF is successfully uploaded, right-click on the file to open the context menu. Click on the Embed in website button.
Right click on a document in CloudPDF dashboard
  1. Now click on the change permission button and make the document public.
Change permission button in the CloudPDF dashboard
  1. Toggle the publicly accessible button. This will make the PDF document visible to every visitor on your website.
Make PDF publicly accessible in the CloudPDF dashboard
  1. Copy the HTML snippet from the page. You use this snippet to display the uploaded PDF document on your Wix website.
Copy code snippet from CloudPDF
  1. Now open your Wix editor and click on the embed element.
  2. Select HTML Embed option inside Embed Code section.
Embed HTML inside a Wix website
  1. Paste the HTML snippets you have copied from the CloudPDF dashboard here. Click on the update button.
Insert CloudPDF code snippet into your Wix website
  1. You will see that your customizable PDF viewer is ready. This looks very modern in comparison to other options.
CloudPDF viewer on a Wix website

You can customize the PDF viewer by editing the config option inside the HTML code. Here you can see, I have added a new red theme color and enabled the app bar color.

Edit the CloudPDF snippet on a Wix website

This is the result you can get after you made these changes.

Change CloudPDF theme settings to red

Display a PDF from Google Drive

You can also add PDF documents from your Google Drive to your Wix website. Let's understand this process step-by-step.

  1. First, right click on the file in your Google Drive account to open the context menu and click on the Get link option.
Right click on Google Drive document
  1. Now, inside the general access area, select anyone with this link, so that any visitor to your website can view this document.
Change permission on Google Drive PDF
  1. Copy the link and open it in a new browser tab.
  1. Click on the three-dot icon and copy the embed code to the clipboard.
Embed a PDF document from Google Drive
  1. Add an HTML embed to your Wix site and paste the code you have copied. Next, hit the update button.
Copy a Google Drive code snippet into Wix

Now you are done. Congratulations on successfully adding a PDF viewer to your Wix website.

Embedded Google Drive document

Conclusion

This is a comprehensive guide to embedding PDF files in your Wix website.

The native upload feature of Wix allows you to upload a PDF but is not a PDF viewer.

The PDF viewer app from the Wix store is probably the easiest method and allows you to embed a PDF viewer into your Wix website.

CloudPDF has more features like "prevent download of the PDF", "PDF analytics", "Viewer customization" and the ability to generate lead from your PDF documents. You can implement it in your Wix website with a simple code snippet.

Google Drive does allow you to prevent downloading of the PDF, but it does not give you the ability to customize your viewer or provide analytics insight. It is also not a native Wix app, so it requires a code snippet.

If you find this blog useful, please share it with your friend and followers.

If you are using squarespace insted of wix, you can checkout this guide on How to embed a PDF viewer in Squarespace.

Frequently Asked Questions

Can I upload a PDF document to Wix?

Yes, Go to the media option on the left side of the PDF editor and click on the upload file button. There you can upload your preferred type of document including PDF files.

How do I add a PDF to my Wix lightbox

First, add a lightbox from the Interactive elements section. Now, click on the Add element button again and add an Embed HTML element on top of your lightbox. Paste the HTML code to display the PDF file. Hit update and you are done.

Hrishikesh Pathak
A web and flutter developer. He likes to write blog on programming and new emerging technologies.