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.

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.


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.

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

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.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory


Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.