Canvas @ YaleInstructor Guides Files ManagementEmbedding Box (Cloud Storage) into a Canvas Course

Embedding Box (Cloud Storage) into a Canvas Course

Box is a cloud storage solution available through Yale. Like other cloud storage solutions, you can upload, store, and distribute files. By using Box within a page on your Canvas course, you can have an effective way to deliver files to students in Canvas when you have exceeded your course storage quote and / or the files are too large for Canvas to support (500 MB). This guide outlines how to embed a folder on Box into a page on your Canvas course.

All members of the Yale community with an active NetID and a valid Yale email address are eligible to use Box. If you do not already have an account, you can activate your Yale Box account by going to this website: https://yale.app.box.com/

Table of Contents

This is a multi-step process with several components along the way. The sequence is as follows:

  1. Creating a New Box Folder
  2. Accessing the Embed Widget for your Box Folder
    1. OPTIONAL: Disabling File Downloads
  3. Inserting the Box Embed Widget into a Canvas Page
    1. Alternative Ways to Link / Display your Embedded Box Folder
      1. Add Page to a Module
      2. Add Link to Page in an Announcement / Assignment / Page, etc.
      3. Add Page to Course Navigation via Redirect Tool

Creating a New Box Folder

If you have an existing Box folder you would like to link to, skip to "Accessing the Embed Widget for your Box Folder."

  1. In your Box account, click on "New" in the top-right corner.
  2. Select "Folder" from the list of options.
  1. A pop up will appear. Provide a "Folder Name" and click "Create."
    1. Do not provide any email addresses to "Invite Additional People," or change the "Permission."

Accessing the Embed Widget for your Box Folder

In order to add the shared Box folder to your Canvas site, you will need to have an embed widget. The embed widget is the HTML code used to give access and display your Box folder on a Canvas page.

  1. In Box, click on the three-dotted button to the right of your folder.
  2. Hover over the "More Actions" option to open a side panel of items.
  3. Select the "Embed Widget" option.
  1. In the pop-up that opens, click "Copy" once you have made any changes to the widget's physical display and sort settings.
    1. Size - You can choose the size of the widget display (Small: 330 x 400, Medium: 500 x 400, Large: 800 x 550).
    2. Sort - The items can be sorted by Date or Name.
    3. View  - You can choose for the items to be displayed as a List or a Grid.

OPTIONAL: Disabling File Downloads

When embedding your Box folder in a Canvas course page, that specific folder will be shared with the users who are enrolled in your course. In Box, after you copy the embed code, your folder has certain permissions that allow those users to download the content from that folder.

You can turn off the ability for people to download content that is displayed in your Box folder by following these steps AFTER you have copied the embed code.

  1. In Box, check the navigation breadcrumb trail to make sure that you are in the correct folder.
  2. Click the "Share" button in the top-right corner.
  1. In the pop-up, click on the "Can view and download" option.
  2. From the drop down menu, select "Can view only."
  3. After you have changed this setting, close the pop-up by clicking the X in the upper-right corner of the pop-up.

Inserting the Box Embed Widget into a Canvas Page

We recommend that you insert the Box embed widget code that you copied previously for you Box folder into a Canvas page. You could insert the embed code for your Box folder anywhere in Canvas where you see the Rich Content Editor, but having a page dedicated to your embed folder is typically the best method.  

  1. In your Canvas course, create a new page by going to "Pages" in the course navigation and click the "+Page" button in the top-right corner.
  1. Name your new page in the top text box.  
  2. Change to the HTML editor by clicking the "</>" button below the rich content editor in the bottom-right corner.
  1. Once you are in the HTML editor, paste the embed code that you previously copied from Box into the text box.
  2. Click "Save & Publish" to make the page available to students.
  1. When accessing the Canvas Page, you maybe asked to click and drag a white cloud into a dark cloud as part of a security check. After doing so, your folder will appear with the files displayed.

Alternative Ways to Link / Display your Embedded Box Folder

After you create your Canvas page with the embedded Box folder, students are able to access your new Page by clicking on the Pages button in your course navigation menu. Although this is a totally acceptable way for students to access your new Page, you may want some more flexibility on where students go to find / reference that Page and your embedded Box widget.

Below are some options you have for making your Page available to students in a location other than strictly through the Pages tool.

Regardless of which option you choose, your Page must be published for students to access it.

Add Page to a Module

Make sure that in the "Add" drop down section of your module, you select "Pages" and then select the page you just created.

Add Link to Page in an Announcement / Assignment / Page / etc.

You can add a link to your new Page anywhere you see the Rich Content Editor.  

Add Page to Course Navigation via Redirect Tool

Link the page you just created in your course navigation menu for easy access.

  1. Copy the page URL from the address bar at the top of your browser.
  1. Go to "Settings" on your course navigation.
  2. Click on the "Apps" tab across the top.
  3. In the "Filter by name" box, type in "Redirect."
  4. Click on the "Redirect Tool" application that appears in your search.
  1. On the Redirect Tool page, click the "+Add App" button.
  1. In the pop-up window that appears, provide a "Name" for the link as you would like it to appear in the course navigation.
    1. Paste the "URL Redirect" to the page you created in the earlier steps.
  2. Uncheck "Force open in a new tab" and check "Show in Course Navigation."
  3. Click "Add App."
  1. Refresh your browser page and you will see the new link in your course navigation.

For more help with Box.com, please contact Yale ITS Helpdesk. For general help with Canvas, please contact canvas@yale.edu.