Display PDF file in articles

Note: We used to recommend using Google Docs embed viewer. Not all major browsers had the ability to display PDFs. For example, Firefox would download them. But, now that all major browsers display PDFs, we recommend a basic iFrame. The Google Docs embed has some bugs and Google does not seem to support it. Plus it's easier!

You can display PDFs inside your articles using an iFrame. This allows you to embed your PDFs inside articles similar to how you can embed YouTube videos using an embed code. 

Embedding PDFs is often easier for both users and readers. Users don't have to convert the PDFs to web format, and readers can view the PDFs without having to download them. KnowledgeOwl also indexes the content of uploaded PDFs for search so your readers can find articles in search even if the text is inside a PDF.

To embed a PDF in an article using an iframe

  1. Upload the PDF to KnowledgeOwl to get the URL. You can upload files under Files > Library, or you can upload the file directly into the article. Both will give you the link. A PDF link looks like this:
    //dyzz9obi78pm5.cloudfront.net/app/image/id/5b75b38fad121c1c11143be6/n/example-article.pdf
  2. Click on Code View (Source) in the WYSIWYG editor to get to the HTML and paste the following code where you want the PDF to appear.
    <iframe src="//dyzz9obi78pm5.cloudfront.net/app/image/id/5b75b38fad121c1c11143be6/n/example-article.pdf" width="100%" height="750px"></iframe>
  3. Replace the bold URL with the URL of your PDF and save. 

Here's what a PDF looks like embedded in an iframe:



To embed a PDF in an article using Google Doc viewer (no longer recommended):

  1. Upload the PDF to KnowledgeOwl to get the URL. You can upload files under Files > Library, or you can upload the file directly into the article. Both will give you the link.
  2. Click on Code View (Source) in the WYSIWYG editor to get to the HTML and paste the following code where you want the PDF to appear.
    <iframe src="https://docs.google.com/gview?url=https://app.knowledgeowl.com/app/image/id/539b6043fe775a8348000003/n/Example-Article.pdf&embedded=true" style="width:100%; height:750px;"></iframe>
  3. Replace the bold URL with the URL of your PDF and save.

Here's what a PDF looks like embedded in the Google Doc Viewer.