Back to Tutorials

Embed documents from OneDrive

A short guide to show you how to embed your hosted documents (From either a personal OneDrive account, or a school's Office 365 account) into a FrogLearn Site or Dashboard.

Have you subscribed to TheFrogBlog? Find out more

How to embed a OneDrive (Office 365 for Education) document into FrogLearn?

The key difference between the embed code you get for a document in a personal OneDrive account, and an organisation's Office 365 account is how you obtain the embed code . 


If we were to follow exactly the same steps as shown in the personal OneDrive instructions, then someone who does not have a log in (or just isn't logged in) to the School's Office 365 environment, would be presented with something this:



The reason for this is that even though you have made the link for the document viewable for anyone without requiring them to be signed in, for some reason O365 ignores this when you go to get the embed code. So when you embed the HTML, it still requires whoever accesses the site to be logged into the O365 environment to be able to view it. This left us scratching our heads, however we have found a workaround that only adds a simple step. Here's how you do it:


First you need to open the document, and then click 'Share with people' and then when the menu pops up, click 'Get a link' on the left, and then change the drop down box on the right to 'View link - no sign-in required'. Before you click close, copy the link that is generated below it:



Copy the link and then paste it into a either another window or browser that is not logged into your Office 365 enviornment (Google Chrome Incognito mode / IE Inprivate Browsing should work). You then need to copy the web address the link changes to, e.g.



We need to paste this link into iFrame code for an HTML widget, but it needs modifying first.  Replace the section in red &action=view with &action=embedview&wdbipreview=true, so that your code looks similar to this:

<iframe src="https://frog-my.sharepoint.com/personal/graham_quince_frogeducation_com/_layouts/15/WopiFrame.aspx?sourcedoc=%7Bb3598972-e242-4ad2-b340-b1a94764cf89%7D&action=embedview&wdbipreview=true" width="100%" height="1000">    </iframe>


Now you just need to go to your site / dashboard that you wish to embed the document onto, add an HTML Widget to the page, and then paste the HTML code copied from the previous step:



So there you go, you now have your document hosted in your O365 OneDrive, embedded in FrogLearn. You can play around with the size of the document to make it fit perfectly within the page on your site or dashboard. To do this just tweak the 'width' and 'height' in the HTML code until it fits how you want.

Tutorials in this series...

product hubs

FrogProgress-600_600.png  FrogLearn 600_600.png  FrogPlay 600_600.png

Product updates

A sneak peek at the new Frog App and updates to the Frog interface.
Save time with pre-populated site templates
FrogLearn now has over 30 mobile themes
How we can work with Multi-Academy Trusts
Progress Hub - All about our student progress tracker
All about our student progress tracker
All about our online assessment system
Helpful information that relates to GDPR functionality inside the Frog platform
Get access and use all our in-platform Site templates
Save time with pre-populated site templates