So Confused with PDF HTML Embed for Website - Help Please :)

[kevind55123760]

Wanting to embed HTML code for PDF into website. 

Can do Google Docs, but trying to figure out Adobe.

Got the API set up and credentials for our website.

BUT - we don't see a way to upload a document in adobe.io - and we don't see any different options where our PDFs exist that are already uploaded in the document cloud.

Can anybody clarify how to take a document from the document cloud and use the API to generate the embed code? 

Very confused - Thanks!!

[Joel_Geraci]

Can anybody clarify how to take a document from the document cloud and use the API to generate the embed code? 

You can't. Embed API needs either a direct link to the PDF or a Promise the resolves to a ByteArray for the file to be displayed. The Adobe Document Cloud provides neither. The link to a PDF in DC is not a direct link to a PDF, it is a link to a PDF viewing experience much like Embed API itself.

However, if you need to host your files on something other than your own web site, you can store your files in Dropbox and use Embed API to display them. You can see that in action at this CodePen.

[kevind55123760]

Thank you - so can we use the Embed API to embed on our website? Confused still.

[Joel_Geraci]

Yes - Embed API is a client-side JavaScript that you can use from any web site to present PDF files in a way that overrides the default browser experience. That way, the view of the PDF and its behavior will be consistent across browsers, operating systems, and devices.

If you are already using Document Cloud to share PDF files, you don't really need Embed API. If you'd rather host your PDF files on your own servers, you can use Embed API to control the experience.

[kevind55123760]

Thank you - but still confused. 

When we go into the embed API, how do we "tell it" what the PDF is and where it is? There's no upload there.

Or maybe I'm catching it - we need to "host" the PDF at DB or Google Docs and then use the API code and put the link to the file inside of Adobe's HTML code?

[Joel_Geraci]

What exactly are you trying to accomplish with Embed API? You may be misunderstanding its purpose.

[kevind55123760]

Embed a PDF on our website - and have it "look better" than we can do with google docs.

[kevind55123760]

I thought this would be easier - so can keep with google docs for now. It works. Plain and simple. Thanks for help!

[Joel_Geraci]

Well that is the purpose of Embed API and with some basic JavaScript skills it is pretty easy to implement but it's not as easy as just uploading a file to a repository.

[brajeshk12751679]

Thank you for evaluating Adobe Embed APIs. You can still keep your files on G Drive and use Embed APIs. But, you will have to write a small application through which you can use G Drive APIs to download the file and then pass the file blob to Adobe embed APIs. It's well documented. Please refer to the public documentation of Embed APIs here - https://www.adobe.io/apis/documentcloud/dcsdk/docs.html

You should find "Passing file content" subsection under "PDF Embed API basics" section.

[Arjun Singh]

Hi, kevind55123760.

>> we need to "host" the PDF at DB or Google Docs

You need to host the PDF file anywhere that you can get a direct link to it. This could be your own website. For example, let's say your website has the following simple path structure:

• /html/myPdfViewer.html
• /files/myPdfFile.pdf

The HTML file will have just a few lines of content as described in the documentation my colleague linked to. In particular, for the path structure above, the snippet that refers to the PDF file might look something like this:

adobeDCView.previewFile(
{
   content:   {location: {url: "/files/myPdfFile.pdf"}},
   metaData: {fileName: "myPdfFile.pdf"}
});

Typically you would upload a PDF file to your site the same way you would upload an HTML file, using the site content management tools available to you. Is that something that you can try?

Thanks.

[Matt26908520gmqo]

Sorry for my ignoance @Deleted User , but can you please let me know how I use your "CodePen" solution for pulling pdfs saved in Dropbox into the Embed API?  I don't know how to read what's on the codepen page.

Alternatiely, I tried saving a pdf to our squarespace website here: PDF Hosting Page — MedPower  However, when I try using the pdf link (https://medpower.com/s/himycasstatesubmissionfilecreation.pdf) the Adobe PDF Embed API fails.  I can't figure out why. 
Thanks!
My PDF Embed API code is below:
<div id="adobe-dc-view" style="width: 800px;"></div>
<p>
<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: "304002c69695484aa99865059b94aa87", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://medpower.com/s/himycasstatesubmissionfilecreation.pdf"}},
metaData:{fileName: "himycasstatesubmissionfilecreation.pdf"}
}, {embedMode: "IN_LINE"});
});
</script>
</p>

[Test Screen Name]

I asked you this before, Matt. Is that the exact domain that you mentioned when you got your credentials?