Embed .PDF on webpage

Is there free .pdf embed code out there somewhere? I'm trying to embed a multi-page .pdf file on one of my clients web pages, without having to use a subscription service like Issuu or hosting it on Adobe's cloud.  Is there a more straight-forward path for embedding a .pdf from a public Google drive folder? Any tips/tricks greatly appreciated. 😄

21 minutes ago, stevesny said:

Is there free .pdf embed code out there somewhere? I'm trying to embed a multi-page .pdf file on one of my clients web pages, without having to use a subscription service like Issuu or hosting it on Adobe's cloud.  Is there a more straight-forward path for embedding a .pdf from a public Google drive folder? Any tips/tricks greatly appreciated. 😄

Hi, see this instruction might be it will work for you. It embed pdf via google drive into website. You will add embedded code into code block in squarespace.
 

Thank you,  I appreciate your help. It does seem to work but now I want to figure out how to get rid of the shadowed border. Any thoughts on that?  

23 minutes ago, stevesny said:

Thank you,  I appreciate your help. It does seem to work but now I want to figure out how to get rid of the shadowed border. Any thoughts on that?  

What is your site url

I found a solution for displaying PDFs in a Squarespace page, thanks to Joel Geraci on Codepen. https://codepen.io/practicalPDF/pen/PoZLWeq

This solution works with Dropbox as the PDF source storage and the Adobe PDF API. It's actually pretty simple with just a few steps. If you work out how to make it play nice with Google Drive, please post a comment.

1. Start at this demo page. It gives you a good overview of what the setup is in general. https://documentservices.adobe.com/view-sdk-demo/index.html#/view/IN_LINE/Bodea Brochure.pdf
2. Next you need an API client ID from Adobe (you may need an Adobe account). You'll need this ID for the javascript in the next step. From that demo page you can generate sample code, and when you do, you'll notice there's a button to generate an ID called 'Get Credentials' (you just need the ID numbers, forget about the JS code example, there's a better version below). The ID will be associated with a specific domain name you elect to use. I found I needed to create one ID for 'squarespace.com' just while I set it up and tested it in the SQS CMS edit mode. Then I simply created a second ID using my clients' domain name (swapping out the old client ID in the JS code below).   
3. From Codepen I grabbed this code by Joel Geraci and put the whole lot in a Code Block on my Squarespace page (I've updated viewer.js link as it was changed recently by Adobe):

<script src="https://documentservices.adobe.com/view-sdk/viewer.js"></script>
<script type="text/javascript">
const dropboxLink = "https://www.dropbox.com/s/xxxxxxxxxxxxx/PDF-example.pdf?dl=0"; // replace this link with your own from Dropbox
const clientId = "insert your API client ID here"; // insert your Adobe API client ID as described above
const viewerOptions = {
    embedMode: "IN_LINE", // this stacks the PDF pages on your web page, which is very mobile friendly; see Adobe API docs for other layout options
    defaultViewMode: "FIT_PAGE",
    showDownloadPDF: false,
    showPrintPDF: false,
    showLeftHandPanel: true,
    showAnnotationTools: true
};

document.addEventListener("adobe_dc_view_sdk.ready", function () {
    var urlToPDF = directLinkFromDropboxLink(dropboxLink);
    var adobeDCView = new AdobeDC.View({
        clientId: clientId, // do not edit, particular to the URL API key from Adobe above
        divID: "adobe-dc-view"
    });
    adobeDCView.previewFile(
        {
            content: { promise: fetchPDF(urlToPDF) },
            metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }
        },
        viewerOptions
    );
});

// Utility Functions:
// Return a Promise that fetches the PDF. 
function fetchPDF(urlToPDF) {
    return new Promise((resolve) => {
        fetch(urlToPDF)
            .then((resolve) => resolve.blob())
            .then((blob) => {
                resolve(blob.arrayBuffer());
            })
    })
}

// Converts a standard Dropbox link to a direct download link
function directLinkFromDropboxLink(dropboxLink) {
    return dropboxLink.replace("www.dropbox.com", "dl.dropboxusercontent.com").replace("?dl=0", "");
}

// Add arrayBuffer if necessary i.e. Safari
(function () {
    if (Blob.arrayBuffer != "function") {
        Blob.prototype.arrayBuffer = myArrayBuffer;
    }

    function myArrayBuffer() {
        return new Promise((resolve) => {
            let fileReader = new FileReader();
            fileReader.onload = () => {
                resolve(fileReader.result);
            };
            fileReader.readAsArrayBuffer(this);
        });
    }
})();
</script>

<!-- Display PDF viewer in this div -->
  <div id="adobe-dc-view" style="width: 100%;"></div>

7 hours ago, simon said:

If you work out how to make it play nice with Google Drive, please post a comment.

It's been awhile since I've looked into this. The trick in the past was to change the sharing URL from the viewer URL to the actual "raw" file URL.