Don't use Google Docs embed viewer
We used to recommend using Google Docs embed viewer. We stopped recommending this approach in 2018, after all major browsers began supporting displaying PDFs and Google stopped updating the Google Docs embed viewer. We now recommend a basic iframe, as outlined below.
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 authors and readers. Authors 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.
PDFs or any other files displayed in iframes will not display within the body of KnowledgeOwl-generated PDFs. For example: if I have an article called "Login instructions", and that article contains a PDF in an iframe, if I then download the PDF KnowledgeOwl automatically generates for "Login instructions", it will display an empty iframe where the embedded PDF is. Iframe content only properly generates while you are online, not viewing a static PDF.
Embed a PDF in an article using an iframe
- Upload the PDF to KnowledgeOwl to get the URL. You can:
- Upload the PDF directly to Files. If you choose this route, you'll need to copy the file URL from the library and then open the article you want to add the PDF to.
- Upload the PDF directly into the article you want to embed it in. Once you've inserted it, select the hyperlink, select Edit Link, and copy the URL.
- Select the </> Code View icon in the editor to toggle to code view:
- First, paste in the PDF url you copied in step 1.
- Copy the code below and paste it into the editor:
<iframe src="https://dyzz9obi78pm5.cloudfront.net/app/image/id/5b75b38fad121c1c11143be6/n/example-article.pdf" width="100%" height="750px"></iframe> - Replace the src URL with the URL of your PDF you pasted in step 3. Be sure to keep the URL in "quotes".
- Select the </> Code View icon again to toggle back to the WYSIWYG. If you've done everything correctly, the PDF will display embedded in the iframe.
- Be sure to Save your article.
Here's what a PDF looks like embedded in an iframe:
