Embed PDF in WiX with Adobe API

In WiX , there are few third party plugins which can help you to embed PDF in the page.

If you goto WiX App Market you can find those plugins and most of them required your wallet.

Ref: https://support.wix.com/en/article/adding-and-setting-up-the-pdf-viewer-app

Even if you purchase those plugins, there are few limitations.

For eg, you can use those plugins in your main site pages how ever you can not use it in blog post or Program page.

I hit couple of use cases which pushed me to search for more options

1. I have to create a Program(Online course) which required multiple PDF pages to be rendered in a page where subscribers can read directly from the site instead of downloading it.

2. I want to create a blog post which displays PDF content as it is instead of rewriting directly as post content

G-Drive - Google Solution

I got one simple solution to embed PDF directly using "HTML Code" elements with iframe.

1. Get the HTML embed code from google(Refer Step 1 & 2)

2. Select "HTML Code" element and Insert iframe tag with google doc (Step 3 & 4)

This Google solution is not that effective for all devices and screen sizes. It is Not having any customisation , usability and user friendly.

Step 1	Step 2
Step 3	Step 4

Embed API - Adobe Solution

Adobe released free and customisable API which works almost all devices and sizes. You can embed it in pages, blogs as well as programs.

I have embedded one of our PDFs in this same page which you can witness the usability of the api.

How to embed Adobe API, you can refer their tutorial page which is having detail demo and sample codes

Ref: https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/

Challenge

From WiX there is an issue while using this API.

Adobe API is looking for the domain to be register where the PDF file is hosted. Were in wix, the PDF file which you uploaded in Media manager will have URL which is dynamic, and it keep changing the domain some time.

As per their portal support their media URL is temporary( https://www.wix.com/velo/forum/tips-tutorials-examples/create-a-url-for-a-media-file-the-truth-about-getfileurl )

This is blocking to implement adobe api , However by registering "usrfiles.com" as domain i am able to get the desired output.

After registering the domain, get the sample HTML code similar to below

<div id="adobe-dc-view" style="width: 800px;"></div>
<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
	document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "<YOUR FILE URL>"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {embedMode: "IN_LINE", showDownloadPDF: false, showPrintPDF: false});
	});
</script>

Replace your "Client id" in the place of "<YOUR_CLIENT_ID>"

Your WiX media file URL goes in the place of "<YOUR FILE URL>"

While previewing the HTML output, you will get the following error from Adobe API

Don't worry, after publishing the post , the page will render without any issues.

Sample Embedded PDF using Adobe API