Embedding Box into a Canvas Course

By using Box.com within a page on your Canvas course, you can have an effective way to serve many, or large, files to students in Canvas. You can also use this Box folder as a way to allow students to upload files to share with the class as a whole. This guide outlines how to link to Box from your Canvas course.

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

  1. Create a Box Folder to link to, or use an existing folder.
  2. Create a New Page in Canvas, to embed the Box folder.
  3. Add the Page to Course Navigation in which the Box folder is embedded.

Creating a Box Folder

Sign into your Yale Box account using this website: http://box.yale.edu. If you have an existing Box folder you would like to link to, skip to step 2. To link to a new folder:

1. Click on + New.

New Folder in Box

 2. Select Folder

Folder Selection in Box

3. A pop up will appear, allowing you to give your folder a name.

Screenshot of information to fill out to create folder.

The default sharing option is for people in the Yale community to have access to the folder once it is linked to your course. You can change this after you create the folder, by clicking on the "Sharing" option.

There are several roles you can choose from, this information is available by clicking "Learn about access levels" information icon. Select the appropriate permission for the students.

roles you can give to users.

5. Click Create, and your folder should now be created. You can then begin adding and organizing content into the folder.

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.

6. In Box, click on the three-dotted button to the right of your folder [1], hover over More Actions [2],  and choose Embed Widget [3].

scrneeshot of how to access embed widget in box

7. A pop up will appear, copy the embed code.

  • 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 link

Create a New Page in Canvas

In order to embed the Box folder into your Canvas site, you will need to create a page within Canvas.  

1. In Canvas, create a new page by selecting Pages in the left navigation of your canvas course.

click on pages in course navigation

2. Click “+ Page” in the upper right corner.

click +Page

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

4. Then select HTML Editor in the top right of the page.

Name page and use html editor

5. Once you have selected “HTML Editor” you will notice that you now have simply a blank box for inputting text. Paste your code here that you previously copied from Box.

paste embed code

6. Click Save and Publish.

click save & publish

Add Page to Navigation

Link the page you just created to the course navigation.

1. Copy the page you URL to your clipboard.

copy URL from Canvas page

2. From your left side navigation bar, click on Settings.

3. Across the top of the screen, click the Apps tab.

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

5. The App results will now filter. Click on the Redirect tool.

use redirect tool in settings.

6. Click the +App button.

click +add app

Enter the information for the page you created in the earlier steps.

7. The name of the page should have reference to the Box folder you will be linking.

8. Paste the URL to page you created in the earlier steps

9. Uncheck force open in a new tab

10. Check Show in Course Navigation

11. Click Add App

screenshot of information needed to add app.

Refresh your page and you will see the link in your course navigation. When you click on the link, you will either see a login screen for Box or a screen like below:

screenshot of box page

Once you log in or drag the cloud to its insert, you will see your box folder within Canvas. You can add/edit/delete files from this page directly. If you gave your students access to edit this folder, then they also can add/edit/delete files.

screenshot of box folder embedded in Canvas page.

Note: As a security measure, whenever you access the Box link within Canvas you will be asked to either log in or drag the cloud to its insert.

For more help with Box.com, please contact  Yale ITS Helpdesk or 203-432-9000.