Just sharing a cool achievement for previewing pdf files on wix, using PDF Embed API by Abobe and wix HtmlComponent.
Page Code:
//simple exemple but y ou can feed filepath and filename from a database, for exemple.
$w . onReady ( function () {
let file = { filepath : " https://yourfiledirecturl.pdf " , filename : " filename.pdf " };
$w ( “#html1” ). postMessage ( file )
});
HtmlComponent Code:
< html >
< div id = “adobe-dc-view”></ div >
< script src = “https://documentcloud.adobe.com/view-sdk/main.js”></ script >
< script type = “text/javascript” >
document . addEventListener ( “adobe_dc_view_sdk.ready” , function (){
var adobeDCView = new AdobeDC . View ({ clientId : “YOUR-API-KEY” , divId : “adobe-dc-view” });
window . addEventListener ( ‘message’ , event => { if ( event . data ) {
adobeDCView . previewFile ({ content : { location : { url : event . data . filepath }}, metaData : { fileName : event . data . filename }}, { embedMode : “SIZED_CONTAINER” , showFullScreen : false }); } }) })
</ script >
</ html >
You have to create an API KEY and authorize " filesusr.com" domain (which is the html component domain).
Also you can tweak the Embed Api to your requirements.
F ind how here: https://developer.adobe.com/document-services/docs/overview/pdf-embed-api/howtos/#embed-modes
Cristina
Hey! I have this working except for one bug. Wix loads the HTML embed before it runs my Javascript, so the html Embed can’t find the url I send over with postMessage and just displays a white screen. Any ideas?
Hello Daniel,
It’s a timing issue, so maybe try to put your page code like this:
import wixWindow from ‘wix-window’ ;
$w.onReady(function () {
if (wixWindow.rendering.env === “browser”) {
let file = { filepath: " https://yourfiledirecturl.pdf “, filename: " filename.pdf “};
$w(”#html1”).postMessage(file)
}
});
And in the html component add “filename” to event.data, like this:
“addEventListener(‘message’, event => {if (event.data.filename){….”
Let me know if it worked out 
Cristina
Hi Cristina,
So I added what you said to and it works every time in preview! But still a blank white embed on my live site… I will share you my code. It’s a dynamic page.
Page Code:
import wixWindow from ‘wix-window’ ;
let source ;
$w . onReady ( function () {
if ( wixWindow . rendering . env === “browser” ) {
$w ( '#dynamicDataset' ). onReady ( () =>{
// Grab the link from the button that opens pdf in new tab
source = $w ( "#linksource" ). link ;
console . log ( "Link Source: " , source );
// Store the name and url of the pdf in variables
let url = source . split ( "/" )[ 3 ];
let name = source . split ( "/" )[ 4 ];
// Ensures url and name are correct
console . log ( "URL: " , url );
console . log ( "Name: " , name )
/* Opens url as an embedded pdf. Works great except inconsistent experience depending on browser
So I'd rather use Adobe PDF viewer */
$w ( '#html1' ). src = `https://docs.wixstatic.com /ugd/ ${ url }`;
// Store the full file path in a variable
let filePath = `https://docs.wixstatic.com /ugd/ ${ url }`;
// Send the filepath and pdf name to the html element
let file = { filepath : filePath , filename : name };
$w ( "#html2" ). postMessage ( file );
})
}
});
HTML Code:
Hope you are able to help!
Heres some pictures. of the preview site. (The client ID is set for the live site)
The Live site
The PDF embed on the left is just showing that my links are working before they are sent to the embed with postMessage()
Hi Daniel, does the browser developer console (live site) shows any errors that can help understand what’s happening? How many times does it log your variables, and in any of that times do they log empty values? Can you send this page url?
Hi Cristina, is there a way to send you the website privately? It is for a client so I don’t think I should share on the web.
Also this is the error I receive on the live website.
I’ve also made a thread if you’d like to help out further! I changed my code a bit since we last spoke.
HTML Element that displays dynamic URL’s with Adobe PDF Embed API only works in Preview, not on live website. | Velo by Wix
Hi Daniel,
So two things might be happening there:
1 - not quite sure that wix url is working because of the way adobe embed api processes data, I suggest testing other like gdrive direct link (https://drive.google.com/uc?export=download&id=FILEID ; you get file id from your sharing link), or even adobe url used for testing “https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf” just to see if its related.
2 - Most important check if filename is “undefined” - if so that is what’s causing the error, because adobe embed cant process de file without it.
Hope this helps!
Cristina
Hey thanks For the help! I actually solved a few hours after sharing this. The filename was undefined for some reason so just changed it to, “ “ and it works great now!
Thanks again because if i hadn’t found your post in the first place I would’ve never figured this out 
Cheers,
Daniel
Hi Daniel,
I’m happy for you 
Regarding your other post, maybe mark it as solved and reference this one, or even consider deleting, otherwise might confuse other users with same question.
Regards,
Cristina
@cristinabispo yes good idea!
I got this to work on a desktop browser but it’s not displaying on mobile. I thought maybe it was safari, but I’ve also tried on chrome & firefox with no luck. Does anyone have a solution? Thanks in advance!
