This approach allows you to embed your MS Office files inside articles similar to how you can embed YouTube videos using an embed code.
Embedding files is often easier for both authors and readers. Authors don't have to worry about file conversion or incompatible software, and readers can view the files without having to download them.
Update October 16, 2019: Microsoft has taken down the web portal for their Office Online Doc Viewer, which we used to recommend using. We've been in contact with Microsoft but haven't found out if it was moved or decommissioned. For now, it looks like they are still supporting the viewer itself, just not the URL encoding. The steps below will help you generate an appropriate encoded file URL to use with the viewer.
If you use Office Online, we recommend embedding files directly from OneDrive without uploading them to KnowledgeOwl. Contact us if you need help!
To be able to use the Office Online Doc Viewer, your files cannot be larger than:
- Word: 10Mb
- PowerPoint: 10Mb
- Excel: 5Mb
To embed a Microsoft Office file in an article using an iframe:
- Upload the file 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 sample PowerPoint file link looks like this:
https://dyzz9obi78pm5.cloudfront.net/app/image/id/5da780688e121c1973a70e2a/n/sample-presentation.pptx - Once your file is uploaded, copy the URL for that file.
- Go to URL Encode and Decode. Paste your file's URL into the top section and click the Encode button.
- This will generate an encoded version of your URL which you can use in your iframe:
Sample encoded URL
- Copy that URL.
- In KnowledgeOwl, click on Code View (Source) in the WYSIWYG editor to get to the HTML and paste the following code where you want the file to appear.
<iframe width="100%" height="600" scrolling="yes" src="https://view.officeapps.live.com/op/view.aspx?src=ENCODED-URL-HERE"> </iframe> - Replace the
ENCODED-URL-HEREwith the encoded URL you generated in Step 3 and save.
For our example, our embed code would look like this:
Sample iframe embed code for a Powerpoint presentation
Here's what a PowerPoint presentation looks like embedded in an iframe using this method:
