Canvas @ YaleInstructor Guides Files ManagementEmbedding Box into a Canvas Course

Embedding Box into a Canvas Course

By using Box within a page on your Canvas course, you can have an effective way to deliver large size or many files to students in Canvas. This guide outlines how to link to Box from your Canvas course.

Creating a Box Folder

Sign into your Yale Box account using this website: https://yale.app.box.com/. If you have an existing Box folder you would like to link to, skip to "Access the Embed Code for your Folder".

1. Click on "New".

2. Select "Folder".

Click on "New" and select "Folder

3. A pop up will appear. Give the folder a name and click "Create".

Give the folder a name and click "Create".

Access the Embed Code for your Folder

In order to add the shared box folder to your Canvas site, you will need to have an embed widget. The following directions are how you can obtain and copy this code.

1. In Box, click on the three-dotted button to the right of your folder.

2. Hover over "More Actions".

3. Select "Embed Widget".

Click on the three dots, hover over "More Actions", and select "Embed Widget"

4. A pop up will appear. Make changes to the setting as you desire and copy the embed code. Once the code is copied, you can close out of the pop up.

  • Size - You can choose between the sizes of small, medium, and large.
  • Sort - The files can be sorted by Name, Size, or Date.
  • View  - You can choose to the folders as a list or a grid.
Copy the embed code

Settings for your Folder: Disable downloads

When embedding your Box folder in your Canvas course, you folder will be shared with the users who are enrolled in your course.  In Box, after you copy the embed code, your folder is given certain permissions that allow the content within your folder to be shared with users in your Course and will also allow those users to download the content from that folder.

You can turn off the ability for other users to download content in your Box folder by following these steps AFTER you have copied out the embed code.  

  1. Click on and open your folder in Box.
  2. Check the navigation breadcrumb trail [1] to make sure that you are in your new folder.
  3. Click the Share this Folder [2] button on the right (NOTE:  If you do not see the Share this Folder button, you may need to make your browser window wider.)
Click on folder then select Share this Folder
  1. In the pop-up, click on the Can view and download option [3].
  2. From the menu, select Can view only [4].
  3. After you have changed the setting, close the pop-up by clicking the X [5] in the upper right corner of the pop-up.
Select Can view only

Insert Embed Code in Canvas

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

Embedding Box Widget into a New Page in Canvas

1. In  your Canvas course, create a new page by going to "Pages" and click "+Page" in the upper right hand corner.

Go to "Pages" and click "+Page"

2. Name your new page in the top text box.  

3. Change to the HTML editor by clicking the "HTML Editor" link at the top right.

Name the page and click "HTML Editor"

4. Once you are in the HTML editor, paste the embed code here that you previously copied from Box.

5. Click "Save & Publish" to make available.

Paste the embed code and click "Save & Publish".

6. Once saved, the page will look similar to below. You maybe asked to click and drag a white cloud into a dark cloud. After doing so, your folder will appear

Making Your Canvas Page Available To Students

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

After you create it, 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 the Page and your embedded Box widget.

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

Add Page to a Module

Follow the instructions provided below - make sure that in the Add Item to Module section, you select Pages and then select the page you just created.

Add Page to Navigation

Link the page you just created to the course navigation.

1. Copy the page URL.

Copy the page URL.

2. Go to "Settings" on your course navigation.

3. Click on the "Apps" tab across the top.

4. In the "Filter by name" box, type in "Redirect".

5. Click on the "Redirect Tool".

Go to "Settings", click on "Apps", search for "Redirect", and click on the "Redirect Tool"

6. Click the "+Add App" button.

Click the "+Add App" button.

7. Name the link as you would like it to appear in the course navigation, and paste the URL to page you created in the earlier steps

8. Uncheck "Force open in a new tab" and check "Show in Course Navigation".

9. Click "Add App".

Name the link, uncheck "Force open in new tab", check "Show in Course Navigation", click "Add App"

10. Refresh your page and you will see the link in your course navigation.

Refresh your page and you will see the link in your course navigation.

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