eHelp Google - File and Folder Embed

With the Google Integration into Canvas it will allow you to embed files from your Google Drive. IT WILL NOT EMBED FOLDERS. However, there is a code that will allow you to do just that.

* How do I create and add folders and files? - Instructions on the process in Google Drive.

Within the Rich Content Editor (RCE)

  • Go to your course
  • Click on Pages/Assignments/Discussions etc. 
  • Create a +New_____ or Edit existing content
  • In the Tool Bar click either Tools -> Apps or the Plug icon

canvasNewRCEKalturaEmbed

You will see options for apps you have already used - click Google Apps

canvasGoogleApps

*** If you have not previously chosen any apps, you will see the below window after clicking Apps. Click Google Apps.

canvasGoogleAppsNew

Once you click on the button you will get a pop-up window as shown below. If you have not authorized Canvas to access your Google Drive account it will ask you to do so here. If you have allowed Canvas to authorized your Google Drive it will display you folders first and then your unfoldered files.

GoogleDrive

With this you can only link or embed files NOT folders.

If you wish to link a folder you will need to go to Google Drive site change the permission of the folder you wish to share to Anyone at LTU with this link can view, get the shareable link and paste into a page, assignment, discussion, anywhere there is the Rich Content Editor. If you want to embed the folder see the next accordion tab below this one.

Within Modules

  • click the '+' in the Module you want you the file to be added too.
  • Then from the drop-down select External Tool and look for Google Drive.
  • Click that and it'll bring up the same image as above but instead of Embed and Link at the bottom it'll say Submit
  • Choose your file and click submit.

Adding a folder will be in a similar way but instead of External Tool you'll use External URL and go to Google Drive site change the permission of the folder you wish to share to Anyone at LTU with this link can view, get the shareable link and paste into the sectioned for URL.

Creating the folder in Google Drive
Once  folder is created in Google Drive, files added to folder, and permissions are set, now ready to incorporate and link the Google Drive Folder in Canvas.

Google Drive URL:
To embed this Drive folder within Canvas, you will need to extract the folder extension.

  • Open the folder that you want to use in Canvas
  • You will see the “ address” of the folder in the menu area

Highlight and copy to clipboard the text following /folders/172OPjI-zwa3fWL6nexsP-4i6Gj-hqsii

URLaddressSelect

Google Drive Folder Embed Views

List view

googleListView

Grid view

googleGridView

Using Design Tools HTML Snippet

Add Drive Folder to Canvas Course

  • Log into a Canvas Course and select Modules, create +New (Module), type in a name. Going to add a page in this module by clicking on the + to the right of the module
  • Click down arrow and select Page from the list. Highlight/select New Page and type in a name to the right of Page Name. Click Add Item
  • Once page opens, select +Edit. Need to add the HTML link to the Google folder in Edit mode.

Canvas Course

    • Select+Edit
    • Open Design Tools(Rocket Ship appears at top right)
      designToolsLocation
  • Click “Add Advanced Elements” and HTML Snippets. Select Institutional Snippets, Google Drive Folder (List or Gird Views)
    goolgeFolderEmbeds
  • Scroll up and click on Customize Style. Select Style iframes
  • When Iframes open you will see the HTML code in the box under Source
  • Click within this box and move cursor over until you see “YOURID”. Highlight only YOURID and replace with the folder address you copies earlier (see above picture. 172OPjI-zwa3fWL6nexsP-4i6Gj-hqsii). You may or may not see immediately, but once added.
pasteGoogleCode
pasteUniqueID

Scroll down on the page and click Save