A Better Way to Embed PDF Documents in Web Pages


Learn how to embed content from PDF pages into your website using the new Adobe PDF viewer and offer an improved PDF reading experience to your readers.

Published in: PDF - Embed

How do you embed a PDF document into your website for inline viewing? One popular option is that you upload the PDF file to an online storage service, something like Google Drive or Microsoft’s OneDrive, make the file public and then copy-paste the IFRAME code provided by these services to quickly embed the document in any website.

Here’s a sample PDF embed code for Google Drive that works across all browsers.

  <iframe frameborder="0" scrolling="no"
     width="640" height="480"

This is the most common method for embedding PDFs - it is simple, it just works but the downside is that you have no control over how the PDF files are presented in your web pages.

If you prefer to offer a more customized and immersive reading experience for PDFs in your website, check out the new Adobe View SDK. This is part of the Adobe Document Cloud platform but doesn’t cost a penny.

Embed Adobe PDF

Here are some unique features that make this PDF embed solution stand out:

  • You can add annotation tools inside the PDF viewer. Anyone can annotate the embedded PDF and download the modified file.
  • If you have embedded a lengthy document with multiple pages, readers can use the thumbnail view to quickly jump to any page.
  • The PDF viewer can be customized to hide options for downloading and printing PDF files.
  • There’s built-in analytics so you know how many people saw your PDF file and how they interacted with the document.
  • And my favorite feature of ViewSDK is the inline embed mode. Let me explain that in detail.

Display PDF Pages Inline like Images and Videos

In Inline Mode, and this is unique to Adobe View SDK, all pages of the embedded PDF document are displayed at once so your site visitors do not have to scroll another document with the parent web page. The PDF controls are hidden from the user and the PDF pages blend with images and other HTML content on your web page.

To learn more, check this live demo - here the PDF document contains 7 pages but all are displayed at once like one long web page thus offering smooth navigation.

How to Embed PDFs with the Adobe View SDK

It does take a few extra steps to use the View SDK. Go to adobe.io and create a new set of credentials for your website. Please note that credentials are valid for one domain only so if you have multiple websites, you’d need a different set of credentials for them.

Next, open the playground and generate the embed code. You need to replace the clientId with your set of credentials. The url in the sample code should point to the location of your PDF file.

<div id="adobe-dc-view" style="width: 800px;"></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_CLIENT_ID>>",
            divId: "adobe-dc-view"
            content: { location: { url: "<<PDF Location>>" } },
            metaData: { fileName: "<<PDF File Name>>" }
        }, {
            embedMode: "IN_LINE",
            showDownloadPDF: false,
            showPrintPDF: false

Check out the official docs and the code repository for more samples.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: PDF - Embed

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube